Web擴展-Iframe Source執行腳本時出現內容安全策略錯誤

Question

我有一個firefox Web擴展程序，該擴展程序使用內容腳本在單擊按鈕時將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 ....

我通讀了文檔 ，似乎默認內容安全策略不允許使用串聯javascript。

相關文件：

擴展的默認內容安全策略是：

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

這將適用於任何未使用content_security_policy manifest.json鍵顯式設置其自身的內容安全策略的擴展。 它具有以下后果：

您只能加載擴展名本地的資源。

該擴展名不允許將字符串評估為JavaScript。

內聯JavaScript不執行。

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

我可以通過使用import語句解決內聯javascript的問題，但是根據Mozilla的說法，Firefox目前不支持這些語句： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements /進口

根據文檔，可以通過創建腳本的sha-256哈希來允許某些內聯Javascript。

https://developer.mozilla.org/zh-CN/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/zh-CN/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>