内容安全策略指令：“框架祖先‘自我’

Question

我正在我的网页中嵌入一个 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'”。

有人可以告诉我如何才能完成这项工作吗？

Answer 1

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

W3C 内容安全策略级别 3 - 框架祖先

Answer 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);
});

Answer 3

您可以使用代表您获取请求页面的代理，然后您可以在您的域上托管代理，并使用新的代理 URL（而不是本问题中的“twitter.com”）从该代理服务器加载网页。

Answer 4

对于开发者，启用此扩展 https://chromewebstore.google.com/detail/always-disable-content-se/ffelghdomoehpceihalcnbmnodohkibj