Teach you how to use CSS to track users

What we can do with it

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

In addition, we can monitor whether the user clicks on a link or hovers over an element to track the link the user hovers over, or even how the user moves the mouse (using invisible fields on the page) , however, with my current method I can only track the user's first click or hover. I believe that modifying my method will eventually allow me to track every click of the user

Finally, we can also monitor the user Whether a special font is installed. Based on this information, we can track the operating system used by the user, because the fonts used by different operating systems are also slightly different, such as Calibri in Windows

How is this implemented?

Common approach

With CSS you can add images using the url("foo.bar") attribute to reference an external resource. Interestingly, this resource is only loaded when needed (for example , when the link is clicked)

So, we can use CSS to create a selector, and when the user clicks on a link, a specific UPL

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

server will be called, and the php script will Save the timestamp when calling the URL

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. If a font exists, the text will try to use the font for style setting. However, when the user cannot find it on the system When the font is reached, the defined font will be used as a backup. In this case, the browser will try to load the defined font and call the tracking 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 jeyroik's idea), we need to define a keyframe, and each time we use this keyframe, we must request a URL

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

Then, we use the defined keyframe to create animation, we can Define the duration of the animation, which is also 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');
}

We can optimize the resolution monitoring by supplementing the keyframe settings

Input monitoring

Monitoring When the user selects a check box, we can use the :selected selector provided by CSS

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

In order to monitor the string, we combine the HTML pattern attribute, which can help us solve some basic input validation, and then Combined with the :valid selector, the browser will request our tracking site when the input matches successfully

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

If there is no content after the attribute or a php warning appears, it means that the value of this attribute is false or The user has not visited the page or link (this is really annoying, but you can know the principles of these methods)

In addition, the resolution monitoring is not particularly accurate because currently only the most commonly used screen widths can be monitored . Finally, I want to say that monitoring the user's actual screen width is not as simple as imagined, because the height monitored by CSS is the height of the browser window, and usually due to the system panel/taskbar, the browser window is smaller than Monitor

Is there any way to prevent tracking using the above method

Currently the only way I know of is to completely disable CSS (you can use a plugin like uMatrix to do this), but it comes at a cost It's also huge. Without CSS, web pages wouldn't be as pleasing to the eye as before, and might even become unusable. Therefore, disabling CSS isn't really an option unless you're really worried about your privacy (for example, when you're using Tor Browser, maybe you should disable CSS)

A better solution is that when the web page is loaded, the browser will not load the required external resources, so that it is impossible to monitor the user's personal behavior , this modification of content loading can be achieved through the browser, or through a plug-in (similar to NoScript or uMatrix)

The above method also has an obvious problem, that is, it will cause a certain impact on performance Impact, because the browser will load a large amount of content when initializing the page (some content is not needed by the page at all)

The above is the detailed content of Teach you how to use CSS to track users. For more information, please follow other related articles on the PHP Chinese website!