MetaMask / MetaMask/metamask-mobile

<iframe> with base64 data as src does not work

Open
#5,441 1 comment 1 reaction 0 assignees View on GitHub
browser feature-request needs-product team-mobile-platform
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

**Describe the bug**

`` with base64 data as src does not work, only urls.

The same problem happens to `<embed>` and `<object>` tags.

**Screenshots**

![IMG_2F73E6BCC468-1](https://user-images.githubusercontent.com/229161/210010781-db459f0d-fb42-4813-812e-c34e478dad84.jpeg)

**To Reproduce**
1. Create a page with an `<iframe>` with an http url in `src`. It works, as expected. Example:

`<iframe src="https://antechamber.endlesscrawler.io/api/token/play/29" style="width:150px;height:150px;pointer-events:none;overflow:hidden" sandbox="allow-scripts allow-same-origin" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">`

2. Create a page with an `` with an base64 data uri in `src`, and it will not work. Example:

`<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGh0bWwgbGFuZz0iZW4iPjxoZWFkPjxtZXRhIGNoYXJzZXQ9IlVURi04Ij48bWV0YSBuYW1lPSJhdXRob3IiIGNvbnRlbnQ9IlN0dWRpbyBBdmFudGUiPjx0aXRsZT5FbmRsZXNzIENyYXdsZXIgQ2hhbWJlciAjMjk8L3RpdGxlPjwvaGVhZD48Ym9keT48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjYwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9Ii0yIC0yIDIwIDIwIj48ZGVmcz48c3R5bGU+OnJvb3R7LS1CZzojMjExRTMwOy0tUGF0aHM6Izg0OTZBMTstLVRpbGVzOiNEMkZGRjE7LS1TaGFkb3dzOiMwRjVGOTE7LS1QbGF5ZXI6I0ZGQkVBNjstLUdlbTojQkJCQkJCO31zdmd7YmFja2dyb3VuZC1jb2xvcjp2YXIoLS1CZyk7fXRleHR7Zm9udC1mYW1pbHk6bW9ub3NwYWNlO2ZvbnQtc2l6ZTowLjEyNWVtO2ZpbGw6dmFyKC0tVGlsZXMpO30uVGV4dHt9LkJne2ZpbGw6dmFyKC0tQmcpO30jR2Vte2ZpbGw6dmFyKC0tR2VtKTt9I1BhdGhze2ZpbGw6dmFyKC0tUGF0aHMpO30jVGlsZXN7ZmlsbDp2YXIoLS1UaWxlcyk7fSNQbGF5ZXJ7ZmlsbDp2YXIoLS1QbGF5ZXIpO3Zpc2liaWxpdHk6aGlkZGVuO308L3N0eWxlPjxwYXRoIGlkPSJEb3duIiBkPSJtIDAgMCBoIDEgbCAtMC41IDAuNTUgWiIvPjxwYXRoIGlkPSJVcCIgZD0ibSAwIDEgaCAxIGwgLTAuNSAtMC41NSBaIi8+PHBhdGggaWQ9IkxlZnQiIGQ9Im0gMSAwIHYgMSBsIC0wLjU1IC0wLjUgWiIvPjxwYXRoIGlkPSJSaWdodCIgZD0ibSAwIDAgdiAxIGwgMC41NSAtMC41IFoiLz48cGF0aCBpZD0iR2VtIiBkPSJtIDAgMC41IGwgMC41IDAuNSBsIDAuNSAtMC41IGwgLTAuNSAtMC41IFoiLz48Y2lyY2xlIGlkPSJMb2NrZWQiIGN4PSIwLjUiIGN5PSIwLjUiIHI9IjAuNCIvPjwvZGVmcz48Zz48cmVjdCBjbGFzcz0iQmciIHg9Ii0yIiB5PSItMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIi8+PGcgaWQ9IlBhdGhzIiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjwvZz48L2c+PHRleHQgY2xhc3M9IlRleHQiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHg9IjAiIHk9Ii0xIj4jMjk8L3RleHQ+PHRleHQgY2xhc3M9IlRleHQiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHg9IjAiIHk9IjE3IiBpZD0iY29vcmQiPlMxIEU1IFk2PC90ZXh0PjwvZz48L3N2Zz48L2JvZHk+PC9odG1sPg==" sandbox="allow-scripts allow-same-origin" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">`

I created a test page, linked below. It works on Chrome Desktop, Safari Desktop, Safari iOS, but not on MetaMask iOS. The first column uses HTTP URL (ok), the second uses DATA URI (not ok)

https://antechamber.endlesscrawler.io/test_iframe

**Expected behavior**

Data URI should be allowed in `` src, as it is allowed on <img>

URI Reference:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
https://en.wikipedia.org/wiki/Data_URI_scheme

**Smartphone (please complete the following information):**
- Device: iPhone SE
- OS: iOS 16.1.2
- App Version 5.12.3 (1033)

-------------------------------------------------------------
_to be added after bug submission by internal support / PM_
**Severity**

- How critical is the impact of this bug on a user?
- Add stats if available on % of customers impacted
- Is this visible to all users?
- Is this tech debt?

Contributor guide

Open the contributing guide

Research direction

Start with the linked test page, https://antechamber.endlesscrawler.io/test_iframe, and compare the HTTP URL and base64 data URI cases in the mobile browser. Trace the iframe, embed, and object handling paths and verify the data URI renders on the reported iPhone configuration without regressing HTTP URLs.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, 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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.