Chrome擴展程序通過嚴格的CSP將具有動態值的腳本注入頁面

Question

我正在創建一個隱私擴展，該擴展在document_start上運行內容腳本。

內容腳本需要為每個不同的來源（例如google.com，twitter.com等）注入具有動態值的腳本。

這是我的內容腳本：

console.log("Content Script Running ...");
console.log("Window origin: " + window.location.href);

function inject(filePath) {
  var script = document.createElement('script');
  script.src = chrome.extension.getURL(filePath);
  script.onload = function() {
    this.remove();
  };
  (document.head || document.documentElement).appendChild(script);
}

function injectText(text) {
  var script = document.createElement('script');
  script.textContent = text;
  script.onload = function() {
    this.remove();
  };
  (document.head || document.documentElement).appendChild(script);
}

function getSeed(origin) {
    // Get a Storage object
    var storage = window.sessionStorage;

    // Do we already have a seed in storage for this origin or not?
    var seed = storage.getItem(origin);

    if (seed === null) {
        // Initialise a 32 byte buffer
        seed = new Uint8Array(32);

        // Fill it with cryptographically random values
        window.crypto.getRandomValues(seed);

        // Save it to storage
        storage.setItem(origin, seed);
    }

    return seed;
}

var origin = window.location.hostname;

var seed = getSeed(origin);

injectText("var seed = '" + seed + "';");
console.log("[INFO] Injected Seed ...");

inject("js/lib/seedrandom.min.js");
console.log("[INFO] Injected Seed Random ...");

inject("js/random.js");
console.log("[INFO] Injected Random ...");

inject("js/api/document.js");
console.log("[INFO] Injected Document API ...");

inject("js/api/navigator.js");
console.log("[INFO] Injected Navigator API ...");

inject("js/api/canvas.js");
console.log("[INFO] Injected Canvas API ...");

inject("js/api/history.js");
console.log("[INFO] Injected History API ...");

inject("js/api/battery.js");
console.log("[INFO] Injected Battery API ...");

inject("js/api/audio.js");
console.log("[INFO] Injected Audio API ...");

inject("js/api/element.js");
console.log("[INFO] Injected Element API ...");

當嘗試在具有嚴格CSP的網站（例如github.com）上運行此擴展程序時，我的具有動態種子值的腳本被阻止，而其他依賴於該值的腳本最終都引用了未定義的值。 關於如何解決這個問題的任何想法。

使用src屬性加載的腳本是可以的，因為它們位於.js文件中並從擴展名加載，但是具有動態值aka var seed = ...的一個腳本被阻止，因為它是使用textContent屬性注入的。

我需要讓此代碼同步運行，然后在頁面上運行任何其他腳本之前運行，因此為什么我要在document_start上運行內容腳本。

有任何想法嗎？

Answer 1

我解決了這個問題。 我遇到的主要問題是試圖注入具有以下內容的嵌入式文本腳本：

var seed = $(value that changes depending on the page)

某些網站（例如twitter.com和github.com）具有嚴格的內容安全策略，因此可能會阻止此行為。

我的解決方案是在內容腳本中執行以下操作：

var filePath = // Get filepath to script
var seed = // Get seed value in content script

var script = document.createElement('script');
script.setAttribute("data-seed", seed);
script.src = chrome.extension.getURL(filePath);
script.onload = function() {
  this.remove();
};
(document.head || document.documentElement).appendChild(script);

這樣會在頁面中創建一個腳本，如下所示

<script data-seed="$(DATA-SEED-VALUE)" src="$(SRC-VALUE)"></script>

然后從現在作為頁面腳本運行的這個腳本中（在網頁的內容中）：

var seed = document.currentScript.getAttribute("data-seed");

獲得種子。 該解決方案更加整潔，簡便，並且不需要更改CSP，而CSP可能會為您與之交互的站點造成安全問題。