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的Web服务器配置为将HTTP标头添加到响应对象。具体来说，他们将Content-Security-Policy标记设置为frame-ancestors'self'。你无法使用IFRAME将他们的页面嵌入到你自己的页面中。您可以使用其他技术解决这个问题，但没有一种技术可以像iframe标记一样简单。

W3C Content Security Policy Level 3 - Frame Ancestors

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

内容安全政策指令：“框架 - 祖先'自我'

2 个答案: