尝试渲染 iframe：祖先违反了以下内容安全策略指令：“frame-ancestors 'none'”答案

【问题标题】：Trying to render iframe: ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'"尝试渲染 iframe：祖先违反了以下内容安全策略指令：“frame-ancestors 'none'”
【发布时间】：2016-11-26 21:23:32
【问题描述】：

我想渲染一个源代码为 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'".

我正在研究如何在我的Node 服务器中指定我的Content Security Policy，以指定它应该接受来自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.

【问题讨论】：

标签： node.js iframe heroku content-security-policy

【解决方案1】：

正如 oreoshake 指出的，这里的问题不是你的 CSP，而是 GitHub 上的 CSP。是 GitHub 阻止您构建它们，因此您无法使用 CSP 解决此问题。

【讨论】：

所以对我的 CSP 所做的更新会影响其他网站希望如何使用我的应用并与之互动？
是的，您可以控制允许其他网站从您那里获取的方式。这就是 GitHub 对你所做的。

【解决方案2】：

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

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

【讨论】：