Web 扩展 - Iframe 源执行脚本时出现内容安全策略错误

Question

我有一个 firefox 网络扩展，它使用内容脚本在单击按钮时将 HTML 注入网页。注入的 HTML 由嵌套在多个 div 中的 iFrame 组成。

这是内容脚本的相关部分：

var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");

var boxDiv = document.createElement("div");
boxDiv.style.cssText = "left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"

var zeroDiv = document.createElement("div");
zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";

var outerDiv = document.createElement("div");
outerDiv.id = outerDivID;

boxDiv.appendChild(iFrame);
zeroDiv.appendChild(boxDiv);
outerDiv.appendChild(zeroDiv);
document.body.appendChild(outerDiv);

如代码所示，iFrame 的来源是一个名为“inject.html”的文件。 inject.html 的两个重要特性是：

1) 一个脚本标记（在标头内），它引用同一目录中的 javascript 库的文件。

<script src="perfect-scrollbar.js"></script>

2) 一段使用“perfect-scrollbar.js”的内联javascript。另外，作为参考，这里是库本身：https://github.com/utatti/perfect-scrollbar

<script>
console.log("Hello World");

var perfectScrollbar = new PerfectScrollbar("#container");
</script>

当我直接从我的计算机打开文件时（即右键单击，使用 Chrome 打开），它工作正常。但是，当我在 Firefox 中使用我的扩展程序时，我收到以下错误：

内容安全策略：页面的设置阻止了自身资源的加载（“script-src”）。

来源： console.log("hello world");

va....

我阅读了documentation，似乎默认内容安全策略不允许内联javascript。

相关文档：

扩展的默认内容安全策略是：

"script-src 'self'; object-src 'self';"

这将应用于任何未使用content_security_policy manifest.json 密钥明确设置自己的内容安全策略的扩展程序。它具有以下后果：

您只能加载扩展程序本地的资源。

不允许扩展程序将字符串作为 JavaScript 进行评估。

不执行内联 JavaScript。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script

我会通过使用 import 语句来解决内联 javascript 的问题，但根据 Mozilla 的说法，Firefox 目前不支持这些：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

根据文档，可以通过创建脚本的 sha-256 哈希来允许一些内联 Javascript。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_security_policy

通过在“script-src”指令中提供脚本的哈希值，允许扩展程序执行内联脚本。

允许内联脚本：<script>alert('Hello, world.');</script>:

"content_security_policy": "script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='; object-src 'self'"

还有这个

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script

或者，您可以从内联脚本创建哈希。 CSP 支持 sha256、sha384 和 sha512。

Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='

生成哈希时，不要包含<script> 标签，并注意大小写和空格很重要，包括前导或尾随空格。

因此，我通过突出显示“inject.html”中的以下文本来创建脚本的 sha-256 哈希：

并使用 SHA-256 计算器（我选择 base-64 以与示例保持一致）：https://hash.online-convert.com/sha256-generator

并将我的“manifest.json”文件更改为：

{
    "manifest_version": 2,
    "name": "Summarizer",
    "version": "1.0",

    "description": "Summarizes webpages",

    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "downloads",
        "*://*.smmry.com/*"
    ],

    "icons":
    {
        "48": "icons/border-48.png"
    },

    "browser_action":
    {
        "browser_style": true,
        "default_popup": "popup/choose_length_page.html",
        "default_icon":
        {
            "16": "icons/summarizer-icon-16.png",
            "32": "icons/summarizer-icon-32.png"
        }
    },

    "web_accessible_resources": [
        "inject-content/inject.html"
    ],

    "content_security_policy": "script-src 'self' 'sha256-GdCLzZEX8DPwLRiIBZvv6ffymh4hz/9NgjmzyPv+lGM='; object-src 'self'"

}

然而，我的错误仍然存​​在！

因此，我的问题是，

如何让我的内联 Javascript 执行而不会出现此错误？有没有办法在没有哈希的情况下做到这一点？

理想情况下，我想完全避免使用内联 javascript，而是将我所有的内联 javascript 移动到我的内容脚本文件中。由于 Firefox 不支持 import 语句，我可以这样做吗？如果可以，怎么做？我没有使用 Babel 等工具的经验。

Answer 1

虽然网页上说您可以有尾随/前导空格，但我遇到了问题。解决方案结果是将我所有的代码放在一行上（并重新计算基数 64 SHA-256 哈希）。

<script>console.log("Hello World");var perfectScrollbar = new PerfectScrollbar("#container",{suppressScrollX: true});</script>