Trying to render iframe: ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'"

Question

I would like to render an iframe with the source being Github like so:

<iframe src="https://gist.github.com/user45445/9bf8d568e3350146ba302d7d67ad576f"> </iframe>

This is the error I get in the console: Refused to display 'https://gist.github.com/fresh5447/9bf8d568e3350146ba302d7d67ad576f' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

I was researching how to specify my Content Security Policy in my Node server, to specify that it should accept any iframes from github

So I installed csp-helmet and added this to my server code:

var csp = require('helmet-csp')

app.use(csp({
  // Specify directives as normal.
  directives: {
    frameAncestors: ['*.github.com'],  //I thought these two did the same, so I tried them both.
    childSrc: ['*.github.com']
  },

  // Set to true if you only want browsers to report errors, not block them.
  // You may also set this to a function(req, res) in order to decide dynamically
  // whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
  reportOnly: false,

  // Set to true if you want to blindly set all headers: Content-Security-Policy,
  // X-WebKit-CSP, and X-Content-Security-Policy.
  setAllHeaders: false,

  // Set to true if you want to disable CSP on Android where it can be buggy.
  disableAndroid: false,

  // Set to false if you want to completely disable any user-agent sniffing.
  // This may make the headers less compatible but it will be much faster.
  // This defaults to `true`.
  browserSniff: true
}))

But still the same error..

I have been trying to look at the official docs and the HTML5 rocks guide

Not sure if I am super close or taking the completely wrong approach.

Update

I have also tried to set the CSP via meta tag.

  <meta http-equiv="Content-Security-Policy" content="child-src https://gist.github.com; frame-ancestors https://gist.github.com;">

than I received this error:

Content Security Policies delivered via a <meta> element may not contain the frame-ancestors directive.

Answer 1

I got the exact same error when using the wrong URL in my iframe's src field. I had copied the URL directly from the address bar instead of clicking on embed and copying it from there.

Answer 2

As oreoshake points out, the problem here is not your CSP, but the CSP on GitHub. It is GitHub that is preventing you from framing them so there is nothing you can do with your CSP to resolve this.

Answer 3

The frame-ancestors value acts on the source of the iframe not the document framing it. Setting CSP on your page will have no effect on the framing. Think of frame-ancestors like X-Frame-Options on steroids: it restricts what is allowed to frame the content. Gist intentionally does not allow directly framing gists but instead provides a way to embed a Gist.

frame-ancestors 'none' == X-Frame-Options: DENY