内容安全策略指令：“frame-ancestors 'self'答案

【问题标题】：Content Security Policy directive: "frame-ancestors 'self'内容安全策略指令：“frame-ancestors 'self'
【发布时间】：2016-06-13 21:15:14
【问题描述】：

我在我的网页中嵌入了一个 iFrame，如下所示：

var iframeProps = {
        'data-type': self.props.type,
        allowTransparency: self.props.allowTransparency,
        className: self.props.className,
        frameBorder: self.props.frameBorder,
        height: self.props.height,
        key: url,
        onLoad: self.props.onLoad.bind(self),
        scrolling: self.props.scrolling,
        src: self.state.isActive ? url : '',
        style: self.props.styles,
        width: self.props.width
    };
<iframe {...iframeProps} />

这会在控制台中引发错误

拒绝在框架中显示 'https://twitter.com/....，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self'”。

谁能告诉我如何才能完成这项工作？

【问题讨论】：

如果网站不允许使用带有 frame-ancestors 或 X-Frame-Options 的框架，您根本无法 iframe。根据来源和您需要的内容，可能有可用的 API 或 SDK。所以说真的，你不能让你正在做的事情发挥作用，但你可以通过利用他们认可的界面系统来以不同的方式处理它。

标签： iframe

【解决方案1】：

由于设置了内容安全策略，禁止在 IFRAME 中显示该内容。托管 twitter.com 的网络服务器配置为向响应对象添加 HTTP 标头。具体来说，他们将 Content-Security-Policy 标记设置为 frame-ancestors 'self'。您无法使用 IFRAME 将他们的页面嵌入到您自己的页面中。您可以使用其他技术来解决这个问题，但没有一个比 iframe 标记更简单。

W3C Content Security Policy Level 3 - Frame Ancestors

【讨论】：

请问还有哪些其他技术？
有什么可以做的更新吗？例如，我想展示来自我的另一个网站的东西，而不是 twitter.com
这实际上并不能回答问题，而应该是评论。一个适当的答案会给出一个解决方案的例子。
@msysmilu — 如果您想让您的网站显示在框架中，请不要添加禁止它的 CSP！
@JGallardo 它确实回答了这个问题——除非 twitter.com 决定更改他们的 Content-Security-Policy 以允许您的域，否则这是不可能的。这些控制措施旨在帮助主机（在本例中为 twitter.com）保护其资产免受剥削和/或滥用。

【解决方案2】：

我最近也遇到了这个问题，我没有找到任何替代方法来解决这个问题。最后，我想出了一个想法，iframe中的属性，即“src”，可以用原始html填充内容和它的工作原理。

// this demo shows the process of getting the html content 
// from the link,and then apply it to the attribute "src" in the iframe
$.get(link, function (response){ 
var html = response;
var html_src = 'data:text/html;charset=utf-8,' + html;
$("#iframeId").attr("src" , html_src);
});

【讨论】：

这给出了错误：“请求的资源上不存在'Access-Control-Allow-Origin'标头”。浏览器正在阻止跨域请求。
这个答案恰好起作用，因为目标资源允许跨域访问。
任何解决跨域访问的方法？

【解决方案3】：

我遇到了这个问题，因为我在浏览器的私人窗口中打开了链接。

【讨论】：