In certain cases, you may want to IFRAME-embed your Webflow-hosted site inside of another site.
In general, you can IFRAME-embed your Webflow site in another website, once it’s on a paid plan and published to a custom domain name. However;
- You cannot IFRAME embed content from the *.webflow.io staging domain to another domain.
- You cannot IFRAME embed ECommerce sites.
- You cannot IFRAME embed Memberships sites.
All of this is governed by Webflow's servers by specifying the Content Security Policy (CSP) in each of these cases.
How CSPs Work
Modern browsers determine whether certain actions like IFRAME-embedding are safe and appropriate by checking the Content Security Policy (CSP) that is presented by the hosting server.
CSP stands for Content Security Policy. It's a security feature that helps prevent a variety of attacks, including Cross-Site Scripting (XSS) and data injection attacks. CSP works by specifying rules for the types of content that are allowed to be loaded and executed on a webpage.
These rules are defined by the server and sent to the client in the HTTP response headers. The client's web browser then enforces these rules.
Here's an example of what that header looks like;
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com
Webflow's CSPs
When your site is Webflow-hosted, Webflow controls this and changes it depending on your site's situation.
So far I've seen these variations;
- + General sites which are hosted on a custom domain ( paid plan ) are given a CSP that allows them to be IFRAME-embedded on another domain.
- - Staged webflow.io sites are blocked from IFRAME-embedding, likely to prevent abuse.
- - ECommerce sites are blocked, likely to prevent security risks like script injection password or CC capture.
- - Memberships sites are blocked, likely to prevent security risks like password capture.
When the site is in a "protected" state, Webflow issues a CSP header that restricts where the site can be hosted, like this;
content-security-policy: frame-ancestors 'self' https://*.webflow.com http://*.webflow.com http://*.webflow.io http://webflow.com https://webflow.com
When the site is "unprotected", that header does not exist.
Notes
https://discourse.webflow.com/t/can-i-have-a-webflow-page-in-a-generated-iframe/215443/6
