Matt Traudt

An onion (v3) (SAT [What's this?]) a day keeps the bad guys away | About me

How CSS Alone Can Help Track You

Posted on 04 Sep 2016 by Matt Traudt

Last upated 29 Jan 2019 at 9:44 pm
permalink

A common question people ask when they first start using the Tor Browser Bundle is "why does the browser recommend I don't change my window size?" Resonable question. And if you disable JavaScript, you may think that's enough to make window size irrelevant. Not quite.

Jan 2019 update: Add section after "Solutions?" for how to do this with <picture>.

April 2018 update: I noticed the broken demo link, made a new (hopefully better) demo, and link to it.

CSS Features

  1. @media rules can conditionally apply styles
  2. Certain attributes can be URLs.

@media rules are commonly used to make a website "responsive," which is web design speak for "look good on any device." A common condition to care about is the width of the window. If the width is relatively small, its relatively safe to assume the user is using a mobile device. More importantly, with a small width it would be nice to change that top menu bar into a collapsed hamburger button and to change the page layout from two columns to one.

Additionally, some CSS attirbutes can point to URLs. This is commonly used if a resource doesn't reside on the current domain. For example, fonts and images.

The Attack

See it in action here.

Let's have our stylesheet include a ton of @media lines that set the page background to a different URL based on the width of the page.

@media only screen and (min-width: 500px) { #W {background-image: url(w-0500.png);} }
@media only screen and (min-width: 501px) { #W {background-image: url(w-0501.png);} }
@media only screen and (min-width: 502px) { #W {background-image: url(w-0502.png);} }
@media only screen and (min-width: 503px) { #W {background-image: url(w-0503.png);} }
[...]
@media only screen and (min-height: 2997px) { #H {background-image: url(h-2997.png);} }
@media only screen and (min-height: 2998px) { #H {background-image: url(h-2998.png);} }
@media only screen and (min-height: 2999px) { #H {background-image: url(h-2999.png);} }
@media only screen and (min-height: 3000px) { #H {background-image: url(h-3000.png);} }

Now all the attack needs to do is watch his logs to see what images are requested. If you have a window size different than most other people's, then you'll stand out. And if the attack owns (or compromises) other websites that you use in the same browsing session, he could track you across websites.

The best part: unless you are actively looking for this by checking the source of every page (and the resources every page loads), then you may not even notice this happening to you. The demo changed the background image, which was painfully obvious. The attacker could change the image of a non-dispayed element.

div#track_users { display: none; }
@media only screen and (min-width: 100px) { #track_users {background-image: url(100.png);} }
[...]

You'll never see it coming.

Solutions?

You could find a way to disable CSS. But this will make the vast majority of sites out there difficult to browse.

Maybe privacy-orientated browsers such as the Tor Browser Bundle should find a way to ignore @media. Or maybe only ignore @media when used with window size options. Or maybe interact with @media options as if the user's resolution is in some short hard-coded list of possible resolutions.

I don't know if any of those possible solutions are possible. I also don't know how hard they would be to implement. My Firefox development experience is rather limited. So for the time being, if your threat model calls for it, leave the Tor Browser window size alone.

CSS Not Required Either?

This Reddit post led me to this onion service which has the following interesting bit of HTML5.

<picture> 
    <source media="(min-width: 1200px)" srcset="pixel.php?screensize=large">
    <source media="(min-width: 992px)" srcset="pixel.php?screensize=medium">
    <source media="(min-width: 768px)" srcset="pixel.php?screensize=small">
    <img src="pixel.php?screensize=tiny" style="width:auto">
</picture>

If browers will pick different source images for this <picture> tag even when CSS is disabled, then this is a technique to accomplish exactly what I've demonstrated above even without CSS.


Tags: tor-browser, tor, css, attack