The exploit allows a malicious website to steal Facebook profile pictures, the name associated with a profile, and a full list of pages the user has liked, all without requiring any interaction from the victim.
A malicious site would only need to have a cross-site login iframe that pulls data from Facebook and uses mix-blend-mode, a graphical option added to CSS3 in 2016. From there it takes mere seconds to to steal user likes and a profile name. It only takes a few additional minutes for the malicious site to reconstruct the profile picture using layers of one-pixel DIV layers.
It doesn’t just affect Facebook users either—any website that allows iframes to pull data is susceptible to the attack.
The researchers, Ruslan Habalov and Dario Weißer, say that they aren’t surprised that CSS can be exploited to steal personal data. “[With the introduction of] HTML5 and CSS3 the attack surface of browsers grew accordingly,” they said. “Consequently, it is no surprise that interactions between such features can cause unexpected behavior impacting the security of their users.”
How this side-channel attack works
Mix-blend-mode is at the core of the attack. It’s a CSS element that allows a website to stack components on top of one another in order to add effects that change the appearance of an element based on user interaction.
Rendering of a mix-blend-mode stack changes based on the color of the underlying pixel, and by knowing the render time for different colors it’s possible to determine what the pixel is displaying, which is exactly how this attack works.
“Finally, by moving this DIV ‘scan’ stack across the iframe, forcing re-renderings and measuring the individual rendering times it is possible to determine the iframe’s content,” the researchers said.
Any website that a user is logged into that allows cross-site iframes can be exploited by this attack, and the information stolen depends on what is shown in the iframe. The proof of concepts (PoCs) the researchers used allowed them to steal Facebook profile pictures easily—most iframes that allow users to log in to a site using Facebook show the user’s profile picture in the login button. Names are usually featured on the button as well, which is how that data was stolen.
Facebook provides options for iframes to display a user’s friends’ profile pictures as well as pages that have been liked. If the iframe requests that data it can be stolen the same way.
The researchers say use cases for the exploit also include leaking private images, grabbing API responses, and capturing text files from other sites. In short, it could be a serious risk with the right attacker behind the keyboard.
Protecting yourself from this side-channel CSS attack
Chrome users are already protected against the exploit—Habalov and Weißer reported it to Google in April 2017 but were beat to it by another researcher who found the same exploit on their own. Google patched Chrome against the exploit in December 2017 with version 63.
Due to error, Mozilla wasn’t notified until November 2017 and updated Firefox Quantum to protect against the exploit with version 60, released in mid-May 2018.
Users of both browsers are encouraged to update immediately to prevent falling prey to this exploit. The PoC may make it seem relatively harmless, but there’s a lot of potential for it to do far worse things to your private data.
The big takeaways for tech leaders:
- A cross-channel CSS exploit could allow a malicious website to steal private data, such as profile pictures, names, and Facebook likes, from iframes.
- The exploit has been patched in Firefox and Chrome, the two vulnerable browsers. Users of both are urged to update to the latest versions as soon as possible.