What can a 3rd party learn about a user through only CSS and images?

Question

In its default settings, uMatrix content blocker allows CSS and images (JPG, PNG, etc) from all sources, unless denied by a site-specific block list. It also allows 1st party cookies, scripts, and multimedia.

How much can a 3rd party learn about a site visitor through only CSS and images? Assume an up-to-date standards-compliant browser that lies about :visited status.

Obviously they receive HTTP headers (IP address, userAgent, etc) and can determine some browser features through media queries. They can tell if you choose to print, and possibly how long you keep the page loaded.

I think :hover pseudo-classes could (partially) track mouse movement.

What else can be done? Are the capabilities sufficient to provide unique fingerprinting across multiple sites, effectively a super-cookie?

Answer 1

This answer might be considered as a partial answer since it's not intended to be exhaustive.

With CSS only, a 3rd party can indeed (to a certain point) fingerprint a user's browser by:

1. CSS querying by detecting some browser's unique properties (using prefixes. For example, Chrome & Safati present CSS properties prefixed with -webkit-)
2. Retrieving system fonts / Font Inspection: For compatibility reasons, web browsers have fallback fonts for each font-family:

The collection script queries a device for installed fonts by generating hidden elements on a web page. The hidden element contains a predetermined character string and for each queried font, the height and width of the hidden element is compared to the height and width of an element containing the same string but formatted in the fallback font. If the height and width differs, it is be assumed that the font is installed.

3. CSS Media Queries : Media queries can be used to gather almost the same amount of information as Window and Screen objects

Even if it's a bit out of scope, there is also "Canvas Fingerprinting":

That works by exploiting the HTML5 canvas element: when a user visits a website their browser is instructed to “draw” a hidden line of text or 3D graphic that is then rendered into a single digital token, a potentially unique identifier to track users without any actual identifier persistence on the machine.

Here is a pretty interesting piece of code that implement some CSS fingerprinting techs. And here (in chinese) a good paper on browser fingerprinting only with CSS.

Answer 2

As you are already aware, there are many ways to learn about users and their browsers using only CSS. As a result I'm just going to focus on the main aspect of your question: user tracking.

Fingerprinting is not necessary to make a super-cookie and track users because there are already plenty of non-cookie methods for tracking users. The two that come to mind are:

1. Etags (see here and here)
2. HSTS headers (see here)

Now, this would be a slam dunk if you had full control over the page, but I think that even as a third party either method of tracking (or ideally, both) would be quite doable.

Without full control over the page you'll have to rely on CSS tricks to get the browser to hit your tracking endpoints. As a quick description, HSTS tracking normally requires writing large numbers of image tags to the page, with each page from a slightly different sub-domain. This isn't possible if all the third party can do is control an included CSS file. However, there are tricks you can use to get CSS to load resources without having any control over the contents of the page (see here for one example), so I don't expect your position as a third-party should be a deal breaker for any of the methods above.

In short, ETAGS and HSTS headers both provide a way to create "super cookies" that allow you to track a user using only images or CSS. HSTS is a bit more theoretical, but ETAGS have actually been used for this purpose in the past.

I expect that, without much trouble, a 3rd party would be able to fully track users across the internet even with javascript and cookies fully disabled.