base64 数据 uri 的内容安全策略语法

Question

我正在尝试以编程方式更改扩展 devtools 的 chrome 扩展中的 pdf 预览页面。

显现

  "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>

但是，当我对embed或objecthtml 元素尝试相同时，我得到：

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

拒绝从 'data:application/pdf;base64,{{data}}' 加载插件数据，因为它违反了以下内容安全策略指令：“object-src 'self'”。

为什么？重置srciframe 上的属性是将焦点放在嵌套的内容窗口上，因此当用户在父窗口中输入时突然textarea变得模糊（这真的很烦人）。我认为使用embedorobject元素可以缓解嵌套文档问题。

为了使嵌入正常工作，正确的 csp 语法是什么？我正在直接查看w3文档，它并没有真正的帮助。例如，我在清单中尝试了以下语法：

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

...当您尝试刷新chrome://extensions.

Answer 1

它适用的原因<iframe>是扩展的默认内容安全策略不会阻止任何帧。它只限制脚本和插件。

插件 CSP 的相关部分是：

object-src 'self' blob: filesystem:

在普通网页上，您会使用 "content_security_policy": "object-src 'self' blob: filesystem: data:"允许嵌入数据：-URL。这在 extensions 中是不允许的，所以你不能data:在插件中加载-URLs。如果您尝试添加这个“data:”指令，那么它将被忽略。当开发者模式和“收集错误”在 处启用时chrome://extensions，错误日志（不是JS 控制台）将显示：

忽略了指令“object-src”中不安全的 CSP 值“data:”。

要通过<embed>或加载扩展中的 PDF <object>，请尝试列入白名单的方案之一：

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);