Chrome extension inject script with dynamic value into page with strict CSP

Question

I am creating a privacy extension that runs a content script on document_start.

The content script needs to inject a script with a dynamic value for each different origin eg google.com, twitter.com etc etc.

This is my content script:

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 ...");

When trying to run this extension on a website with a strict CSP eg github.com, my script with a dynamic seed value is blocked and my other scripts which depend on that value end up referencing an undefined value. Any ideas how I can get around this.

The scripts loaded using the src attribute are ok since they are in a .js file and are loaded from the extension however that one script that has a dynamic value aka var seed = ... is blocked because it is injected using the textContent attribute.

I need to have this code run syncronously and before any other script on the page run hence why i have the content script run on document_start.

Any ideas?

Answer 1

I fixed the issue. The main issue I was having was trying to inject an inline text script which had the following content:

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

This gets blocked by certain websites such as twitter.com and github.com which have restrictive content security policies.

My solution was to do the following in my content script:

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);

This will create a script in the page like so

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

Then from within this script which is now running as a page script (in the content of the web page):

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

Which gets the seed. This solution is much neater, easier and doesn't require altering CSP which could create security issues for the site you are interacting with.