40

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.

Sarthak Raval
  • 1,001
  • 1
  • 10
  • 23
Nishant Baranwal
  • 1,048
  • 1
  • 10
  • 18

1 Answers1

51

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 https://example.com has a response header of Content-Security-Policy: frame-src 'self', it can only load https://example.com 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 https://example.com has a response header of Content-Security-Policy: frame-ancestors 'self', it can only be loaded inside iframes from https://example.com.

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.

emroussel
  • 1,077
  • 11
  • 19
  • 3
    What happens when policy of the main page and child page conflicts? – yan Jul 09 '19 at 10:50
  • 4
    The most restrictive policy would take precedence. So if a parent has a `frame-src` of `'none'` and tries to load an iframe that doesn't have a Content Security Policy, browsers that support this directive won't allow the iframe to load. Similarly, if a parent allows any domains to be loaded in iframes, but it tries to load a website that has a `frame-ancestors` of `'none'` in an iframe, browsers would prevent it from being embedded in the iframe. – emroussel Jul 11 '19 at 01:06
  • 2
    It's worth being clear that default-src only defaults the values of fetch directives. This is mentioned in the quoted text in the answer above but isn't clear imho. Consult the latest CSP spec for a full list of fetch directives, at time of writing they are: child-src, connect-src, default-src, font-src, frame-src, img-src, manifest-src, media-src, prefetch-src, object-src, script-src, script-src-elem, script-src-attr, style-src, style-src-elem, style-src-attr, worker-src – GreatSeaSpider Nov 12 '19 at 09:07
  • 1
    @GreatSeaSpider thanks for the clarification, I just updated my answer to reflect this. – emroussel Nov 12 '19 at 16:33