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:
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.
:hover was not the only CSS selector that could be used in this way with
:focus another possibility, he said.
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.