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

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标记设置为frame-ancestors'self'.你无法使用IFRAME将他们的页面嵌入到你自己的页面中.您可以使用其他技术来解决这个问题,但没有一种技术可以像iframe标记一样简单.

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