frame-ancestorsdirective allows you to specify which parent URLs can frame the current resource.
The most common way to use the
frame-ancestors directive is to block
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.
Allowing the Same Origin
Now suppose you want to allow a page to be framed, but only from the same site (same origin). In this case you can use:
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 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
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.
frame-ancestors directive was added to CSP Level 2. This means that support has existed since 2015 in Chrome and Firefox, Safari 10+ or Edge 15+.
It is not supported at all in Internet Explorer, you need to use the Edge browser instead.