Firefox blocks Metamask at CSP about siwe

[jaerith]

Looks like it's hanging on the line:

    await metamask.request({
        method: 'eth_requestAccounts',
    });

[wyc]

@jaerith sorry to hear that it's not working smoothly for you! Do any other apps using MetaMask work for you? You can try this one: https://web3modal.com/

We use web3modal under the hood.

Correction: we don’t use web3modal for the notepad example, only login.xyz

[jaerith]

Interesting...I'm able to sign into the web3modal site without any issue.

[dcato98]

I'm experiencing this too, running Firefox v94 on Ubuntu. Metamask works fine on the web3modal site. This error message gets logged in the console:

Uncaught (in promise) TypeError: metamask is undefined
    signIn providers.ts:35
    __awaiter bundle.js:95800
    __awaiter bundle.js:95796
    signIn providers.ts:28
    ts providers.ts:176

Update: window.ethereum in console is undefined in SIWE-notepad, not undefined in web3modal
Update 2: Missed this earlier, actually this error message is the first error in the console Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src")

[w4ll3]

@jaerith @dcato98 Do you have any other wallets installed?

[dcato98]

No, only metamask. See update 2 in my previous message though, I missed an earlier error in the console.

[dcato98]

I've never dealt with CSP before, but a quick google suggested adding this line to the head tag in index.html might fix the problem alas it does not.
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />

[w4ll3]

I'll dig into it a little further, but for this specific setup it wouldn't work, we have to set the CSP at Helmet. Does metamask work here?

[dcato98]

Still no luck. Here's a full screenshot of the console errors.

[dcato98]

Huh...apparently I get 5 of these CSP error messages even here on github, so maybe this is an extension blocking stuff? On the right of the errors it says 'moz-extension'.

Update: Allowed only the metamask extension in a private window and got the same behavior, although this time I'm only seeing one CSP error instead of 4.

[w4ll3]

This is related to this open issue.

[dcato98]

From the commentary in the issue you linked above, the easy-but-unsatisfying fix is to omit the Content Security Policy.

I tested this out and indeed, after commenting out the CSP in index.ts (i.e. app.use(Helmet(...))), metamask now works as expected.

For those looking for a fix that doesn't reduce security, there were a few slightly more complicated suggestions in the issue mentioned in the previous post for working around this.

[jaerith]

Confirmed! Thanks @dcato98, commenting out the usage of Helmet got it to work.

The million dollar question is this: how does this Notepad example differ from the online voting demo when it comes to CSP, since that one does work in Mozilla?

[w4ll3]

The issue occurs only when CSP is applied to headers, since the content from the Notepad example is served directly from the express application Helmet filter those, that's not the case for login.xyz the API is quite similar but the files are not served from the API.

[jaerith]

Thanks for the answer, @w4ll3! So we should avoid using Firefox for the time being and use another browser instead, like Chrome?

[w4ll3]

You could do that, or remove Helmet.

[jaerith]

Thanks again!