解決 iframe Content Security Policy directive 錯誤

 最近項目上要加一個視頻播放功能, 添加完之后點擊報錯如下

Refused to display 'https://api.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

查找了一番, 解決方法如下

#Nginx 錯誤頁面無法顯示add_header設置的響應頭,在nginx 1.7.5以后的版本，新增了always參數，在設置請求頭后增加該參數即可
#DENY：瀏覽器拒絕當前頁面加載任何Frame頁面
#SAMEORIGIN：frame頁面的地址只能為同源域名下的頁面
#ALLOW-FROM：允許frame加載的頁面地址
add_header X-Frame-Options SAMEORIGIN always;
add_header X-Content-Type-Options nosniff always;
#frame-ancestors：允許frame加載的頁面地址
add_header Content-Security-Policy 'frame-ancestors https://api.baidu.com/' always;

主要起作用的最后一句, 添加上需要的域名,

重啟nginx,又報錯如下

Refused to frame 'https://www.baidu.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.baidu.com/".

 

參考如下鏈接 https://stackoverflow.com/questions/42781949/refused-to-display-in-a-frame-because-an-ancestor-violates-the-following-content

 

 

 

於是修改如下 

add_header Content-Security-Policy 'frame-ancestors https://*.baidu.com/' always;

 

重啟nginx , 完美解決