node.js - 尝试渲染 iframe : ancestor violates the following Content Security Policy directive: "frame-ancestors ' none'"

Question

我想渲染一个源代码为 Github 的 iframe，如下所示:

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

这是我在控制台中遇到的错误: 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'".

我正在研究如何指定我的 Content Security Policy在我的Node服务器，指定它应该接受来自 github 的任何 iframe

所以我安装了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
}))

但还是同样的错误..

我一直在尝试查看 official docs和 HTML5 rocks guide

不确定我是 super 接近还是采取了完全错误的方法。

更新

我也尝试通过 meta 设置 CSP标记。

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

比我收到这个错误:

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

Answer 1

frame-ancestors 值作用于 iframe 的 source 而不是构成它的文档。在您的页面上设置 CSP 不会影响框架。将 frame-ancestors 想象成类固醇上的 X-Frame-Options:它限制了允许对内容进行框架化的内容。 Gist 故意不允许直接构建 Gist，而是提供了一种嵌入 Gist 的方法。

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