metamask-extension fix: mv2 firefox csp header

Description

This PR implements a workaround for a long-standing Firefox MV2 bug where the content-security-policy header is not bypassed, triggering an error.

The solution is simple: we check if the extension is MV2 running in Firefox. If yes, we override the header to prevent the error from raising.

Related issues

Fixes: https://github.com/MetaMask/metamask-extension/issues/3133, https://github.com/MetaMask/MetaMask-planning/issues/3342

Manual testing steps

Opening github.com should not trigger the CSP error

Screenshots/Recordings

Before

After

Pre-merge author checklist

[x] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
[x] I've completed the PR template to the best of my ability
[x] I’ve included tests if applicable
[x] I’ve documented my code using JSDoc format if applicable
[x] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

[ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
[ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Oct 10 '24 17:10 itsyoboieltr

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

Oct 10 '24 17:10 github-actions[bot]

Quality Gate failed

Failed conditions
1 Security Hotspot
18.8% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud

Oct 15 '24 18:10 sonarqubecloud[bot]

Builds ready [ce4709f]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2113 ± 116 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	389	2856	1874	648	311
		domContentLoaded	1802	2740	2071	229	110
		load	1808	2846	2113	241	116
		domInteractive	29	144	55	25	12
		backgroundConnect	10	97	43	27	13
		firstReactRender	54	130	92	22	11
		getState	8	75	22	22	10
		initialActions	0	1	0	0	0
		loadScripts	1285	2223	1544	221	106
		setupStore	12	76	33	21	10
		uiStartup	2025	3094	2329	249	120

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 1.16 KiB (0.03%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

Oct 25 '24 20:10 metamaskbot

Builds ready [5483bd8]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2086 ± 184 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	336	3462	2000	541	260
		domContentLoaded	1710	3370	2040	370	178
		load	1719	3459	2086	383	184
		domInteractive	16	88	44	19	9
		backgroundConnect	11	97	44	25	12
		firstReactRender	49	416	133	91	44
		getState	5	64	21	20	9
		initialActions	0	1	0	0	0
		loadScripts	1205	2840	1520	344	165
		setupStore	11	102	35	28	13
		uiStartup	1918	3719	2371	463	222

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.56 KiB (0.06%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

Oct 25 '24 21:10 metamaskbot

Builds ready [73a22d3]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2099 ± 212 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	289	3882	2013	579	278
		domContentLoaded	1808	3773	2053	408	196
		load	1813	3962	2099	441	212
		domInteractive	19	99	41	17	8
		backgroundConnect	9	110	47	29	14
		firstReactRender	58	292	120	54	26
		getState	4	95	23	26	13
		initialActions	0	1	0	0	0
		loadScripts	1309	2768	1499	302	145
		setupStore	11	108	34	32	15
		uiStartup	2028	4484	2355	515	247

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.63 KiB (0.06%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

Oct 30 '24 20:10 metamaskbot

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/[email protected]	None	`0`	10.6 kB	types

View full report↗︎

Oct 31 '24 15:10 socket-security[bot]

Builds ready [49b6924]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1987 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	288	2208	1806	520	250
		domContentLoaded	1742	2129	1949	116	56
		load	1788	2192	1987	126	60
		domInteractive	19	83	44	20	10
		backgroundConnect	8	105	32	29	14
		firstReactRender	83	204	118	33	16
		getState	4	58	21	20	9
		initialActions	0	1	0	0	0
		loadScripts	1242	1622	1425	116	56
		setupStore	12	69	24	18	9
		uiStartup	1977	2580	2238	168	81

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.56 KiB (0.06%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

Oct 31 '24 16:10 metamaskbot

Builds ready [31c2349]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2220 ± 107 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	320	2773	2137	467	224
		domContentLoaded	1908	2734	2170	204	98
		load	1913	2779	2220	223	107
		domInteractive	19	132	53	28	13
		backgroundConnect	8	237	38	49	23
		firstReactRender	79	223	129	35	17
		getState	8	66	31	23	11
		initialActions	0	1	0	0	0
		loadScripts	1345	2205	1589	198	95
		setupStore	13	89	27	23	11
		uiStartup	2174	3011	2498	224	108

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.56 KiB (0.06%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

Oct 31 '24 18:10 metamaskbot

Builds ready [cec02cb]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2095 ± 90 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	309	2475	2030	432	207
		domContentLoaded	1754	2464	2068	177	85
		load	1763	2477	2095	188	90
		domInteractive	22	90	45	19	9
		backgroundConnect	9	153	28	33	16
		firstReactRender	53	289	127	64	31
		getState	5	66	19	18	8
		initialActions	0	1	0	0	0
		loadScripts	1230	1777	1510	139	67
		setupStore	14	85	44	24	11
		uiStartup	2036	2862	2422	242	116

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 3 KiB (0.07%)
ui: 2.03 KiB (0.03%)
common: 604 Bytes (0.01%)

Nov 06 '24 22:11 metamaskbot

@danjm I manually tested it today with a prod-like build using the command:

yarn webpack --env production --no-lavamoat --browser firefox

it worked for me locally.

Nov 06 '24 22:11 itsyoboieltr

Hey @itsyoboieltr I used the build from bot above and tested locally the zip in firefox. I noticed that in firefox page we won't receive any errors, while in extension log we still have it, is this expected? 截屏2024-11-07 11 26 46

Nov 07 '24 11:11 DDDDDanica

Hi @DDDDDanica, thank you for checking out and testing the PR! The error logs in the extension are unrelated to the issue. This PR is about fixing the CSP error messages for websites (not the extension itself). The screenshot you sent seems to be showing a pre-existing error. I could reproduce the same error messages in the console by running the current build from develop.

Nov 07 '24 14:11 itsyoboieltr

@itsyoboieltr thanks for the explanation, just to make sure it is not related, approve now !

Nov 07 '24 15:11 DDDDDanica

metamask-extension metamask-extension copied to clipboard

fix: mv2 firefox csp header

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Quality Gate failed

metamask-extension
metamask-extension copied to clipboard