Set up your Content Security Policy for Mutiny

A content security policy (CSP) is an extra layer of security that some websites have implemented. It allows developers to better control what types of things are allowed to load on your website. Sometimes, your CSP can block Mutiny from doing specific things, like loading your site in the editor.

How to know if you're seeing a CSP issue

The quickest way to spot a CSP issue is seeing unexpected changes on your site. For example, you may see an image that didn't load correctly, or some CSS that looks a bit off. To verify if these issues are being caused by CSP issues, right click the page, click "Inspect" and then click "Console" at the top of the developer window. If there are CSP errors, you'll likely see something like this:

Setting up your CSP for Mutiny

To solve these errors, you'll need to allow-list the following domains on your content security policy:

• connect-src: *.mutinyhq.com, *.mutinyhq.io, *.mutinycdn.com

• img-src: *.mutinycdn.com

• script-src: *.mutinycdn.com

• frame-ancestors: https://app.mutinyhq.com

Additionally, if you want to use Mutiny's custom javascript feature, you'll need to add 'unsafe-inline' to your script-src directive.

X-Frame-Options

The X-Frame-Options header can be used to indicate to browsers whether or not to allow the rendering of a page within an <iframe> hosted on another origin. If your site uses the X-Frame-Options header, Mutiny will be prevented from loading your site in the visual editor.

You can allow your site to be loaded in the Mutiny editor without changing the X-Frame-Options header by using the frame-ancestors directive within a Content-Security-Policy header as described above. When a CSP header is present, they take precedence over X-Frame-Options headers.