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 { CSP } from '../../shared/modules/content-security-policy';
 import migrations from './migrations';
 import Migrator from './lib/migrator';
 import ExtensionPlatform from './platforms/extension';
@@ -331,6 +332,34 @@ 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') {
+          const contentSecurityPolicy = CSP.parse(header.value);
+          const nonce = `'nonce-${btoa(browser.runtime.getURL('/'))}'`;
+          const scriptSrc = Object.keys(contentSecurityPolicy).find(
+            (directive) => directive.toLowerCase() === 'script-src',
+          );
+          if (scriptSrc) {
+            contentSecurityPolicy[scriptSrc].push(nonce);
+          } else {
+            contentSecurityPolicy['script-src'] = [nonce];
+          }
+          header.value = CSP.stringify(contentSecurityPolicy);
+        }
+      }
+      return { responseHeaders };
+    },
+    { types: ['main_frame', 'sub_frame'], urls: ['http://*/*', 'https://*/*'] },
+    ['blocking', 'responseHeaders'],
+  );
+}
+
 // These are set after initialization
 let connectRemote;
 let connectExternalExtension;
@@ -477,6 +506,10 @@ async function initialize() {
 
     if (!isManifestV3) {
       await loadPhishingWarningPage();
+      const platform = getPlatform();
+      if (platform === 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/content-security-policy.ts

@@ -0,0 +1,65 @@
+// 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 ';
+const ASCII_WHITESPACE = RegExp(`[${ASCII_WHITESPACE_CHARS}]+`);
+const ASCII_WHITESPACE_AT_START = RegExp(`^[${ASCII_WHITESPACE_CHARS}]+`);
+const ASCII_WHITESPACE_AT_END = RegExp(`[${ASCII_WHITESPACE_CHARS}]+$`);
+
+// An ASCII code point is a code point in the range U+0000 NULL to U+007F DELETE, inclusive.
+// See <https://infra.spec.whatwg.org/#ascii-string>.
+const ASCII = /^[\x00-\x7f]*$/;
+
+export type ContentSecurityPolicy = Record<string, string[]>;
+
+/**
+ * An intrinsic object that provides functions to handle the Content Security Policy (CSP) format.
+ */
+export const CSP = {
+  /**
+   * Converts a Content Security Policy (CSP) string into an object according to [the spec][0].
+   *
+   * [0]: https://w3c.github.io/webappsec-csp/#parse-serialized-policy
+   *
+   * @param text The Content Security Policy (CSP) string to parse.
+   * @returns A Content Security Policy (CSP) object.
+   */
+  parse: (text: string) => {
+    const contentSecurityPolicy: ContentSecurityPolicy = {};
+
+    // For each token returned by strictly splitting serialized on the
+    // U+003B SEMICOLON character (;):
+    const tokens = text.split(';');
+
+    for (const token of tokens) {
+      // Strip leading and trailing ASCII whitespace from token.
+      const strippedToken = token
+        .replace(ASCII_WHITESPACE_AT_START, '')
+        .replace(ASCII_WHITESPACE_AT_END, '');
+
+      // If strippedToken is an empty string, or if strippedToken is not an ASCII string, continue.
+      if (!strippedToken || !ASCII.test(strippedToken)) continue;
+
+      // Directive name is the result of collecting a sequence of code points from token which are not ASCII whitespace.
+      // Directive values are the result of splitting token on ASCII whitespace.
+      const [name, ...values] = strippedToken.split(ASCII_WHITESPACE);
+
+      contentSecurityPolicy[name] = values;
+    }
+
+    return contentSecurityPolicy;
+  },
+  /**
+   * Converts a Content Security Policy (CSP) object into a string.
+   *
+   * @param contentSecurityPolicy The Content Security Policy (CSP) object to stringify.
+   * @returns A Content Security Policy (CSP) string.
+   */
+  stringify: (contentSecurityPolicy: ContentSecurityPolicy) => {
+    return Object.entries(contentSecurityPolicy)
+      .map(([name, values]) => {
+        const value = values.length ? ` ${values.join(' ')}` : '';
+        return `${name}${value}`;
+      })
+      .join('; ');
+  },
+};