Unable to add custom network with basic auth in url

[drptbl]

Describe the bug
I've got an ETH mainnet node running behind nginx reverse proxy with basic auth in place. I can access it using using url formatted this way: https://user:[email protected]. It worked without issues in metamask too, was using it with success until something broke in metamask in v8.1.0 (worked fine on v8.0.10).

Prerequisites:
ETH node running behind nginx reverse proxy with basic auth in place
sorry, I'm not able to share my own!

Steps to reproduce (REQUIRED)
Steps to reproduce the behavior, libraries used with version number, and/or any setup information to easily reproduce:

1. Open metamask on main page (wallet overview)
2. Click on "Networks" placeholder on top
3. Click on "Custom RPC" position
4. Fill "Network name" with anything
5. Fill "New RPC URL" with url to ETH mainnet node behind nginx reverse proxy with basic auth in place
6. Fill "Chain ID" with your expected chain ID (1 in my case as this is ETH mainnet node)
7. Click on "Save" button

Expected behavior
Metamask should work with my mainnet ETH node behind reverse proxy with basic auth in place.

Screenshots

Browser details (please complete the following information):

• OS: OS X
• Browser: Chrome Version 86.0.4240.183 (Official Build) (64-bit)
• MetaMask Version: 8.1.3

Additional context (Error Messages, etc.)
Works fine on metamask 8.0.10. Broken on 8.1.0.
Getting Could not fetch chain ID. Is your RPC URL correct? error.
Maybe related to this PR: #9487

[sirasistant]

This is affecting us as well for connecting to private networks. I have seen in the metamask console the following log:

ui.js:179 Failed to fetch the chainId from the endpoint. TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: MY_URL

It seems like they are using the builtin fetch that does not allow to use URL with credentials.

It could be fixed if they implement the conversion to authorization header: https://stackoverflow.com/questions/45067331/request-with-url-that-includes-credentials
like this:

var headers = new Headers();

headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
fetch('https://host.com', {headers: headers})

Username and password can be extracted from the url using a regular expression that would also skip this header appending if the url does not match (does not have basic auth)

This way it wouldn't block us to use private networks in metamask, since metamask has no way of specifying headers in custom RPCs.

[tmashuang]

Related to #9683.

[vdamle]

@sirasistant The Authorization header seems to be set similar to your snippet in an underlying module here:

https://github.com/AlayaNetwork/samurai-eth-json-rpc-middleware/blob/e03fb81ab62eaef34fc4fa0715b266fd7474855c/fetch.js#L118-L122

However, I see a recent change to move from fetch-ponyfill -> node-fetch here: AlayaNetwork/samurai-eth-json-rpc-middleware@2b513d9

Not sure if that has caused an unexpected breaking change?

[drptbl]

Thanks for solving this! 🎉