Implementation overview

How to Use secure frame headers on Webflow

Secure frame headers — primarily X-Frame-Options and the frame-ancestors directive in Content-Security-Policy — control whether your site can be embedded in an iframe on another domain. They prevent clickjacking attacks, where an attacker loads your site in a hidden iframe over their malicious page and tricks users into clicking elements they can't see.

The two relevant headers: X-Frame-Options: DENY prevents your page from being loaded in any iframe on any domain. X-Frame-Options: SAMEORIGIN allows iframing only from the same domain. Content-Security-Policy: frame-ancestors is the modern alternative — more flexible, allowing you to specify exactly which domains can embed your content: frame-ancestors 'self' https://trusted-domain.com. CSP frame-ancestors takes precedence over X-Frame-Options in browsers that support it.

What Webflow provides by default: Webflow's hosting sends X-Frame-Options: SAMEORIGIN for all hosted sites. Your pages can be embedded within the same domain but not by external domains. Verify this by checking securityheaders.com for your domain.

When you'd need to change this: if you intentionally want your page embedded in an external site's iframe — for a widget, embedded calculator, or cross-domain preview — the default header will block it. You'd need to add a Content-Security-Policy header via Webflow's custom code head section that explicitly allows the embedding domain. For most content websites, the default SAMEORIGIN setting is correct and you don't need to change anything.

What to watch for: if you're using Cloudflare or another proxy in front of Webflow, check whether it's adding or overriding frame headers. Conflicting headers from multiple sources can break legitimate iframing use cases or leave unexpected gaps. When in doubt, the header visible in a live browser request (via DevTools → Network → Headers) is what matters — not what you think you've configured.

Monthly check: run securityheaders.com on your site. Look at X-Frame-Options and Content-Security-Policy. SAMEORIGIN on X-Frame-Options is baseline protection. Flag anything missing or set to ALLOWALL, which would leave you fully exposed to clickjacking.

How to do it on Webflow?

In the advanced publishing option, toggle the “Use secure frame headers.” 

Tools
Don't have the Checklist yet?