1906512 - Firefox 127 on Android allows websites reading content of cross-origin images

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Khiem Tran]

User Agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Steps to reproduce:

Publish these sample code lines as an online .html file publicly:

<img src="https://vulnerabledoma.in/rgb.png" width=100 height=100 />

<canvas id="canvas"></canvas>

<div id="data"></div>

<script>

var data = document.getElementById('data');

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var img = new Image();

img.src = 'https://vulnerabledoma.in/rgb.png';

img.onload=function(){

ctx.drawImage(img, 0, 0);

data.innerHTML+='ctx.getImageData(0,0,1,1).data: ' + ctx.getImageData(0,0,1,1).data + '<br />';//red

data.innerHTML+='ctx.getImageData(1,0,1,1).data: ' + ctx.getImageData(1,0,1,1).data + '<br />';//green

data.innerHTML+='ctx.getImageData(2,0,1,1).data: ' + ctx.getImageData(2,0,1,1).data;//blue

}
document.write(ctx.getImageData(0,0,1,1).data);

</script>

For example:

https://akhiemtestblog.blogspot.com/2024/07/var-data-document.html?m=1

Actual results:

Firefox 127 on Android allows websites reading content of cross-origin images.

Expected results:

I read this just can't.

Comment 1

[Daniel Veditz [:dveditz]]

I don't seem to see what you see. When I run this I get "Uncaught DOMException: The operation is insecure." when your code tries to access the tainted canvas.

In the output area the "0,0,0,0" comes from the line after the onload function definition, which runs immediately when the canvas is empty and untainted. The onload function runs after that when the image is loaded, and then the "data.innerHTML" lines fail because of the security exceptions. This seems to be correct behavior.

Comment 2

[Khiem Tran]

I would ask did you try it on Android?

Firefox on Android shows a rendered image from the cross-origin image:

https://akhiemtestblog.blogspot.com/2024/07/var-data-document.html?m=1

Comment 3

[:Gijs (he/him)]

I just tried on Android and also can't reproduce. Can you provide a screencast?

Comment 4

[Daniel Veditz [:dveditz]]

I also tried it on Android, both Nightly and Release

Comment 5

[Khiem Tran]

Please have a quick look at the video of demonstration:

https://drive.google.com/file/d/18BfigXl0lhx3W3ZKtjxWw12Su0ooSNKY/view?usp=drivesdk

From the code lines, you will see the displayed image (the tiny one) is from the reading back the cross-origin image code lines rendering the cross-origin image, is not from the cross-origin image actually.

Comment 6

[:Gijs (he/him)]

(In reply to Khiem Tran from comment #5)

Please have a quick look at the video of demonstration:

https://drive.google.com/file/d/18BfigXl0lhx3W3ZKtjxWw12Su0ooSNKY/view?usp=drivesdk

From the code lines, you will see the displayed image (the tiny one) is from the reading back the cross-origin image code lines rendering the cross-origin image, is not from the cross-origin image actually.

Your video seems to show Chrome, not Firefox?

Also, the small image is a result of calling drawImage. This is allowed for cross-origin images in all browsers. The security issue would appear if you could then extract information about that image using getImageData (which the page does try, but fails, to do, apparently also in Chrome with Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.).

At this point we've checked this in Firefox on both Android and Desktop, as well as Chrome, and they behave the same, and there isn't a security problem, and you don't seem to understand what the security features are that are involved, and attached videos for Chrome when this is the Firefox bug tracker. So I'm going to close this as invalid. Please take more care in your reports.