Content Security Policy (CSP)
Quick Reference Guide

frame-ancestors with CSP

The frame-ancestors directive allows you to specify which parent URLs can frame the current resource.

An Example frame-ancestors Policy

The most common way to use the frame-ancestors directive is to block

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.

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'

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

Specifying a URI

Now suppose we want to allow and to frame our page, we can specify it like this:


What 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 it is blocked?

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 Browser Support

The 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.