Update your site's Content Security Policies (CSP)
- Optimizely Web Experimentation
- Optimizely Performance Edge
You can replace and configure the deprecated X-Frame-Options HTTP header with its successor, Content Security Policies (CSP).
Many sites protect visitors from cross-site scripting (XSS), clickjacking, and other code injection attacks by adding an X-Frame-Options header. However, the header can block Optimizely Experimentation from running parts of the snippet on your pages or sending tracking information back to Optimizely servers.
For this reason, you may need to update your site to include Content Security Policy (CSP) header to run Optimizely Experimentation and keep your customers safe from outside attacks.
Implement Content Security Policies (CSP)
X-Frame-Options is a deprecated web standard that has been succeeded by Content Security Policies, which let you have greater customization, including the ability to allowlist Optimizely Experimentation.
For Optimizely Experimentation, add the following directives to the CSP header for your pages:
frame-src https://a[your-account-id-here].cdn.optimizely.com https://a[your-account-id-here].cdn-pci.optimizely.com;
script-src 'self' https://*.optimizely.com https://optimizely.s3.amazonaws.com https://cdn-assets-prod.s3.amazonaws.com 'nonce-[your-nonce-value]' 'strict-dynamic';
connect-src https://logx.optimizely.com https://*.optimizely.com;
img-src https://cdn.optimizely.com;
style-src https://*.optimizely.com 'unsafe-inline';Each of the five directives in the CSP policy has a specific purpose:
- The frame-src line enables cross-domain behavioral targeting. If you do not need it, you can omit this directive. Note that the second URL is only necessary if PCI is enabled.
- The script-src line enables the Optimizely Experimentation client script, the preview mode client, and Optimizely Experimentation geotargeting. In browsers that support strict-dynamic (Content Security Policy Level 3), it is only necessary to apply the nonce value to the Optimizely Experimentation snippet script tag. If you only need to support such browsers, the directive can be simplified to:
script-src 'nonce-[your-nonce-value]' 'strict-dynamic'See strict-dynamic for information about backwards compatibility in script-src.
- The connect-src line enables the Optimizely Experimentation client to log events.
- The img-src line lets the Optimizely Experimentation client load images that were uploaded using the Visual Editor.
- The style-src line is required for experiment CSS changes to be applied. It is also required to avoid a jQuery feature detection error for any jQuery versions below 1.8.3.
Now your browser lets your site and Optimizely Experimentation load your pages in an iframe, while blocking attempts from all other parties.
Required for the new Visual Editor
Your site's CSP directives should include the following Optimizely sources for the new Visual Editor:
script-src 'self' https://*.optimizely.com;
connect-src https://*.optimizely.com wss://*.optimizely.com;
img-src https://cdn.optimizely.com;
style-src 'unsafe-inline' https://*.optimizely.com;
font-src 'self' https://*.optimizely.com;If you are missing any of these (most commonly font-src 'self' https://*.optimizely.com;), update your site's CSP header to include the missing sources in the directives, then try loading the new Visual Editor again.
You must also add *.optimizely.com and app.optimizely.com to your allowlist in your style-src directive. This lets the editor load the necessary CSS styles to display code (HTML, CSS, JavaScript). If this stylesheet fails to load, the editor does not display any code.
Features that require an explicit allowlist
Some features are not available in Optimizely Experimentation unless you include 'unsafe-eval' in the script-src directive of your policy. These features include audiences with custom JavaScript conditions.
To enable these features, add the following directive to your CSP header:
script-src 'unsafe-eval'Because of the way Optimizely Experimentation embeds custom code (for example, custom variation code, experiment JavaScript, and project JavaScript) into the client, the entire client fails to parse if the custom code is syntactically incorrect. The Optimizely Experimentation snippet then fails to run as a result of this error.
The UI does not check experiment custom code or conditional activation code for syntax.
Use the Esprima parser to check the syntax of your custom code.
Example of a complete CSP policy
After you go through the previous steps, the set of directives in your Content Security Policies may look something like the following:
default-src 'none';
frame-src https://a[your-account-id-here].cdn.optimizely.com https://a[your-account-id-here].cdn-pci.optimizely.com;
script-src 'self' https://*.optimizely.com https://optimizely.s3.amazonaws.com https://cdn-assets-prod.s3.amazonaws.com 'nonce-[your-nonce-value]' 'strict-dynamic' 'unsafe-eval';
connect-src https://logx.optimizely.com https://*.optimizely.com wss://*.optimizely.com;
img-src https://cdn.optimizely.com;
style-src https://*.optimizely.com 'unsafe-inline';
font-src 'self' https://*.optimizely.com;Your rules might look different if you use third-party tools in addition to Optimizely Experimentation. Test them thoroughly before going live with these restrictions.
Some browsers support a directive require-trusted-types-for 'script' that limits scripts from generating and updating the HTML on a site. Because Optimizely Experimentation cannot apply experiment changes without this ability, do not include this directive in your policy.
You can soft-launch your changes in report-only mode so that the restrictions do not affect your visitors, but violations are collected (for example, through report-uri.io) so you can adapt and fine-tune your CSP.
Troubleshoot
If you are still blocked, you may need to add Optimizely's domains to your allowlist. See Blocked by a firewall, ad blocker, or content filter for information.