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 myContent Security Policyin myNodeserver, to specify that it should accept any iframes fromgithub

So I installedcsp-helmetand added this to my server code:

varcsp=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 theofficial docsand theHTML5 rocks guide

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

Update

I have also tried to set the CSP viametatag.

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

than I received this error:

ContentSecurityPoliciesdelivered via a<meta>element may not contain the frame-ancestors directive.

Thanks in advance.