With the growth of Internet users, there has been a steady rise in online analytics companies seeking to profit from users' habits, to serve them personalized ads.
Companies are bent towards collecting as much data as possible from their users (cough Google); as a privacy-minded person, in order to protect yourself from trackers, you must first understand how they work.
Today, we'll be creating a simple tracker using a simple 1x1 image file, and nodejs. In part two we will look into leveraging the power of javascript to better track our users.
But first...
Before creating a tracker, I must caution you that we are creating a very basic tracker which can easily be blocked. In real life, analytics companies employ clever tactics to make sure that their tracker sticks. They are not looked into in this tutorial.
Also, the purpose of this tutorial is to help you to gain insight into how companies manage to collect and sell your data.
Coding the tracker
Start by initializing an empty npm repository
npm init -y
Install express and cookie-parser
npm install express cookie-parser
Done! We only need two dependencies to make a basic tracker.
Now create a file called main.js and put the following into it:
"use strict"
const express = require("express");
const cp = require("cookie-parser");
const app = express();
const crypto = require("crypto"); // To generate random userIDs
let userData = {}; // This will hold all the tracking data of users. Use a database in production
app.use(cp());
That's done. Now let's create a GET route for /image
app.get("/image", (req, res)=>{
const websiteVisited = req.query.site; // URL of the website that the user visited.
let userID = req.cookies.uid || crypto.randomBytes(8).toString("hex"); // userID used to identify the user. Create random userID if doesn't exist.
userData[userID] = userData[userID] || {visits: {}}; // If `userData` doesn't have an entry for `userID`, create it
userData[userID].visits[websiteVisited] = (userData[userID][websiteVisited] || 0) + 1; // Increment the URL visited by one.
console.log(userData[userID]); // See the data collected.
res.cookie("uid", userID, {maxAge: 60 * 60 * 24 * 365}) // Expire the tracking cookie after 1 year.
res.sendFile(__dirname+"/tracker.png");
});
Put that image (renamed "tracker.png") in the project root. ie. where your package.json is.
Finally, start the server
app.listen(8080);
Testing it
To test your nifty little tracker, create an HTML document and reference your tracking image, like this:
<img src="http://localhost:8080/image?site=test.com" />
Notice the ?site=test.com query parameter. It's used to let the tracker know which website you're visiting.
Visiting any website with your tracker in it will make the browser GET /image. The browser will send the "uid" cookie along with the "GET" request. This allows the server to log your visit to the site present in the site query parameter.
As you can see, simply requesting a 1x1 image is enough to let companies gather what websites you're visiting, and how often. Imagine knowing the specific topics of each website; you could build out a map of your users' interests simply by matching the visited websites with their specific topics.
Next Steps
To improve this tracker, you could also collect the useragent of the browser, along with other headers, to build a reasonably accurate image of your client. Once this is done, you can also track your clients without cookies!
That, however is out of the scope of this tutorial.
Moreover, instead of sending the website url in plain sight, you could send back a website ID that could be translated to the website itself in the backend.
Thanks for reading till the end. If you are new to my blog, consider reading my other posts to get up to speed with privacy and the likes.
Continue the tutorial, read part two which shows how to use a script to capture even more accurate data using <script> tags
Cheers!