尝试渲染iframe:祖先违反了以下内容安全策略指令:"frame-ancestors'none'"

fre*_*447 13 iframe heroku node.js content-security-policy

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

<iframe src="https://gist.github.com/user45445/9bf8d568e3350146ba302d7d67ad576f"> </iframe>
Run Code Online (Sandbox Code Playgroud)

这是我在控制台中遇到的错误: 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服务器中指定我,以指定它应该接受任何iframegithub

所以我安装了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
}))
Run Code Online (Sandbox Code Playgroud)

但仍然是同样的错误..

我一直试图查看官方文档HTML5岩石指南

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

更新

我还试图通过meta标签设置CSP .

  <meta http-equiv="Content-Security-Policy" content="child-src https://gist.github.com; frame-ancestors https://gist.github.com;">
Run Code Online (Sandbox Code Playgroud)

比我收到这个错误:

Content Security Policies delivered via a <meta> element may not contain the frame-ancestors directive.
Run Code Online (Sandbox Code Playgroud)

Sco*_*lme 9

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


ore*_*ake 6

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

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

在此输入图像描述