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.
I’m usually the one to grumble about laziness or poor planning. Flash was nifty when it first arrived (annoying at times, but very nifty), but it turned out to be security Swiss cheese. SMTP was built before real public access to Internet, but it should have been immediately redesigned at that point rather than allowed to balloon into billions of work hours combating junk mail.
However it’s difficult to fault folks like Eric Meyer over failing to foresee this.
Of course :hover is completely irrelevant on mobile, and there’s every indication that voice will be the preferred way to interact with our devices in the coming years.
> voice will be the preferred way to interact with our devices
...to speak with an agent, press or say four
Self-help payments menu. Enter or say the amount you're paying.
I'm sorry; I didn't get that. Enter or say the amount you're paying.
Please read the following in a lispy nerd voice. Well, actually, CSS3 is turing complete (https://stackoverflow.com/questions/2497146/is-css-turing-complete) making it as much a programming language as anything else.
Was this inspired by the css only chat that someone had recently posted? It uses the same :hover and http image background request trick
Thank you for being one of the few does to not saying “using only CSS”. This requires a server that most certainly needs code and therefore will never be “only CSS”.