尝试渲染iframe：祖先违反了以下内容安全策略指令：＆＃34; frame-ancestors＆＃39; none＆＃39;＆＃34;

Question

我想渲染一个iframe，源代码是Github，如下所示：

<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

不确定我是否超级接近或采取完全错误的做法。

更新

我还尝试通过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

正如oreoshake所指出的，这里的问题不是你的CSP，而是GitHub上的CSP。 GitHub阻止你对它们进行框架处理，因此你无法用CSP解决这个问题。

Answer 2

frame-ancestors值会作用于iframe的源，而不是构成它的文档。在页面上设置CSP对框架没有影响。考虑frame-ancestors类似于X-Frame-Options类固醇：它限制了允许构建内容的内容。 Gist故意不允许直接构建要点，而是提供嵌入Gist的方法。

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