CSS is so powerful that it is possible to get anonymous Facebook user information

Several new additions to the web standards Cascading Style Sheet (CSS) are so powerful that a security researcher has used them to decode anonymous people (de-anonymize) on a demo page, revealing usernames and images. Facebook photo as well as whether they like a page on Facebook.

Information leaked in this way can help advertisers attach IP addresses or advertising records to real people, seriously violating user privacy. The leak is not only on Facebook but also affects every other page if content is embedded through another website with an iframe.

The weakness lies in the browser, not the website

In essence, this weakness lies in implementing CSS's feature called mix-blend-mode of the browser, added to the CSS3 web standard in 2016. Mix-blend-mode allows developers to stack elements (components) on each other and add effects to control how they interact with each other.

These effects are inspired by photo editing software like Photoshop, Gimp, Paint.net . and blended together. For example, some familiar names like Overlay, Darken, Lighten, Multiply .

Mix-blend-mode feature supports 16 blending modes, full support on Chrome (from v49) and Firefox (from v59) and partial support on Safari (from v11 on macOS and v10.3 on iOS) .

The researcher uses a DIV stack to rebuild iframe content

In the newly published study, Ruslan Habalov worked at Google in Switzerland and colleagues revealed how to use CSS3 mix-blend-mode to get information from the page. This technique relies on coaxing users to a malicious page that embeds an iframe to another page. DIV layers are stacked with blending mode on iframe. These layers are 1x1 pixels in size, meaning only 1 pixel of the iframe.

Depending on the time required to render the entire DIV layer, the attacker determines the color for that pixel on the user screen. By slowly moving these DIV layers 'scanning' through an iframe, it will know the content of the iframe. Often an attacker does not have access to iframe content due to the browser and remote sites that allow embedded content via iframe that has anti-clickjacking and other security measures.

The two demos are extremely impressive

On the 2 demos posted on the Internet, the researchers obtained the names and representative images (low resolution) and the pages that they liked by Facebook users. It only takes about 20 seconds to get the user name, 500 milliseconds to know if he likes or dislikes a page and about 20 minutes to get the avatar.

The attack is easy to cover because the iframe can be easily moved out of the screen or hidden behind another element (see the demo below, behind the cat image). It is not difficult for users to stay on the page for a few minutes because just a short question or an article is enough.

The demo does attack with CSS taking user information

A patch for Chrome and Firefox is available

The two researchers reported bugs to Google and Mozilla, and the bug was fixed in Chrome 64 and Firefox 60. 'Errors are fixed by vectorizing the blending mode calculation'. Implementing CSS-mix-blend-mode on Safari is not affected by the vectorized capital.

See more:

1. Using only HTML and CSS code, one can create a masterpiece full of aesthetics like this
2. 5 interesting HTML and CSS features to look forward to in 2018
3. Top 5 popular CSS Framework that you should keep in mind