fix: mv2 firefox csp header

app/scripts/background.js

@@ -56,6 +56,7 @@ import {
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
 import { getCurrentChainId } from '../../ui/selectors';
+import { addNonceToCsp } from '../../shared/modules/add-nonce-to-csp';
 import migrations from './migrations';
 import Migrator from './lib/migrator';
 import ExtensionPlatform from './platforms/extension';
@@ -327,6 +328,27 @@ function maybeDetectPhishing(theController) {
   );
 }
 
+/**
+ * Overrides the Content-Security-Policy Header, acting as a workaround for an MV2 Firefox Bug.
+ */
+function overrideContentSecurityPolicyHeader() {
+  browser.webRequest.onHeadersReceived.addListener(
+    ({ responseHeaders }) => {
+      for (const header of responseHeaders) {
+        if (header.name.toLowerCase() === 'content-security-policy') {
+          header.value = addNonceToCsp(
+            header.value,
+            btoa(browser.runtime.getURL('/')),
+          );
+        }
+      }
+      return { responseHeaders };
+    },
+    { urls: ['http://*/*', 'https://*/*'] },
+    ['blocking', 'responseHeaders'],
+  );
+}
+
 // These are set after initialization
 let connectRemote;
 let connectExternalExtension;
@@ -473,6 +495,10 @@ async function initialize() {
 
     if (!isManifestV3) {
       await loadPhishingWarningPage();
+      const { name } = await browser.runtime.getBrowserInfo();
+      if (name === PLATFORM_FIREFOX) {
+        overrideContentSecurityPolicyHeader();
+      }
     }
     await sendReadyMessageToTabs();
     log.info('MetaMask initialization complete.');

development/build/utils.js

@@ -293,7 +293,7 @@ function getBuildName({
 function makeSelfInjecting(filePath) {
   const fileContents = readFileSync(filePath, 'utf8');
   const textContent = JSON.stringify(fileContents);
-  const js = `{let d=document,s=d.createElement('script');s.textContent=${textContent};d.documentElement.appendChild(s).remove();}`;
+  const js = `{let d=document,s=d.createElement('script');s.textContent=${textContent};s.nonce=btoa(browser.runtime.getURL('/'));d.documentElement.appendChild(s).remove();}`;
   writeFileSync(filePath, js, 'utf8');
 }
 

development/webpack/test/plugins.SelfInjectPlugin.test.ts

@@ -55,7 +55,7 @@ describe('SelfInjectPlugin', () => {
           // reference the `sourceMappingURL`
           assert.strictEqual(
             newSource,
-            `{let d=document,s=d.createElement('script');s.textContent="${source}\\n//# sourceMappingURL=${filename}.map"+\`\\n//# sourceURL=\${(globalThis.browser||chrome).runtime.getURL("${filename}")};\`;d.documentElement.appendChild(s).remove()}`,
+            `{let d=document,s=d.createElement('script');s.textContent="${source}\\n//# sourceMappingURL=${filename}.map"+\`\\n//# sourceURL=\${(globalThis.browser||chrome).runtime.getURL("${filename}")};\`;s.nonce=btoa(browser.runtime.getURL('/'));d.documentElement.appendChild(s).remove()}`,
           );
         } else {
           // the new source should NOT reference the new sourcemap, since it's
@@ -66,7 +66,7 @@ describe('SelfInjectPlugin', () => {
           // console.
           assert.strictEqual(
             newSource,
-            `{let d=document,s=d.createElement('script');s.textContent="console.log(3);"+\`\\n//# sourceURL=\${(globalThis.browser||chrome).runtime.getURL("${filename}")};\`;d.documentElement.appendChild(s).remove()}`,
+            `{let d=document,s=d.createElement('script');s.textContent="console.log(3);"+\`\\n//# sourceURL=\${(globalThis.browser||chrome).runtime.getURL("${filename}")};\`;s.nonce=btoa(browser.runtime.getURL('/'));d.documentElement.appendChild(s).remove()}`,
           );
         }
 

development/webpack/utils/plugins/SelfInjectPlugin/index.ts

@@ -142,6 +142,7 @@ export class SelfInjectPlugin {
       `\`\\n//# sourceURL=\${${this.options.sourceUrlExpression(file)}};\``,
     );
     newSource.add(`;`);
+    newSource.add(`s.nonce=btoa(browser.runtime.getURL('/'));`);
     // add and immediately remove the script to avoid modifying the DOM.
     newSource.add(`d.documentElement.appendChild(s).remove()`);
     newSource.add(`}`);

shared/modules/add-nonce-to-csp.test.ts

@@ -0,0 +1,77 @@
+import { addNonceToCsp } from './add-nonce-to-csp';
+
+describe('addNonceToCsp', () => {
+  it('empty string', () => {
+    const input = '';
+    const expected = '';
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('one empty directive', () => {
+    const input = 'script-src';
+    const expected = `script-src 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('one directive, one value', () => {
+    const input = 'script-src default.example';
+    const expected = `script-src default.example 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('one directive, two values', () => {
+    const input = "script-src 'self' default.example";
+    const expected = `script-src 'self' default.example 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('multiple directives', () => {
+    const input =
+      "default-src 'self'; script-src 'unsafe-eval' scripts.example; object-src; style-src styles.example";
+    const expected = `default-src 'self'; script-src 'unsafe-eval' scripts.example 'nonce-test'; object-src; style-src styles.example`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('non-ASCII directives', () => {
+    const input = 'script-src default.example;\u0080;style-src style.example';
+    const expected = `script-src default.example 'nonce-test';\u0080;style-src style.example`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('uppercase directive names', () => {
+    const input = 'SCRIPT-SRC DEFAULT.EXAMPLE';
+    const expected = `SCRIPT-SRC DEFAULT.EXAMPLE 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('duplicate directive names', () => {
+    const input =
+      'default-src default.example; script-src script.example; script-src script.example';
+    const expected = `default-src default.example; script-src script.example 'nonce-test'; script-src script.example`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('nonce value contains script-src', () => {
+    const input =
+      "default-src 'self' 'nonce-script-src'; script-src 'self' https://example.com";
+    const expected = `default-src 'self' 'nonce-script-src'; script-src 'self' https://example.com 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('url value contains script-src', () => {
+    const input =
+      "default-src 'self' https://script-src.com; script-src 'self' https://example.com";
+    const expected = `default-src 'self' https://script-src.com; script-src 'self' https://example.com 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+});

shared/modules/add-nonce-to-csp.ts

@@ -0,0 +1,13 @@
+/**
+ * Adds a nonce value to the script-src directive of the Content-Security-Policy Header.
+ *
+ * @param header - the Content-Security-Policy Header
+ * @param nonce - the nonce value to add
+ * @returns the Content-Security-Policy Header with the nonce value added
+ */
+export const addNonceToCsp = (header: string, nonce: string) => {
+  return header.replace(
+    /(^|;[\t\n\f\r ]*)script-src([^;]*)/iu,
+    (match) => `${match} 'nonce-${nonce}'`,
+  );
+};