Parckwart’s Computer Stuff

⟵ Home page

Published: January 12, 2017

Tracking Browser Window Size Using CSS

It should be quite common knowledge that JavaScript and anonymity on the web don’t go well together. However, there are some dangers in CSS as well. Many properties of a user’s device can be gathered using nothing but CSS. A few of these properties combined could potentially be used to create a unique fingerprint.

Users of Tor Browser will probably be familiar with the warning that comes up if they maximize their browser window. It warns them about the potential danger of being tracked using their monitor size. In my opinion, this warning should already appear when they change the window size at all, because it can be collected by the website they’re visiting. In fact, it might be even worse if the window is not maximized because then, the size is selected by the user completely arbitrarily, resulting in a pretty likely very unique value.

To demonstrate this, I’ve set up a demo page that tracks the user’s webbrowser window size and displays it. All in CSS.

This works by using media queries. Here’s the example code, which checks if the window width is 500 pixels:

@media only screen and (width: 500px) {
	#x { background-image: url("/files/nuclear_waste/css_tracking/x/500.png") }
}

This just means: If the screen width is 500 pixels, set the background image of the DOM element with the ID x to 500.png. This causes the browser to download the file 500.png from the server, thereby exposing the screen width.

If you repeat this for every possible screen width, you can track them all. This results in quite verbose code, but I am not aware of any better way.

And this is just a small demo. There is much more JavaScript can query: From the orientation in which the user is holding their smartphone to the update frequency of their display. However, Tor Browser protects you from the tracking of most of these other things.