Q&A How CSS Alone Can Help Track You


Level 40
Jan 9, 2020
As some users here are confused and mess with different kind of "privacy" extensions, here another way circumstances that:

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 attributes 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-displayed element.

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

This post is from September 2016, so expect a lot more techniques nowadays like server-side tracking like Google Analytics Proxy using Nginx to bypass Adblock and other blockers from 2018