[Bug]: Safari iOS: Unable to Connect within iframe after 0.27.0 Upgrade

[andremfaria]

SDK

Web

Provide environment information

web
sdk-react 0.27.0
safari 17.4

MetaMask SDK Version

0.27.0

MetaMask Mobile app Version

7.27.0

What browser are you using? (if relevant)

Safari 17.4

How are you deploying your application? (if relevant)

web

Describe the Bug

With the new version 0.27.0, if we are using an iframe and hit sdk?.connect(), nothing happens. This behaviour occurs in Safari on iOS.

Video:

Screen.Recording.2024-07-30.at.13.16.36.mov

Expected Behavior

We should be able to connect on Safari@IOS within an Iframe.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/andremfaria/mm-iframe/

To Reproduce

1. Run the Project: https://github.com/andremfaria/mm-iframe/

2. Open Safari on iOS:

   • Ensure you are using an iOS device.
   • Open the Safari browser.

3. Access the Local Server:

   • In Safari, navigate to http://<your-local-ip>:5173/iframe/index.html.
   • Replace <your-local-ip> with your actual local IP address.

4. Trigger the Issue:

   • On the webpage, locate and click the "Connect" button.

[christopherferreira9]

Hi @andremfaria ! Thank you for reporting!
Are you doing pnpm run dev or pnpm run build + serve the built folder?

I can see it working with both options though:

Screen.Recording.2024-08-12.at.12.15.30.mov

[andremfaria]

Hello @christopherferreira9, thanks for your feedback!

I noticed in your video that you're not using the iframe. Could you please test it on http://local-ip:port/iframe/index.html? The issue only happens when using an iframe.

[christopherferreira9]

Hi @andremfaria ! You're right, got it to reproduce going into the proper route, I'm sorry for the confusion. Will escalate to investigate.

[andremfaria]

Hi @christopherferreira9, just an update: I tested with version 0.28.1, and the issue is still occurring.

[abretonc7s]

Heu @andremfaria , this looks like an IOS limitation. Are you saying it was working on previous versions? And which one?

The sdk is emitting this event: ' provider.emit('display_uri', qrcodeLink); ' which contains the link of the deeplink or qrcode.

One way you could do it, is by listening for the 'display_uri' event from sdk then communicate it back to the iframe and from the iframe open the deeplink...

https://stackoverflow.com/questions/31573143/is-it-possible-to-browser-deeplink-to-an-app-without-popup

[andremfaria]

Hello @abretonc7s,

The last version where it worked was 0.26.5, and the issue began with 0.27.0.

I'll try your suggestion and let you know the results.

Thanks