{"id":195,"date":"2021-01-11T08:23:46","date_gmt":"2021-01-11T16:23:46","guid":{"rendered":"https:\/\/blog.mozilla.org\/attack-and-defense\/?p=195"},"modified":"2021-01-11T08:24:08","modified_gmt":"2021-01-11T16:24:08","slug":"leaking-silhouettes-of-cross-origin-images","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/attack-and-defense\/2021\/01\/11\/leaking-silhouettes-of-cross-origin-images\/","title":{"rendered":"Guest Blog Post: Leaking silhouettes of cross-origin images"},"content":{"rendered":"

<\/span><\/p>\n

This blog post is one of several guest blog posts, where we invite participants of our bug bounty program<\/a> to write about bugs they’ve reported to us.<\/em><\/p>\n

This is a writeup of a vulnerability I found in Chromium and Firefox that could allow a malicious page to read some parts of an image located on an origin it is not supposed to be able to access. Although technically interesting, it is quite limited in scope\u2014I am not aware of any major websites it could\u2019ve been used against. As of November 17th, 2020, the vulnerability has been fixed in the most recent versions of both browsers.<\/p>\n

tl;dr<\/h3>\n

The time that it takes CanvasRenderingContext2D.drawImage<\/code> to draw a pixel depends on whether it is fully transparent, opaque, or semi-transparent. By timing a bunch of calls to drawImage<\/code>, we can reliably infer the transparency of each pixel in a cross-origin image, which is enough to, for example, read text on a transparent background, like this:<\/p>\n

\nhttp:\/\/blog.mozilla.org\/attack-and-defense\/files\/2021\/01\/exploit.webm<\/a><\/video><\/div><\/center><\/div>\n

<\/p>\n

Background: Same-Origin Policy and Canvas<\/h3>\n

JavaScript running on a website is not allowed to read the contents of documents located on other websites. For example, your bank might have a page https:\/\/mybank.com\/get_balance\/<\/code> that the application at https:\/\/mybank.com\/accounts\/<\/code> should be able to read, but this blog certainly shouldn\u2019t. This is formalized by the Same-Origin Policy<\/a>, which allows resources that are located on a different origin from the current page to be embedded in it, but does not allow them to be read.<\/p>\n

The embedding\/reading distinction means that while I can, for example, include an image from a different origin on this page and your browser will display it for you, the page\u2014and any JavaScript running on it\u2014shouldn\u2019t be allowed to learn the image\u2019s contents. Unfortunately, there are side channels for the page to learn the existence or non-existence of an image at a URL, its size and dimensions, but if the contents of an image served from a well-known URL contain an authenticated user\u2019s private information, the contents should remain private because any third-party page will only be able to display it back to the user\u2014not read them.<\/p>\n

Canvas is an HTML feature that makes implementing this distinction tricky. A <canvas><\/code> element is kind of like an image, but it can be manipulated from JavaScript\u2014you can draw shapes, text, and other images onto it and, importantly, access individual pixels of the canvas for both reading and writing. Using the function CanvasRenderingContext2D.drawImage<\/code>, any image that can be embedded onto a page can also be drawn onto a canvas, and this includes cross-origin images as well. In order to prevent an attacker from drawing a cross-origin image onto a canvas then reading the canvas to learn what the image looks like, a canvas that has ever had a cross-origin image drawn to it is marked as tainted<\/a> and can no longer be read from.<\/p>\n

Some pixels are drawn faster than others<\/h3>\n

Pixels in an image can have varying levels of transparency, and a well-optimized image drawing library might use different code to draw an image depending on what kind of pixels it contains. There are three cases that arise naturally:<\/p>\n