Memory Heap Base64-Encoded Image Firefox Browser
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: alisyarief.404, Unassigned)
References
Details
(Keywords: reporter-external, Whiteboard: [reporter-external] [client-bounty-form] [verif?])
Attachments
(1 file)
|
71.92 KB,
text/html
|
Details |
Memory Heap Base64-Encoded Image Firefox Browser
Attribute img element is set to a base64-encoded representation image. When the page is loaded, Firefox Browser will decode base64-encoded image data and display in page.
Repro Steps
macOS Mojave : 10.14.6 (18G9323)
Firefox Version : 108.0.1 (64-bit)
Large number object image and sets their src attributes to base64 encoded images which are stored on the heap, Memory Heap will continue to grow in size until it run out of available memory.
File Script in Attachment
Video POC : https://drive.google.com/file/d/1q6xUsA2pmF7_rYjKKBJzYbBpRxgr7rgn/view?usp=sharing
Reference : https://pqina.nl/blog/convert-an-image-to-a-base64-string-with-javascript/
Thanks
|
||
Comment 1•3 years ago
|
||
This is a valid thing to do according to web specifications, and when an unreasonable page does just about any allowed thing tens of thousands of times it will use a lot of resources. You could do the same thing with images loaded over the network, too (if you're going to have a malicious server it could come up with URLs that are just as long).
Most modern browsers have taken the approach to give pages what they request and let the OS kill them when they ask for too much. They are architected around the ability for web content processes to die without bringing down the entire browser. There may be ways to improve the tradeoffs in Firefox, but that is better discussed in the open than in a security bug.
|
||
Updated•3 years ago
|
|
||
Updated•3 years ago
|
|
|
||
Comment 3•3 years ago
|
||
The test case does use up an enormous amount of memory in the content process.
|
||
Updated•2 years ago
|
|
||
Updated•1 year ago
|
I ran into a similar issue where I simply replace the src of an existing element in the DOM.
It is a much slower process (takes hours). Edge/Chrome does not show an increase in RAM:
<html>
<head>
<script>
function generateRandomBase64Image() {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions
canvas.width = 200;
canvas.height = 200;
if(ctx == null) return ""
// Fill the canvas with a random color
ctx.fillStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw some random shapes
for (let i = 0; i < 10; i++) {
ctx.fillStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
ctx.beginPath();
ctx.arc(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 50,
0,
Math.PI * 2
);
ctx.fill();
}
// Convert the canvas to a Base64 string
return canvas.toDataURL('image/png');
}
setInterval(() => {
document.getElementById("swapper").src=generateRandomBase64Image()
}, 50)
</script>
</head>
<body>
<img src="" id="swapper"/>
</body>
</html>
My results:
Firefox 131
00.00h 37MB
01.15h 127MB
03.00h 228MB
Edge (latest)
00.00h 28MB
01.15h 30MB
03.00h 33MB
Description
•