CSS tracking trick can monitor your mouse without JavaScript

A security researcher has demoed a new way to track web visitors’ mouse movements even when they’re using ad blockers or plugins that block JavaScript.

As explained on Twitter by Davy Wybiral and in conversation with Bleeping Computer, this works by exploiting the CSS hover effect, which can be used to activate a visual effect when the user’s mouse moves over it. If that visual effect is used to loading images from a remote server, he realised he could use it for tracking movement:

It occurred to me that you can remotely monitor the cursor location without JavaScript by using some CSS :hover selectors to change hidden background images (causing a GET request).

As the mouse moves over different areas of an invisible HTML grid on the page, different background images are requested from the server. The server owner can look at the names of the images being requested and map them to the different parts of the grid to see how the user’s mouse moved over the page.

The background images don’t need to be shown to the end user, leaving them unaware of the mouse tracking. It should even work against the privacy-focussed Tor browser, Wybiral believes. Using it wouldn’t be entirely straightforward. However:

The browser won’t reload the background image so this version only tracks the movement on the first :hover [in each element of the grid] … but… Since the request is chunked the server can send more CSS to add new :hover selectors each time one triggers.

In the demo, this could even be used in real time. Why would an advertiser care? Because mouse movements tell them a lot about what interests users on pages, including how long they spent on different elements when performing actions such as scrolling.

Moreover, :hover was not the only CSS selector that could be used in this way with :focus another possibility, he said.

The technique is intriguing because HTML and CSS (Cascading Style Sheets) aren’t programming languages and don’t usually figure in conversations about tracking. The fancy tricks, interaction and programming that turns static web pages into apps is the domain of the web’s third major language, JavaScript.

That puts JavaScript at the frontline of tracking, which is why adblockers and privacy plugins offer the option to block it at the risk of disabling some page elements.

Wybiral’s technique is like an ad-oriented version of the hypothetical notion (we hope) of keylogging passwords using CSS, another idea that’s been doing the rounds.

At first, it sounds like a lot of effort to capture data this way, and it would still need interpretation. It would also be easy to spot in source code. But the fact it would bypass today’s blockers might give it legs.

Alternatively, website owners already have plenty of established ways to tracks users that inventing a new one seems unnecessary.