Mobile Browser: <iframe> with base64 html data src does not work

[rsodre]

Hello!

I’ve built a dapp for my on-chain game, it is based on ERC-721 tokens with embedded image and animation_url tags, both containing the actual image and animation data encoded as base64. Trivial on-chain tokens.

On the dapp, I use the token base64 data as src of an iframe. Also standard, everything works great! But the iOS MetaMask Browser (never tried Android) does not display anything on those iframes. Looking at OpenSea, which also uses iframes, my tokens are displayed ok and are interactable, but it seems they cache the html data into an html file, and use the url to that file on src, not the actual data as I’m using.

Is that a bug? Or it will not work by design? Caching the tokens to an html file breaks on-chain the decentralization concept. I should NOT be required to cache anything. Building an endpoint and passing the data in the url is something I do sometimes, but those tokens are longer than 2KB, breaking the url 2k limit.

Here made a test page embedding the iframes. Also trying with and tags, which work on Chrome desktop, Safari Mobile, but not on MetaMask. (the last iframe is just an url from artblocks to check iframes are enabled)

Test page is here: antechamber (dot) endlesscrawler (dot) io/iframe

Thanks!!

[snwlprd.eth]

Hello @rsodre !
Welcome to MetaMask community !)

Yes, it really doesn’t work in this case,
If you want to use an iframe you need to implement it like OpenSea,
or don’t use iframe like Blur and copies pic locally.

[rsodre]

Oh, really!?

Will take a look at blur, thanks!

[snwlprd.eth]

This is what it looks like:

[rsodre]

I also haven’t found any token animations in blur, just cached images.

Is there any good reason for not accepting data inside iframes? Not sure if I d should report a bug or open a feature request?

That’s blocking me from announcing full mobile compatibility because the most used wallet will not support it, which will not sound good…

[snwlprd.eth]

Yes, you can create your issue in the official repository

But if you want to quickly announce full compatibility with mobile devices, then you better make an implementation like marketplaces