Setting the "Content-Security-Policy" HTTP header

The Visual Editor loads the frontend web pages via an iframe . In some circumstances, the Visual Editor can't load your page correctly and you get this error in the browser console:

Refused to frame 'https://yourdomain.test/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

This can occur because your web HTTP server or server-side framework is setting the Content-Security-Policy HTTP header to allow your pages to be loaded via iframe only from HTML pages served by the same domain.

To allow the Visual Editor to load your pages correctly, you have to set the HTTP Header accordingly, allowing the frame-ancestors as https://app.storyblok.com (the domain used by the Storyblok application).

In order to do that, you have to set the HTTP Header in your web server configuration:

Content-Security-Policy: frame-ancestors https://app.storyblok.com