Crooked Style Sheets

Author: jbtronics

In addition to the use of JS tracking users, it has been proposed that CSS can also be used for web page tracking and analysis, translators believe that this way is more elegant, more concise, and not good shielding, worth trying a wave, learn more, you can view the warehouse address and demo

What can we do with it

We can gather some basic information about the user, such as the screen resolution (when the browser is maximized) and what browser (engine) the user is using.

In addition, we can detect whether the user click on a link or mouse hover on an element, is used to track user hover over the link, you can even track users how to move the mouse (in page USES invisible fields), however, methods that use at the moment, I can only track the user’s first click or hover, I believe, I modified my method to eventually track every click a user makes

Finally, we can also monitor whether a user has a particular font installed, and based on this information we can track the operating system that the user is using, since fonts are slightly different for different operating systems, such as Calibri for Windows

How does this work

Common practice

With CSS you can use the URL (“foo.bar”) property to reference an external resource to add an image. Interestingly, this resource is only loaded when needed (for example, when a link is clicked).

So, we can use CSS to create a selector that calls a particular UPL when the user clicks on a link

#link2:active::after {
    content: url('track.php? action=link2_clicked');
}
Copy the code

On the server side, the PHP script saves the timestamp when the URL is called

Browser monitoring

Browser monitor is based on @supports media-Query, which allows you to monitor specific attributes of the browser, such as -webkit-appearance

@supports (-webkit-appearance: none) {
    #chrome_detect::after {
        content: url('track.php? action=browser_chrome'); }}Copy the code

Font monitoring

Monitoring for font, you need to define a new font, if a font, text will try to use the font style Settings, however, when a user on the system cannot find the font, defined fonts as backup, in this case, the browser will try to load defined fonts and call tracking script on the server

/** Font detection **/
@font-face {
    font-family: Font1;
    src: url('track.php? action=font1');
}

#font_detection1 {
    font-family: Calibri, Font1;
}
Copy the code

Hover monitoring

For hover monitoring (based on Jeyroik’s idea), we need to define a keyframe that requests a URL each time it is used

@keyframes pulsate {
    0% {
        background-image: url('track.php? duration=00'); 20%} {background-image: url('track.php? duration=20'); 40%} {background-image: url('track.php? duration=40'); 60%} {background-image: url('track.php? duration=60'); 80%} {background-image: url('track.php? duration=80'); 100%} {background-image: url('track.php? duration=100'); }}Copy the code

Then, we create the animation with defined keyframes, and we can define how long the animation lasts, which is the maximum time we measure

#duration:hover::after {
    -moz-animation: pulsate 5s infinite;
    -webkit-animation: pulsate 5s infinite;
    /*animation: pulsate 5s infinite; * /
    animation-name: pulsate;
    animation-duration: 10s;
    content: url('track.php? duration=-1');
}
Copy the code

We can optimize resolution monitoring by complementing keyframe Settings

Input monitoring

To detect that the user has selected a check box, we can use the: Selected selector provided by CSS

#checkbox:checked {
    content: url('track.php? action=checkbox');
}
Copy the code

To monitor strings, we combine the HTML Pattern attribute, which helps us with some basic input validation, with the: Valid selector, which allows the browser to request our tracking site when the input matches

<input type="text" id="text_input" pattern="^test$" required>
Copy the code
#text_input:valid {
    background: green;
    background-image: url('track.php? action=text_input');
}
Copy the code

Demo

You can view a demo of the repository here. Index.html implements the above method. Visit results.php to see the result

If the property is not followed by any content or a PHP warning appears, this means that the value of the property is false or that the user has not yet visited the page or link (this is annoying, but you can see how these methods work).

In addition, resolution monitoring is not particularly accurate, as currently only the most commonly used screen widths can be monitored. Finally, monitoring the width of the user’s actual screen is not as easy as you might think, because CSS monitors the height of the browser window, which is usually smaller than the monitor due to the system panel/taskbar

Is there any way to prevent tracing using the above methods

The only way I know of right now is to disable CSS completely (you can use plug-ins like uMatrix to do this), but it comes at a huge cost. Without CSS, web pages aren’t as pleasing to look at as they used to be, or they don’t even work properly, so disabling CSS isn’t really an option unless, You’re really worried about your privacy (for example, when you’re using the Tor browser, maybe you should disable CSS)

A better solution is that the browser does not load the required external resources when the page loads, so it is not possible to monitor the user’s personal behavior. This modification of content loading can be implemented by the browser or through plug-ins (such as NoScript or uMatrix).

The obvious problem with this approach is that it has a performance impact because the browser loads a lot of content (some of which the page doesn’t need) when it initializes the page