node.js 尝试呈现 iframe：祖先违反以下内容安全策略指令：“frame-ancestors 'none'”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38535491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to render iframe: ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'"
提问by fresh5447
I would like to render an iframe with the source being Github like so:
我想渲染一个源代码为 Github 的 iframe，如下所示：
<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'".
这是我在控制台中得到的错误：
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 Policyin my Nodeserver, to specify that it should accept any iframes from github
我正在研究如何Content Security Policy在我的Node服务器中指定我的，以指定它应该接受来自github
So I installed csp-helmetand added this to my server code:
所以我安装了csp-helmet并将其添加到我的服务器代码中：
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 docsand the HTML5 rocks guide
我一直在尝试查看官方文档和HTML5 岩石指南
Not sure if I am super close or taking the completely wrong approach.
不确定我是非常接近还是采取了完全错误的方法。
Update
更新
I have also tried to set the CSP via metatag.
我还尝试通过meta标签设置 CSP 。
<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.
回答by Scott Helme
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.
正如 oreoshake 指出的，这里的问题不是你的 CSP，而是 GitHub 上的 CSP。是 GitHub 阻止您构建它们，因此您无法使用 CSP 来解决此问题。
回答by oreoshake
The frame-ancestorsvalue acts on the sourceof the iframe not the document framing it. Setting CSP on your page will have no effect on the framing. Think of frame-ancestorslike X-Frame-Optionson 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值作用于iframe的来源，而不是构成它的文档。在您的页面上设置 CSP 不会对框架产生影响。想想frame-ancestors就像X-Frame-Options类固醇：这样会限制允许帧中的内容。Gist 故意不允许直接构建 Gist，而是提供了一种嵌入 Gist 的方法。
frame-ancestors 'none'== X-Frame-Options: DENY
frame-ancestors 'none'== X-Frame-Options: DENY
