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.
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:
b) You see an error like this in Google Developer Tools:
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:
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 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.