內容安全政策指令：「幀祖先‘自我’

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