If your application uses a Content Security Policy, Chameleon will be blocked until it is added to your allowed list. This article explains what a CSP is, what symptoms to look for, and the exact configuration needed to allow Chameleon to run.
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 (CSP) is a security mechanism that controls which external scripts and resources are allowed to run on a web page. It protects against cross-site scripting (XSS) attacks by letting web administrators define a list of trusted sources.
If Chameleon is not on that list, the browser will block it from loading.
Symptom 1: When you click "Enter Builder" from the Chrome Extension, you see an error:
Symptom 2: In your browser's developer console, you see an error like:
(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' \"."
Symptom 3: Chameleon Experiences load with missing content, blocked images, or do not load at all.
ℹ️ A CSP error is not itself a security risk. It simply means your developers have not yet added Chameleon to the trusted sources list. Nothing will work in Chameleon until this is resolved.
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:
Add the Chameleon snippet to your JavaScript bundle or "main chunk" so that it's not included "inline" in the HTML page.
Load the Chameleon snippet via
scripttag 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
Configuration 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:
Add the Chameleon snippet to your JS bundle or "main chunk" so that it's not included "inline" in the HTML page.
Load the Chameleon snippet via
scripttag like this:
<script src="https://fast.trychameleon.com/snippet/ACCOUNT_TOKEN/snippet.js" async defer crossorigin="anonymous"></script>
Still stuck?
If you still see a CSP error after updating the configuration, confirm the changes have been deployed and the page cache has been cleared.
Read I don't see the Chameleon Builder for other reasons the Builder may not be loading.
If you cannot resolve the issue, paste the console error you're seeing on Copilot and it can help you troubleshoot!