iframe - 内容安全策略指令: "frame-ancestors ' self'

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} />

这在控制台中引发错误

Refused to display 'https://twitter.com/.... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

谁能告诉我如何进行这项工作？

Answer 1

由于设置了内容安全策略，因此禁止在IFRAME中显示内容。托管twitter.com的Web服务器配置为将HTTP header 添加到响应对象。具体来说，他们正在将Content-Security-Policy标签设置为框架祖先的“自我”。您无法使用IFRAME将他们的页面嵌入到自己的页面中。您可以使用其他技术来解决此问题，但是没有任何一种技术比iframe代码更简单。

W3C Content Security Policy Level 3 - Frame Ancestors