Security News New CSS Mix-Blend-Mode Feature Can Reveal Your Browsing History

[Exterminator]

A new CSS feature added in Chrome, Firefox, Opera, and Safari can reveal the links a user has visited in the past if they're stored in their browser's history.

The problem of CSS leaking user history was discussed before, more precisely around the turn of the decade. Security researchers realized that they could use the getComputedStyle API function present in all browsers to detect how the user's browser colors a link inside a page, if the site used "a:visited" CSS selectors to visibly mark previously visited URLs.

Browser makers have somewhat addressed this issue by making the attack more costly to carry out, with users required to click on each link.

Zalewski leaked user browser history via CSS in the past
One of the people who created a proof-of-concept demo for this type of attack was Google engineer Michal Zalewski. This happened in 2013, and Zalewski concluded that such attacks were impractical and hard to pull off.

One year later, in 2014, Zalewski published new research on this topic that relied on overlying hundreds of semi-transparent links (< a > element) on top of one another.

This trick relied on computing tiny color quantization errors that occurred inside the browser, allowing an attacker to detect if the user has visited any of the links. This trick required the user to click on this stack of overlaid elements.

Zalewski predicted the attack in 2014
Browser vendors quickly mitigated Zalewski's attack by improving the accuracy of color quantization when two HTML elements overlapped. At the end of his 2014 study, Zalewski added a small warning:

“ There is an upcoming CSS feature called mix-blend-mode, which permits non-linear mixing with operators such as multiply, lighten, darken, and a couple more. These operators make Boolean algebra much simpler, and if they ship in their current shape, they will remove the need for all the fun with quantization errors, successive overlays, and such. That said, mix-blend-mode is not available in any browser today. ”

Since his 2014 research, mix-blend-mode has been added in Firefox (v47), Chrome (v49), Chrome for Android (v51), Android Browser (v51), Opera (v39), and is partially supported in Safari (v9.1) and iOS Safari (v9.2). IE and Edge do not support this feature yet.

This new CSS utility, called mix-blend-mode, was created to allow developers to overlay HTML elements on top of one another using effects like Multiply, Darken, or Lighten, as seen in image editing software like Photoshop.

Yesterday, Zalewski published a new proof-of-concept demo for his previous research, one that replaces the hundreds of overlaid semi-transparent links with links that use the CSS mix-blend-mode feature.

"A single click in that whack-a-mole game will reveal the state of 9 visited links to the JavaScript executing on the page," Zalewski explains his findings. "If this was an actual game and if it continued for a bit longer, probing the state of hundreds or thousands of URLs would not be particularly hard to pull off."