CSS-Based Fingerprinting

Website fingerprint recognition technology is worrying. It refers to collecting enough user metadata to identify the user. JavaScript provides various fingerprint recognition possibilities, combined with the IP address accessed by the server, making fingerprint recognition very common.

However, people generally don't think of CSS as a medium for fingerprinting, so it is considered to be "safe" to some extent. However, Oliver Brotchie proposed a solution to use CSS only for a certain degree of fingerprint recognition.

Consider all the @media queries we have. We can use any-pointer to test the pointer type. Imagine that for each value we request a completely unique background image from the server. If the image is requested, we know that these @media queries are true. We can start fingerprinting using a method like this:

 .pointer {
  background-image: url('/unique-id/pointer=none')
}

@media (any-pointer: coarse) {
  .pointer {
    background-image: url('/unique-id/pointer=coarse')
  }
}

@media (any-pointer: fine) {
  .pointer {
    background-image: url('/unique-id/pointer=fine')
  }
}

Combined with the fact that we can use prefers-color-scheme to test dark mode preferences, fingerprint recognition is clearer. In fact, what Oliver is most concerned about is the draft of current CSS user preference media query:

The upcoming draft not only makes this approach scalable, but also increases its accuracy. Currently, without other methods, it is difficult to eventually associate each request with a specific visitor, because the only viable way to determine its origin is to group the requests by the IP address of the connection. However, using the new draft, we can accurately identify all requests from that visitor by generating a random string and inserting it into the URL tag of each visitor.

There are more ways to do it. We can create media queries 1 pixel apart and request a background image for each query, thus perfectly guessing the visitor's window size. There may be a dozen lesser-known odd media queries, but they are very useful for fingerprinting using CSS. Using this with various @supports queries makes it possible to guess the exact browser effectively. Combined with the classic technique of testing specific local font installations, you can get a pretty good fingerprint recognition machine.

 @font-face {
  font-family: 'some-font';
  src: local(some font), url('/unique-id/some-font');
}

.some-font {
  font-family:'some-font';
}

The generated CSS code is very large (this is the Sass code that generates it), but obviously it will be greatly reduced once we can use custom properties in the URL.

I'm not too worried about this problem, mainly because I don't disable JavaScript, which already has a wider range of fingerprint recognition capabilities. In addition, there are other types of CSS security vulnerabilities, such as reading accessed links (resolved by the browser), key logs and user-generated inline styles, and what some others pointed out in another post.

However, Oliver's research on fingerprint recognition is excellent and deserves attention from anyone who knows better cybersecurity than I do.

The above is the detailed content of CSS-Based Fingerprinting. For more information, please follow other related articles on the PHP Chinese website!