Content Security Policy (CSP) error in the console
Table of contents
What does Content Security Policy (CSP) mean?
Websites can set up a Content Security Policy (CSP) by either setting the HTTP response header Content-Security-Policy or by using a meta tag with the attribute http-equiv="Content-Security-Policy" in the HTML.
Instead of automatically trusting all content from the server, the CSP determines which sources are considered secure. The browser then only executes scripts, styles or other resources that originate from these trusted sources.
How to recognize the error
You need to update your CSP to use Varify.io if:
- You see an error like this in your browser console:
- This page uses security features that are incompatible with the varify.io editor.
- You see an error like this in the Google Developer Tools:
- Refused to execute editor.varify.io because it violates the following Content Security Policy directive...
- You see a mistake like this:
- Content Security Policy of your site blocks the use of 'eval' in JavaScript.
How to fix the error
If your website uses a Content Security Policy (CSP), please enter the following values:
https://app.varify.io
https://editor.varify.io
https://ip.varify.dev
You also need the value unsafe-eval in the script-src directive.
For the Responsive Device Switcher to work, your domain must also be specified in the frame-ancestors and frame-src directives.
Example of a suitable CSP:
Content-Security-Policy: frame-ancestors {YOUR_DOMAIN}; frame-src {YOUR_DOMAIN}; script-src 'unsafe-eval' https://app.varify.io https://editor.varify.io; connect-src https://ip.varify.dev
Note: The unsafe-eval entry is necessary so that user-defined JavaScript can be executed within variations.