DOMException with Content-Security-Policy header in Optimizely Web

Question

In a project we use Optimizely Web Experiments integration for A/B testing. Optimizely Web comes with a quite nice Web Editor that allows you to modify the variants of your A/B test directly in the browser.

Now, some time ago we decided for security reasons to introduce besides others the X-Frame-Options HTTP response header to prevent our app to be loaded into an iFrame. Of course this also prevents the Optimizely Web Editor to load our page, so we cannot modify the variants anymore.

Because of this I started playing around with the Content-Security-Policy header and set these values:

default-src * 'unsafe-inline' 'unsafe-eval' data:; frame-ancestors 'self' app.optimizely.com www.optimizelyedit.com;

I know this is not super secure, but I just want to make the Optimizely Web editor load my page.

When I now load my page into the Web Editor I don't get any warnings mentioning a violation of the content security policy. Instead of this, I get a DOMException.

The webapp is using React.js and Express. Static assets are delivered via a different domain. The DOMException only happens in the Optimizely Web editor and seems to be thrown in the app.js, that is delivered from that second domain.

Uncaught DOMException: Blocked a frame with origin "https://www.host-a.de" from accessing a cross-origin frame.

The Content-Security-Policy header for app.js is exactly the same as for the initial HTML page that refers to that JavaScript file.

I don't really understand, why I get this DOMException only in the Opimizely Web editor and not, when I load the page without it and I also don't know, how to prevent it. Do you have an idea?

Answer 1

It turned out the DOMException is not caused by the Content-Security-Policy header. Even after turning the security headers off I get the error.