コンテンツセキュリティポリシーディレクティブ：「フレーム-先祖の自己」

Question

私は自分のWebページで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をホストするWebサーバーは、HTTPヘッダーを応答オブジェクトに追加するように構成されています。具体的には、Content-Security-Policyタグをフレーム先祖の「自己」に設定しています。 IFRAMEを使用して自分のページに自分のページを埋め込むことはできません。あなたはそれを回避するために使用することができる他のテクニックがありますが、どれもiframeタグほどシンプルではありません。

W3C Content Security Policy Level 3 - Frame Ancestors