frame-ancestors directive allows you to specify which parent URLs can frame the current resource. Using the
frame-ancestors CSP directive we can block or allow a page from being placed within a frame or iframe.
The most common way to use the
frame-ancestors directive is to block a page from being framed by other pages.
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:
And this would allow your iframe code:
frame-ancestors 'self' is similar to using
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
In addition to
frame-ancestors directive also applies to
No, you cannot use the
frame-ancestors directive from a Content-Security-Policy meta tag. It must be specified as part of a
frame-ancestors does not inherit from the
default-src directive, you need to explicitly specify it in your
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'".
frame-ancestors different from
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'
/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 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.
Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.