Update your site's Content Security Policies (CSP)

  • Updated
  • Optimizely Feature Experimentation
  • Optimizely Full Stack (Legacy)
  • 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, this can block Optimizely Experimentation from running parts of the snippet on your pages or sending tracking information back to our servers.

For this reason, you may need to update your site to include Content Security Policy (CSP) header in order 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 is succeeded by Content Security Policies, which allows for greater customization, including the ability to allow-list 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 '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 don’t need cross-domain behavioral targeting, 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 which 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 more information about backwards compatibility in script-src.

  • The connect-src line enables the Optimizely Experimentation client to log events.
  • The img-src line allows the Optimizely Experimentation client to load images that have been 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 will allow your site and Optimizely Experimentation to load your pages in an iframe, while blocking attempts from all other parties.

Features that require explicit allowlisting

Some features are not available in Optimizely Experimentation unless 'unsafe-eval' is included in your policy's script-src directive. These features include audiences with custom JavaScript conditions.

To enable these features, add this 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, 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.
Experiment custom code and conditional activation code are not checked for syntax in the UI. Use the Esprima parser to check the syntax of your custom code.

Example of a complete CSP policy

After you go through the steps above, the set of directives in your Content Security Policies may look something like this:

Content-Security-Policy=
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;
connect-src https://*.optimizely.com;
img-src https://app.optimizely.com https://cdn.optimizely.com;
style-src 'unsafe-inline'

Because you may use third-party tools in addition to Optimizely Experimentation, your rules might look different. Make sure to test them thoroughly before going live with these restrictions.

Some browsers have support for a directive require-trusted-types-for 'script' that limits scripts to generate and update the HTML on a site. Optimizely Experimentation cannot apply changes for experiments without this ability, so make sure this directive is not included 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, via report-uri.io) so you can adapt and fine-tune your CSP.