MetaMask / MetaMask/metamask-sdk

[Bug]: MetaMask SDK not working on Brave @ iOS when using HTTPS.

Open
#855 5 comments 1 reaction 0 assignees View on GitHub
Bug Triage
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:

![Evidence](https://github.com/MetaMask/metamask-sdk/assets/10519908/5da17eeb-2a42-46a0-a288-0c339c57fffb)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.