Optimize security requirements

Using Optimize with websites that have a Content Security Policy (CSP).

If your website uses a Content Security Policy (CSP) in HTTP headers or a <META> tag you must include the Google Optimize and Google Analytics domains in order to use Google Optimize.

Instead of blindly trusting everything that a server delivers, CSP defines the Content-Security-Policy HTTP header that allows you to create a whitelist of sources of trusted content, and instructs the browser to only execute or render resources from those sources.

- Google Developers

Troubleshoot Content Security Policy (CSP) errors

You need to modify your CSP to use Optimize if:

a) You see an error like this in your browser:

This page uses security features that are incompatible with the Optimize editor.

b) You see an error like this in Google Developer Tools:

Refused to execute optimize.google.com because it violates the following Content Security Policy directive...

Modify your CSP

In order to run, preview, and be included in Optimize experiences (tests and personalizations), your Content Security Policy (CSP) must include the following directives:


script-src https://www.google-analytics.com 'unsafe-inline';
style-src 'unsafe-inline'; 
img-src https://www.google-analytics.com

 

To use the Optimize visual editor, your CSP must include the following directives:


script-src https://optimize.google.com 'unsafe-inline';
style-src https://optimize.google.com https://fonts.googleapis.com 'unsafe-inline';
img-src https://optimize.google.com;
font-src https://fonts.gstatic.com;
frame-src https://optimize.google.com

 

If your website already has a CSP, add the above to your existing directives.

Optimize and page framing restrictions

If you see an error message like this:

This page uses security features that are incompatible with Optimize mobile editing.

Here's what could be happening:

The desktop view of the Optimize editor doesn't have any restrictions related to frame security directives or page techniques that disallow framing (a.k.a. frame busting), however if you wish to use the "mobile" view options of the Optimize visual editor, your page must allow being framed by your own site.

If your site uses the X-Frame-Options response header directive with value deny then you will not be able to use mobile editing.

A workaround acceptable for many websites (e.g. sites without user-generated content and domains that aren't shared with untrusted pages) is to relax the constraint to X-Frame-Options: sameorigin.

X-Frame-Options: sameorigin allows your pages to be framed by your website, but it doesn't allow your pages to be framed by other websites.

Learn more about X-Frame-Options at MDW web docs.

Alternatively, you can make changes for mobile users in the Optimize visual editor (on desktop) by using media queries in your style changes and in the CSS code dialog, then preview the mobile functionality in preview mode.

Troubleshoot framing errors

Use Google Developer Tools to check the current Content Security Policy of your website. If you find errors like the following in the console, you need to modify your CSP to use Optimize.

Refused to display in a frame because it set 'X-Frame-Options' to 'deny'.
Was this helpful?
How can we improve it?