3

我試圖以編程方式改變擴展devtools Chrome擴展程序中的PDF預覽頁面。內容安全策略語法的URI

清單

"content_security_policy": "img-src 'self' data; script-src 'self'; object-src 'self'; data-uri 'self'" 

當我src屬性設置爲一個iframe我可以成功地加載的PDF並且將動態生成的。

<iframe src="data:application/pdf;base64,..."></iframe> 

然而,當我嘗試同樣爲embedobject html元素我得到:

<embed src="data:application/pdf;base64,..."> 
<object data="data:application/pdf;base64,..."></object> 

拒絕從「的數據加載插件數據:應用/ PDF; BASE64,{{數據}}',因爲它違反了以下內容安全策略指令:「object-src'self'」。

爲什麼?重置的iframe的src屬性給予重點嵌套內容的窗口,所以當用戶在父窗口中鍵入突然textarea是模糊的(這是真的很煩人)。我認爲,使用embedobject元素將減輕嵌套文檔的問題。

什麼是爲了得到嵌入功能正常工作正確的CSP語法?我直接看着w3文檔,這不是真的有幫助。舉例來說,我想在我的清單中的語法如下:

"content_security_policy": "object-src 'self' data" 

...當你嘗試刷新擴展在chrome://extensions這將拋出一個錯誤。

+1

這是否【答案】(http://stackoverflow.com/questions/20423733/content -security-policy-issue-with-chrome-extension)help? –

回答

3

它適用於是該擴展的默認Content security policy不會阻止任何幀的原因。它只限制腳本和插件。

的CSP對插件的相關部分是:

object-src 'self' blob: filesystem: 

在正常的網頁,你可以使用"content_security_policy": "object-src 'self' blob: filesystem: data:"允許數據:被嵌入-URLs。這是not allowed in extensions,所以你不能在插件加載data: -URLs。如果你試圖添加這個「data:」指令,那麼它將被忽略。當顯影劑模式和「收集錯誤」在chrome://extensions被啓用時,錯誤日誌(的JS控制檯)將顯示:

忽略不安全CSP值「數據:」在僞指令「對象-src」中。

要通過<embed><object>加載擴展名的PDF,試試白名單方案之一:

var pdfBlob = new Blob(['%PDF raw pdf data here...'], { 
    type:'application/pdf' 
}); 
var pdfUrl = URL.createObjectURL(pdfBlob); 

var embed = document.createElement('embed'); 
embed.src = pdfUrl; 
embed.type = 'application/pdf'; // Optional 
document.body.appendChild(embed); 
3

According to the CSP spec, 您需要指定方案爲scheme:(含冒號),而不僅僅是scheme。所以,你需要將指令更改爲:

"content_security_policy": "object-src 'self' data:" 
+0

對我而言,object-src上的'blob:'解決了我的問題。 –