What option should I change in Webflow to resolve the Content Security Policy error when trying to render a page in an iframe on another site?

Published on
September 22, 2023

To resolve the Content Security Policy (CSP) error when trying to render a page in an iframe on another site in Webflow, you can make use of the frame-ancestors directive. The frame-ancestors directive is part of the CSP standard and allows you to specify which websites are allowed to embed your page in an iframe.

To change this option in Webflow, follow these steps:

  1. Log in to your Webflow account.
  2. Open the project where you want to make the changes.
  3. In the Designer, click on the "Project Settings" tab located at the top-left corner of the page.
  4. Select the "Hosting" option from the drop-down menu.
  5. Scroll down and find the "Security" section.
  6. In the "Content Security Policy (CSP)" field, you can add or modify the frame-ancestors directive to allow your page to be embedded in iframes on specific sites.

Here's an example of how to modify the frame-ancestors directive:

frame-ancestors 'self' example.com;

In the above example, only the website 'example.com' is allowed to embed your page in an iframe.

Remember to save your changes once you've added or modified the frame-ancestors directive.

By customizing the Content Security Policy settings in Webflow, you can control which websites are allowed to embed your pages in iframes, helping you prevent potential security vulnerabilities by restricting unauthorized embedding.

Additional questions:

  1. How can I modify the Content Security Policy in Webflow?
  2. What are some other common Content Security Policy errors and how can I resolve them in Webflow?
  3. Can I set different Content Security Policy rules for different pages in Webflow?