Open Bug 1886571 Opened 1 year ago Updated 1 year ago

Large base64 data URL images error when loaded into an image element

Categories

(Core :: Networking, defect, P2)

Firefox 125
Desktop
All
defect
Points:
8

Tracking

()

Tracking Status
firefox-esr115 --- affected
firefox126 --- affected
firefox127 --- affected
firefox128 --- affected

People

(Reporter: adam.recvlohe, Unassigned)

Details

(Whiteboard: [necko-triaged][necko-priority-next])

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Steps to reproduce:

I created this jsfiddle to verify my issue: https://jsfiddle.net/adamrecvlohe/w9xa75Ld/

  • In JS create an image element
  • Set the src of the image element to a large base64 image
  • Attempt to load the image
  • See that the image does not load but errors

Actual results:

In Safari and Chrome the image is successfully loaded but in Firefox the image does not load but errors instead

Expected results:

Any significantly large base64 image should load when the image's base64 string is added as a src to an image element

I am attempting to confirm your report, but it seems I can't see a difference between the Chrome, Firefox or Safari. No image is rendered. Is the test page still valid? Is there something else I might be missing?
Thank you.

Flags: needinfo?(adam.recvlohe)

I've uploaded a large image here: https://send.vis.ee/download/c2cb30729eacd6aa/#CWgOc_1lAJaHqLLkIGN. It's about 38MB.

I have an updated fiddle here: https://jsfiddle.net/adamrecvlohe/0py9xn12/14/

If you try to upload the file, by clicking choose file and choosing the large file, it fails, which you can see in the developer console

In Chrome it works and you see the image

Flags: needinfo?(adam.recvlohe)

I can confirm this bug occurs in Nightly v127.0a1 (2024-05-10 and 2024-05-12), Beta v126.0 (RC) and ESR v115.9.1esr on Windows 10 and MacOS11. This issue does not occur in Chrome.
Image used: https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x21600x10800.png

Error displayed:
error show:72:35
error https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:72
onerror https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:123
(Async: EventHandlerNonNull)
previewFile https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:123
(Async: EventListener.handleEvent)
previewFile https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:116
onchange https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:1

Has STR: --- → yes
Component: Untriaged → File Handling
OS: Unspecified → All
Hardware: Unspecified → Desktop
Status: UNCONFIRMED → NEW
Ever confirmed: true

This is using a FileReader, so moving to DOM: File

Component: File Handling → DOM: File
Product: Firefox → Core

My understanding is that this happens only for very large data URLs, not normal images loaded via network.

Severity: -- → S3
Priority: -- → P3

The use of the FileReader is only to produce a data URL. https://searchfox.org/mozilla-central/source/netwerk/protocol/data/nsDataModule.cpp is Core::Networking.

Severity: S3 → --
Component: DOM: File → Networking
Priority: P3 → --
Summary: Large base64 images error when loaded into an image element → Large base64 data URL images error when loaded into an image element
Severity: -- → S3
Priority: -- → P2
Whiteboard: [necko-triaged][necko-priority-new]

Moving this to our priority next queue.

Points: --- → 8
Rank: 3
Whiteboard: [necko-triaged][necko-priority-new] → [necko-triaged][necko-priority-next]
You need to log in before you can comment on or make changes to this bug.