内容安全政策指令：“帧祖先‘自我’

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/ ....在一个框架，因为祖先违反了以下内容安全政策指令：‘帧的祖先。自我'’

可以在任何请告诉我如何做这项工作？

Answer 1

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

W3C Content Security Policy Level 3 - Frame Ancestors