MetaMask / MetaMask/metamask-sdk
[Bug]: MetaMask SDK not working on Brave @ iOS when using HTTPS.
- Dominant language
- TypeScript
- Stars
- 338
- Forks
- 260
- PR merge metrics
- No merged PRs in 30d
Description
### SDK
Web
### Provide environment information
IOS 17.4
Brave 1.65
MetamaskSDK 0.18.6
Metamask Mobile app 7.22.0
### MetaMask SDK Version
0.18.6
### MetaMask Mobile app Version
7.22.0 (1325)
### What browser are you using? (if relevant)
Brave 1.65 (122)
### How are you deploying your application? (if relevant)
_No response_
### Describe the Bug
On Mobile, using Brave, when we access a web app that has https enabled, we try to connect but the SDK is undefined.
We see the following errors on the Brave mobile logs when the page first loads:

Raw logs:
```
[Warning] [blocked] The page at https://192.168.1.67:5173/ was not allowed to display insecure content from user-script://null/index.iife.min.js.map.
[Error] Not allowed to request resource
[Error] Cannot load user-script://null/index.iife.min.js.map due to access control checks.
[Debug] [vite] connecting... (client, line 469)
[Debug] [vite] connected. (client, line 576)
[Debug] MM_SDK [MetaMaskSDK: constructor()]: begin. +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [MetaMaskSDK: performSDKInitialization()] options +0ms – {logging: {developerMode: true, sdk: true}, dappMetadata: {name: "Demo React App", url: "https://192.168.1.67:5173"}, communicationLayerPreference: "socket", …} (@metamask_sdk-react.js, line 19251)
{logging: {developerMode: true, sdk: true}, dappMetadata: {name: "Demo React App", url: "https://192.168.1.67:5173"}, communicationLayerPreference: "socket", enableAnalytics: true, injectProvider: true, …}Object
[Debug] MM_SDK [MetaMaskSDK: initializeMetaMaskSDK()] already initializing +1ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK-React [MetaMaskProviderClient] sdk already initialized +0ms (@metamask_sdk-react.js, line 42898)
[Debug] MM_SDK [WakeLockManager: setDebug()] activate debug mode +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [RemoteConnection: initializeConnector()] initialize connector +503ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [initializeMobileProvider] cachedAccountAddress: null, cachedChainId: null +23ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [Ethereum: init()] Initializing Ethereum service +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [SDKProvider: initializeStateAsync()] initialize state async started +1ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [SDKProvider: constructor()] autoRequestAccounts=false +1ms (@metamask_sdk-react.js, line 19251)
[Error] TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
(anonymous function) (@metamask_sdk-react.js:42638)
s3 (@metamask_sdk-react.js:16761)
[Error] [MetaMaskSDK: constructor()] error during initialization – TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
(anonymous function) (@metamask_sdk-react.js:42621)
[Error] Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property.
(anonymous function) (@metamask_sdk-react.js:22826:93)
[Error] Unhandled Promise Rejection: Error: Ethereum instance not intiialized - call Ethereum.factory first.
```
### Expected Behavior
We should be able to connect the accounts on Brave @ iOS
### Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
https://github.com/andremfaria/mm-sdk-brave-ios-problem
### To Reproduce
- Use Safari Web Inspector to view the Brave logs on your mobile device.
- Run the example app.
- Open Brave on your iPhone and access https://:5172/.
- Hit the "Connect" button.
- Nothing happens. SDK is undefined.
Contributor guide
Research direction
Start with the linked minimal reproduction and reproduce the failure in Brave on iOS using the listed local HTTPS URL. Inspect SDK initialization in metamask-sdk.js and metamask-sdk-react.js around the reported readonly-property error. Done means the SDK initializes and the Connect action can connect accounts without the subsequent uninitialized-Ethereum error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- mobile-dev, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100