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

【问题标题】：Content security policy syntax for base64 data urisbase64 数据 uri 的内容安全策略语法
【发布时间】：2016-02-17 15:57:47
【问题描述】：

我正在尝试以编程方式更改扩展 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>

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

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

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

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

...当您尝试刷新 chrome://extensions 中的扩展时会引发错误。

【问题讨论】：

这answer 有帮助吗？

标签： javascript iframe google-chrome-extension content-security-policy

【解决方案1】：

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

插件的 CSP 的相关部分是：

object-src 'self' blob: filesystem:

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

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

要通过 <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);

【讨论】：

【解决方案2】：

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

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

【讨论】：