Using HTML+CSS to track mouse movement

As users become more privacy-conscious and take more precautions against online tracking, they are turning to ad blockers and script blockers to block JavaScript tracking scripts. Now, researchers have discovered a new way to use HTML and CSS to track the mouse movements of website visitors and bypass tracking protection.

1 New attack techniques

Most online tracking is done through JavaScript scripts that are loaded into websites and ads, which allows advertisers and websites to track where you go online, how you use websites, or other online behaviors.

These scripts can be blocked using an ad blocker, browser tracking protection (like Firefox’s content blocking), or by blocking JavaScript altogether.

Content Blocking in Firefox

Researchers have discovered a new way to track website visitors' mouse movements on web pages without using any JavaScript, using only HTML and CSS, making this tracking very difficult to block.

Security researcher Davy Wybiral demonstrated on Twitter how a website can use HTML and CSS to observe mouse movements in one browser window in another browser window.

Wybiral achieved this by creating a grid of HTML DIVs that leveraged CSS: when the mouse moved over a box on the grid, the hover selector could request a new background image. Because the image requests are done in the background, the browser does not indicate that a connection is being made, so all requests are hidden from the user.

HTML source code

When a user hovers over a box and requests a new background image, the script records the mouse hover position. A user in another browser can then use the /watch URL to monitor in real time.

This technique can be used for a variety of things, including identifying hot spots on a website and studying user interfaces. In addition, the technology can be used to perform dynamic (gait) analysis and gain insights into other visitor behavioral characteristics.

The researchers also said that in addition to the hover selector, other selectors can be used to track browser behavior.

2 Other CSS tracking techniques

The method discovered by Wybiral isn't the only one showing how CSS and HTML can be used to track website users.

Last year, a project called CrookedStyleSheets was released that allows websites to collect user information such as screen resolution, the browser being used, information about when the user clicks on a link, and infer what operating system the user is using based on supported fonts.

As with Wybiral's approach, this is all done using HTML and CSS, with no JavaScript used.

Summarize

The above is what I introduced to you about using HTML+CSS to track mouse movement. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!