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

问题描述

我想使用ith渲染源为Github的iframe：

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

这是我在控制台中遇到的错误：
已拒绝因为祖先违反了以下内容安全策略指令，所以在框架中显示 https://gist.github.com/fresh5447/9bf8d568e3350146ba302d7d67ad576f：frame-ancestors'none'。

我正在研究如何在我的 Node 内容安全策略 >服务器，以指定它应该接受来自 github

的所有iframe，因此我安装了并将其添加到我的服务器代码中：

  var csp = require（'helmet-csp'）
 
 app.use（csp（{
 //指定正常的指令。
指令：{
 frameAncestors：['*。github.com']，//我认为这两个功能相同，所以我都尝试了。
 childSrc：['* .github.com' ] 
}，
 
 //如果只希望浏览器报告错误，则设置为true s，而不是阻止它们。 
 //您也可以将其设置为一个函数（req，res），以便动态决定
 //是否使用reportOnly模式，例如，允许动态终止开关。 
 reportOnly：false，
 
 //如果要盲目设置所有标头，则设置为true：Content-Security-Policy，
 // X-WebKit-CSP和X -内容安全政策。 
 setAllHeaders：false，
 
 //如果要在可能会出错的Android上禁用CSP，则设置为true。 
 disableAndroid：false，
 
 //如果要完全禁用任何用户代理嗅探，请将其设置为false。 
 //这可能会使标头不那么兼容，但速度会更快。 
 //默认为true。 
 browserSniff：true 
}））
  

但仍然是相同的错误。

我一直在尝试查看和

不确定我是超级亲密还是采取完全错误的方法。

更新

我还尝试通过 meta 标签设置CSP。

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

比我收到此错误：

<$ p通过< meta>发送的$ p> 内容安全策略；元素可能不包含frame-ancestors指令。


解决方案

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

I would like to render an iframe with the source being Github like so:

<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'".

I was researching how to specify my Content Security Policy in my Node server, to specify that it should accept any iframes from github

So I installed csp-helmet and added this to my server code:

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 docs and the HTML5 rocks guide

Not sure if I am super close or taking the completely wrong approach.

Update

I have also tried to set the CSP via meta tag.

  <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.

解决方案

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.

这篇关于尝试渲染iframe：祖先违反了以下内容安全政策指令：“ frame-ancestors'none'”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！