translator ： Van Gogh Huang https://juejin.cn/post/6887478219662950414

Tracking users in a browser leads to repeated discussions about privacy and data protection . similar Google Tools like analysis can capture almost everything you need , Including sources , Language , equipment , Stay time and so on .

however , Want to get some interesting information , You may not need any external trackers , You don't even need to JavaScript. This article will show you , Even if users disable JavaScript, You can still track user behavior .

How trackers usually work

Usually , This kind of tracker analysis tool should be used to JavaScript. therefore , Most of the information can be easily read , And it can be sent to the server immediately .

That's why there are more and more ways to block trackers in browsers . similar Brave Browser Or some of them chrome The extension prevents the tracker from loading , for example Google analysis . One of the tricks is , for example Google Analysis is always integrated from the outside , One from Google CDN Of JavaScript Code . Embedded URL It's always the same , So it's easy to stop it .

So the tracker always uses JavaScript What to do . Even if you stop URL Limits the tracker , Website owners may be able to JavaScript The way the code is embedded in the page continues to work . The most powerful protection is to ban JavaScript, Although it may come at a very high price .

Last , We can still not use JavaScript Tracking something , Instead, use some CSS skill . Of course CSS Not for tracking , Let's get started .

Find device type information

Media query should be every web Developers know . With this , We can get CSS The code only executes under certain screen conditions . So we can do it for smartphones or tablets and so on , Write your own query criteria .

All of us CSS The magic behind the trackers is their property , For example, we can put a paragraph URL As attribute value . A good example is background-image Properties of , It allows us to set a background image for an element . This picture starts with a paragraph URL obtain , And in the process of execution , It's a priority request , So I'm going to tell this URL Address ： background-image: url('/dog.png'); Send a GET request .

But in the end , No one forced us to make sure that this URL Links do get access to images . The server doesn't even need to respond to requests , But we can still respond GET request , Enter data into the database .

const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
app.get("/mobile", (req, res) => {
console.log("is mobile")
res.end()
)}
app.listen(8080)
Copy code

As for the back end , I use Express.js As a server . It provides a simple HTML Website ; If the access device is a smartphone , It will call mobile route . And our backend is the only one that uses JavaScript The place of .

@media only screen and (max-width: 768px) {
body {
background-image: url("http://localhost:8080/mobile");
}
}
Copy code

In our index.html In file , We have the top one CSS Code . Only when the user device matches the media query , Just ask for a background picture .

Now if a smartphone visits this page , The media query will execute , And send a request for a background picture , At the same time, the server will output that it is a smart phone . These operations are completely unused JavaScript.

And because we don't send a picture in response , There will be no change in the content of this website .

Find the operating system information

Now it's getting crazier , We can roughly find the fonts that the user's operating system supports through it . stay CSS in , We can use a variety of backup options , let me put it another way , You can specify multiple Fonts . If the first one doesn't work on the system , The browser will try the second .

font-family: BlinkMacSystemFont, "Arial"; When I embed this code in our website , my MacBook Use the first apple standard font , This font can only be used in Mac OS Upper use . When in my life Windows PC On ,Arial Normal use .

When using Fonts , We can define a custom font and where to load it from .Google Fonts work the same way , If we want to use a custom font from somewhere , You have to load it from the server first . And we can use fonts many times .

 @font-face {
font-family: Font2;
src: url("http://localhost:8080/notmac");
}
body {
font-family: BlinkMacSystemFont, Font2, "Arial";
}
Copy code

Here we are for all body Some of them set up Fonts . Logically speaking , You can only use one font . So that MacBook On , Using the first font , The system's own font . Similar to Windows On other systems in the world , The system checks whether the font exists . Of course , There must be no , So try the next font we define ourselves . It still has to be loaded from the server , So our CSS The code will trigger again GET request .

After all Font2 Not a real font , So we continue to try , It will eventually use Arial typeface . For all that , We can still do it without user awareness , Use a reasonable font .

Trace element information

up to now , What we do is when users arrive at the site , Analyze the information immediately . Of course , We can also use it CSS Respond to individual events .

As shown below , We can use the following example , To analyze mouse over or activity events .

<head>
<style>
#one:hover {
background-image: url("http://localhost:8080/one-hovered/");
}
</style>
</head>
<body>
<button id="one">Hover me</button>
</body>
Copy code

When the mouse hovers over the button every time , It sets the background image over and over again , One GET The request goes with it .

We can when the button is clicked , Do the same thing . stay CSS in , This is the event .

<head>
<style>
#one:active {
background-image: url("http://localhost:8080/one-clicked/");
}
</style>
</head>
<body>
<button id="one">Click me</button>
</body>
Copy code

There is also a series of other events . for example , Hover events apply to almost every element . So in theory , We can track every user's behavior .

Hesitation timer

Use more code , We can combine these events and learn more , Not just what happened .

For many webmasters , More interested in , How long does the user hesitate to see or hover over an element before clicking on it . Through the following code , We can measure the time it takes for a user to hover and click .

let counter;
app.get("/one-hovered", (req, res) => {
counter = Date.now();
});
app.get("/one-active", (req, res) => {
console.log("Clicked after", (Date.now() - counter) / 1000, "seconds");
});
Copy code

Once the user hovers , The timer will start . Last , We can work it out until a few seconds have passed .

You might think that because it's embedded in CSS In the code , The statistics may not be accurate , But that's not the case . Because the size of the request is very small , And act on the server immediately . I tried several times and measured the time , The final measurement is very accurate .

It's amazing , isn't it? ？

Make the whole function more beautiful

In order not to be found , Use inconspicuous URL It's very meaningful . Last , Everyone can see the full front-end code .

You can also use your own keywords , Instead of a few particularly prominent routing words . Last , Front end and back end URL Must match .

For the example above , I always use my own routing as GET request . It's very clear . A more elegant way is to use URL Query for , This is in CSS It also applies to .

@font-face {
font-family: Font2;
src: url("http://192.168.2.110:8080/os/mac");
/* or: */
src: url("http://192.168.2.110:8080/?os=mac");
}