What do frame-src and frame-ancestors do exactly? The definition shows the purpose is the same to define valid contents for frames for both directives. When to use which one? I was able to load an external domain content in iframe using -

1. frame-ancestors and default-src rules
2. frame-src

Both are working but couldn't get correct use cases.

1 Answer

default-src, frame-ancestors, and frame-src are all part of the Content-Security-Policy response header.

frame-src

Restricts what domains and page can load in an iframe.

The HTTP Content-Security-Policy (CSP) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.

For example: If the website at has a response header of Content-Security-Policy: frame-src 'self', it can only load inside iframes.

frame-ancestors

Restricts what domains and page can be loaded in from an iframe (similar to the X-Frame-Options header, but takes precedence over it).

The HTTP Content-Security-Policy (CSP) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.

For example: If the website at has a response header of Content-Security-Policy: frame-ancestors 'self', it can only be loaded inside iframes from .

default-src

Acts as the default value for any fetch directive that isn't explicitly set (here is a list of all fetch directives)

The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directives. For each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it.

For example: Content-Security-Policy: default-src 'self' will default to the value 'self' for all fetch directives. Other directives will be unaffected.

Note: since frame-ancestors is not a fetch directive, setting default-src won't restrict it. It needs to be set separately.