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';
@@ -333,6 +334,29 @@ function maybeDetectPhishing(theController) {
   );
 }
 
+/**
+ * Overrides the Content-Security-Policy (CSP) header by adding a nonce to the `script-src` directive.
+ * This is a workaround for [Bug #1446231](https://bugzilla.mozilla.org/show_bug.cgi?id=1446231),
+ * which involves overriding the page CSP for inline script nodes injected by extension content scripts.
+ */
+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 };
+    },
+    { types: ['main_frame', 'sub_frame'], urls: ['http://*/*', 'https://*/*'] },
+    ['blocking', 'responseHeaders'],
+  );
+}
+
 // These are set after initialization
 let connectRemote;
 let connectExternalExtension;
@@ -479,6 +503,12 @@ async function initialize() {
 
     if (!isManifestV3) {
       await loadPhishingWarningPage();
+      // Workaround for Bug #1446231 to override page CSP for inline script nodes injected by extension content scripts
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1446231
+      const platformName = getPlatform();
+      if (platformName === 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,98 @@
+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('no applicable directive', () => {
+    const input = 'img-src https://example.com';
+    const expected = `img-src https://example.com`;
+    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);
+  });
+
+  it('fallback to default-src', () => {
+    const input = `default-src 'none'`;
+    const expected = `default-src 'none' 'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+
+  it('keep ascii whitespace characters', () => {
+    const input = '       script-src        default.example      ';
+    const expected = `       script-src        default.example       'nonce-test'`;
+    const output = addNonceToCsp(input, 'test');
+    expect(output).toBe(expected);
+  });
+});

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

@@ -0,0 +1,38 @@
+// ASCII whitespace is U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE.
+// See <https://infra.spec.whatwg.org/#ascii-whitespace>.
+const ASCII_WHITESPACE_CHARS = ['\t', '\n', '\f', '\r', ' '].join('');
+
+const matchDirective = (directive: string) =>
+  /* eslint-disable require-unicode-regexp */
+  new RegExp(
+    `^([${ASCII_WHITESPACE_CHARS}]*${directive}[${ASCII_WHITESPACE_CHARS}]*)`, // Match the directive and surrounding ASCII whitespace
+    'is', // Case-insensitive, including newlines
+  );
+const matchScript = matchDirective('script-src');
+const matchDefault = matchDirective('default-src');
+
+/**
+ * Adds a nonce to a Content Security Policy (CSP) string.
+ *
+ * @param text - The Content Security Policy (CSP) string to add the nonce to.
+ * @param nonce - The nonce to add to the Content Security Policy (CSP) string.
+ * @returns The updated Content Security Policy (CSP) string.
+ */
+export const addNonceToCsp = (text: string, nonce: string) => {
+  const formattedNonce = ` 'nonce-${nonce}'`;
+  const directives = text.split(';');
+  const scriptIndex = directives.findIndex((directive) =>
+    matchScript.test(directive),
+  );
+  if (scriptIndex >= 0) {
+    directives[scriptIndex] += formattedNonce;
+  } else {
+    const defaultIndex = directives.findIndex((directive) =>
+      matchDefault.test(directive),
+    );
+    if (defaultIndex >= 0) {
+      directives[defaultIndex] += formattedNonce;
+    }
+  }
+  return directives.join(';');
+};