MetaMask detection fails in Firefox

[Jeiwan]

Describe the bug When connecting to MetaMask, the app fails to detect that MetaMask is installed. This has started recently.

To Reproduce Steps to reproduce the behavior:

1. In Firefox, go to https://yearn.finance
2. Click 'Connect Wallet'
3. Choose MetaMask
4. See "You'll need to install MetaMask to continue" message.

Expected behavior The app detects MetaMask and connects to it.

Screenshots In the JS console, I see this:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). moz-extension:1:144047
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). moz-extension:136:52
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). moz-extension:2132:49

Seems that CSP settings don't allow Firefox to initialize the MetaMask extension.

Environment Information

• Browser: Firefox 103.0a1 (2022-06-15) (64-bit)

[xgambitox]

@Jeiwan thanks for detailed issue.

We recently hardened our web app security and added the script-src to the CSP header. We now disallow inline scripts from being injected into our site. Metamask extension injects the web3 provider on window.ethereum this way, but seems like it violates this CSP on Firefox since they apply it more strictly, and also is an issue for the Metamask mobile app. Metamask has knowledge of this issue but has not being solved yet https://github.com/MetaMask/metamask-extension/issues/3133.

Since we dont want to downgrade our security (unless its much needed), we will need to find a workaround until it is solved by Metamask.

[Jeiwan]

@xgambitox I see, thanks for clarifying.

So the only workaround is to use a different browser or disable CSP in Firefox (which is unsafe). I'll close the issue since this is an upstream issue.

[xgambitox]

Was able to get a custom workaround working here. Will do some QA and release to prod.