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 或 object html 元素尝试相同操作时，我得到：

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

Refused to load plugin data from 'data:application/pdf;base64,{{data}}' because it violates the following Content Security Policy directive: "object-src 'self'".

为什么？重置 iframe 上的 src 属性会将焦点放在嵌套内容 window 上，因此当用户输入父级 window 时，textarea 突然变得模糊（这真的恼人的）。我认为使用 embed 或 object 元素可以缓解嵌套文档问题。

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

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

...当您尝试在 chrome://extensions.

中刷新扩展时会抛出错误

Answer 1

According to the CSP spec, 您需要将方案指定为 scheme:（带冒号），而不仅仅是 scheme。因此，您需要将指令更改为：

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

Answer 2

它适用于 <iframe> 的原因是扩展程序的默认值 Content security policy 不会阻止任何帧。它只限制脚本和插件。

插件 CSP 的相关部分是：

object-src 'self' blob: filesystem:

在普通网页上，您可以使用 ~~"content_security_policy": "object-src 'self' blob: filesystem: data:"~~ 来允许嵌入数据：-URL。这是 not allowed in extensions，因此您不能在插件中加载 data:-URL。如果您尝试添加此 "data:" 指令，那么它将被忽略。当在chrome://extensions启用开发者模式和"Collect errors"时，错误日志（不是JS控制台）将显示：

Ignored insecure CSP value "data:" in directive 'object-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);

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

Content security policy syntax for base64 data uris

javascript

iframe

google-chrome-extension

content-security-policy