Teach you how to use CSS to track users

What can we do with it?

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

In addition, we can monitor whether the user clicked on a link or mouse hover over an element to track the user's hover link, or even to track how the user moved the mouse (in the page using the Invisible field), however, using the current method can only track the user's first click or hover, I believe, Modifying my approach will eventually enable you to track every click of a user

Finally, we can also monitor whether the user has a particular font installed, based on this information, we can track the user's operating system, because different operating systems use a slightly different font, such as Windows Calibri

And how does that work?

The common practice

With CSS You can use the URL ("Foo.bar") property to reference external resources to add images, 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 ');}

Server, the PHP script will save the timestamp when the URL is called

Browser monitoring

Browser monitoring is based on @supports Media-query, we can monitor some special properties of the browser, such as-webkit-appearance

@supports (-webkit-appearance:none) {  #chrome_detect:: After {    content:url (' Track.php?action=browser_ Chrome ');}  }

Font monitoring

For font monitoring, a new font needs to be defined, and if a font exists, the text attempts to use that font for styling, however, when the user cannot find the font on the system, the defined font is used as an alternative, in which case the browser tries to load the defined font and invoke the trace script on the server

/** Font detection **/@font-face {  font-family:font1;  Src:url (' Track.php?action=font1 ');} #font_detection1 {  Font-family:calibri, Font1;}

Hover Monitoring

For hover monitoring (based on the idea of Jeyroik), we need to define a keyframe to request a URL each time we use this keyframe

@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 ');}  }

We then use the defined keyframes to create the animation, and we can define the duration of the animation, which is the maximum time we've measured.

#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 ');}

We can optimize the monitoring of the resolution by supplementing the setting of the Keyframe

Input monitoring

Monitoring user selected a check box, we can use CSS to provide: Selected selector

#checkbox: Checked {  content:url (' Track.php?action=checkbox ');}

To monitor the string, we combine the HTML pattern attribute, which helps us to solve some basic input validation, and then combine: valid selector, the browser will request our tracking site when the input match is successful.

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

If there is no content behind the property or there is a PHP warning, this means that the value of this property is False or the user has not yet visited the page or link (this is really annoying, but you can tell the principle of these methods)

In addition, resolution monitoring is not particularly accurate, as it is currently only possible to monitor the most commonly used screen widths. Finally, it is to be said that monitoring the user's actual screen width is not as simple as imagined, because the height of the CSS monitoring is the height of the browser window, and usually due to the system panel/taskbar, the browser window is smaller than the display

Is there any way to prevent tracking using the method above?

The only way I know at the moment is to completely disable CSS (you can use a plugin like Umatrix), but it's also very expensive, without CSS, the Web page will not be as pleasing as before, or even lead to normal use, so disabling CSS is not a real choice, 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 when the Web page loads, the browser does not load the required external resources, so that it is impossible to monitor the user's personal behavior, the content loading changes can be implemented through the browser, or through plug-ins (similar to NoScript or Umatrix)

One obvious problem with this approach is that it has a certain effect on performance because the browser loads a lot of content when the page is initialized (some of it is not needed at all)