What is a CSP?
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.
Why am I getting an error?
You may see a CSP error when trying to "Enter Builder" from the Chrome Extension, such as the below.
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.trychameleon.com/messo/abcdefghijklmnopqrstuvwxyz/messo.min.js' because it violates the following Content Security Policy directive: \"script-src 'self' 'unsafe-inline' 'unsafe-eval'\".",
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.
Adding Chameleon to your CSP
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://*.trychameleon.com https://*.chmln-cdn.com
script-src allowed lists will need to include
'unsafe-inline' 'unsafe-eval'. This is necessary to run some functions of the Chameleon Builder inside your application.
Security is extremely important to Chameleon and we take it seriously. To learn more about our practices, please review this page.
More specific inclusions
If you don't want to add Chameleon to your
default-src CSP, then you can add it to:
And just like
script-src will also need
Here's an example of this:
script-src: 'unsafe-inline' 'unsafe-eval' ... https://*.trychameleon.com
connect-src: ... https://*.trychameleon.com wss://*.trychameleon.com
img-src: https://*.chmln-cdn.com blob:
frame-src: https://*.trychameleon.com https://*.chmln-cdn.com