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>

拒绝从'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 1

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

CSP插件的相关部分是：

object-src 'self' blob: filesystem:

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

忽略不安全的CSP值＆＃34;数据：＆＃34;在指令＆＃39; object-src＆＃39;。

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

Answer 2

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

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

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

2 个答案: