Content Security Policy (CSP)

What to do if the Chrome Extension indicates that a CSP error is blocking Chameleon from running on the page

Pulkit Agrawal avatar
Written by Pulkit Agrawal
Updated over a week ago

Security is extremely important to Chameleon and we take it seriously. To learn more about our practices, please review this page.

A Content Security Policy is a defense mechanism that prevents unauthorized code from running on a web page. Web app administrators can control what resources a user is allowed to load on a specific page. This helps guard against cross-site scripting attacks (XSS).

The CSP defines the Content-Security-Policy HTTP header, in which the web app administrator can set an allowed list of trusted sources. The browser can then only run content from these sources.

You may see a CSP error when trying to "Enter Builder" from the Chrome Extension, such as the below.

Screenshot of a CSP error within the Chrome Extension

Alternatively, if you open Dev Tools or the browser console, you may see an error such as:

(index):66 Refused to load the script 'https://fast.chameleon.io/messo/abcdefghijklmnopqrstuvwxyz/messo.min.js' because it violates the following Content Security Policy directive: \"script-src 'self' 'unsafe-inline' \"."

This indicates that the underlying page has a CSP that has not yet included Chameleon as a trusted source. This can happen when your developers are not aware of your attempts to try/evaluate Chameleon.

This is not unsafe in itself but you will not be able to view or use the Chameleon Builder until your developers include Chameleon as a trusted source.

CSP errors can present in a few unintended ways when:

  • Images showing up blocked/refusing to load

  • Tours loading with missing content

  • Running additional scripts tied to Chameleon Experiences

  • Blocking Chameleon entirely

If you're not technical, you'll need to talk to the engineer or developer on your team responsible for security or managing third-party scripts on your site.

To enable Chameleon, add the following string below to any Content-Security-Policy directive allowed lists in your website's request headers.

default-src: https://*.chameleon.io
script-src: 'unsafe-inline'

Your script-src allowed list will need to include 'unsafe-inline'. This is necessary to include the Chameleon JavaScript snippet directly into the html page. To exclude 'unsafe-inline' check the section below on Excluding 'unsafe-inline'.

More specific inclusions

If you don't want to add Chameleon to your default-src CSP, then you can add it to: script-src, connect-src, img-src, and frame-src. Just like above, script-src will also need 'unsafe-inline'. To exclude 'unsafe-inline' check the section below on Excluding 'unsafe-inline'.

Here's an example of this references chameleon.io in these 4 places:

script-src: 'unsafe-inline' https://*.chameleon.io ... 
connect-src: https://*.chameleon.io ...
img-src: https://*.chameleon.io blob: ...
frame-src: https://*.chameleon.io ...

If you wish to exclude unsafe-inline you have a couple of options:

  1. Add the Chameleon snippet to your JS bundle or "main chunk" so that it's not included "inline" in the HTML page.

  2. Load the Chameleon snippet via script tag like this:

<script src="https://fast.chameleon.io/snippet/ACCOUNT_TOKEN/snippet.js" async defer crossorigin="anonymous"></script>

Chameleon's allows you to run custom code scripts from Step Button or Launcher Item, to perform other custom actions, such as opening a chat messenger or sending data to a particular system. This can provide you flexibility in cases where Chameleon does not already offer a direct integration.

This feature requires the addition of unsafe eval in the script-src CSP setting:

script-src: 'unsafe-eval' ... https://*.chameleon.io


For accounts created before 2022-05-14

The if the on-page JavaScript snippet references trychameleon.com you should refer to the following information:

default-src: https://*.trychameleon.com https://*.chmln-cdn.com
script-src: 'unsafe-inline'

Or for a more specific approach, here's an example of this:

script-src: 'unsafe-inline' ... https://*.trychameleon.com
connect-src: ... https://*.trychameleon.com
img-src: ... https://*.trychameleon.com https://*.chmln-cdn.com blob:
font-src: ... https://*.chmln-cdn.com
frame-src: https://*.trychameleon.com
More information

If you wish to exclude unsafe-inline you have a couple of options:

  1. Add the Chameleon snippet to your JS bundle or "main chunk" so that it's not included "inline" in the HTML page.

  2. Load the Chameleon snippet via script tag like this:

<script src="https://fast.trychameleon.com/snippet/ACCOUNT_TOKEN/snippet.js" async defer crossorigin="anonymous"></script>
Did this answer your question?