Allow MivoChat through a Content Security Policy

Installation steps

1. 1

   Prepare

   Find the origin in the src of your script tag; production installs use https://mivochat.app.

2. 2

   Configure

   Add that origin to script-src, frame-src and connect-src, keeping every source those directives already list.

   script-src https://mivochat.app;
   frame-src https://mivochat.app;
   connect-src https://mivochat.app;
   style-src 'unsafe-inline';

   Copy
3. 3

   Publish

   Add 'unsafe-inline' to style-src, or accept that the launcher can render unstyled; the loader writes its styles inline inside a shadow root.

4. 4

   Verify

   Reload with DevTools open, read the Console for blocked URIs that name the MivoChat origin, and send a test message.

The directives to add

The loader needs four things from your policy. The script-src directive lets the browser run widget.js. The frame-src directive lets the chat panel open as an iframe served by MivoChat. The connect-src directive lets the loader fetch its site configuration, and style-src lets it apply its own styles.

Replace the origin with the one in your script tag if you load the widget from anywhere other than production. A preview or local environment serves widget.js from its own origin, so the policy has to name that origin instead.

script-src https://mivochat.app;
frame-src https://mivochat.app;
connect-src https://mivochat.app;
style-src 'unsafe-inline';

Why style-src needs unsafe-inline

The loader builds its launcher inside a closed shadow root and writes a style element into it as markup. Browsers treat that as an inline style, so a policy with default-src 'self' and no style-src exception blocks it and the launcher appears without styling. A nonce cannot help, because the style element lives inside the shadow root and your page has no way to reach it.

We have not tested every browser and policy combination. If you cannot allow inline styles site-wide, scope the exception to the pages that show chat, or link visitors to a separate support page.

Images and the chat panel

The default launcher icons are drawn inline and need no image source. If you upload a custom launcher image in Widget settings, add the host that serves it to img-src.

The chat panel is a separate document served by MivoChat under its own policy. Your script-src and style-src do not apply inside it; on your page only frame-src decides whether it can open.

Roll it out safely

Start with the report-only header so violations are logged without breaking the page, then switch to the enforcing header once the console is clean. Look for reports whose blocked URI names the MivoChat origin.

Content-Security-Policy-Report-Only: script-src 'self' https://mivochat.app; frame-src https://mivochat.app; connect-src 'self' https://mivochat.app; style-src 'self' 'unsafe-inline'

Before you change the setup

Who this is for

an engineer who owns the security headers of a marketing or docs site and must keep a strict policy

What you need

the current policy string, the origin in your script tag, and a way to deploy a header change

Where it goes

the Content-Security-Policy response header, or a meta tag, set by the host, framework or CDN in front of the site

Watch out for

a header set at two layers, such as the framework and the CDN, is merged by the browser, so every layer must allow the origin

Test the support boundary

• Does the launcher open with default-src 'self' still in place?
• Does a custom launcher image load once img-src names its host?
• Does a report-only policy show zero MivoChat violations before you enforce it?

Related guidance

If the launcher still fails after the policy is correct, follow the troubleshooting guide's table to separate a policy block from an origin or ad blocker problem.

Frequently asked questions