CSP frame-ancestors

An Example frame-ancestors Policy

The most common way to use the frame-ancestors directive is to block a page from being framed by other pages.

frame-ancestors 'none'

Using frame-ancestors 'none' is similar to using X-Frame-Options: deny. Specifically this means that the given URI cannot be framed inside a frame or iframe tag.

Example: CSP the Same Origin iframe

Now suppose you want to allow a page to be framed, for example within an iframe, but only from the same site (same origin). In this case you can use:

frame-ancestors 'self'

And this would allow your iframe code:

<iframe src="/same/site/url.html">

Using frame-ancestors 'self' is similar to using X-Frame-Options: sameorigin

Specifying a URI

Now suppose we want to allow https://a.example.com and https://b.example.com to frame our page, we can specify it with frame-ancestors like this:

frame-ancestors https://a.example.com https://b.example.com

What HTML elements does frame-ancestors apply to?

In addition to frame and iframe the frame-ancestors directive also applies to applet, embed and objecttags.

Can frame-ancestors be used in a meta tag?

No, you cannot use the frame-ancestors directive from a Content-Security-Policy meta tag. It must be specified as part of a Content-Security-Policy header.

Is frame-ancestors covered by the default-src directive?

No, the frame-ancestors does not inherit from the default-src directive, you need to explicitly specify it in your Content-Security-Policy header.

What happens when frame-ancestors blocks something?

You might see an error message in the developer tools console such when you try to load a page in a frame, or iframe that is not allowed by the frame-ancestors policy, such as:

[Error] Refused to load <url> because it does not appear in the frame-ancestors directive of the content security policy.

Or you may see an error like this when a frame ancestor url is not on the same origin (self), which would violate a frame-ancestors 'self' content security policy directive:

Refused to load because an ancestor violates the following content security policy directive: "frame-ancestors 'self'".

How is frame-ancestors different from frame-src?

The CSP frame-src directive restricts where frames can be loaded from on the page protected by the CSP policy. So for example if we had a policy for the URI /apples defined as this:

frame-src 'none';frame-ancestors 'self'

And now a policy for the URI /oranges defined as:

frame-src 'self';frame-ancestors 'none'

The page /apples can be framed by /oranges, for example with an iframe tag. But the page /apples cannot frame the page /oranges for two reasons. The policy for /apples does not allow it to frame any subresources: frame-src 'none', and the policy for /oranges does not allow it to be framed by any other pages: frame-ancestors 'none'.

frame-ancestors Browser Support

The frame-ancestors directive was added to CSP Level 2. This means that browser support for frame-ancestors existed since 2015 in Chrome and Firefox, Safari 10+ or Edge 15+.

The frame-ancestors CSP directive is not supported at all in Internet Explorer, you need to use the Edge browser instead.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy