Welcome back.
In part one we created a simple but powerful tracker using a 1x1 image file. Today, we'll use a <script>
to better track our users.
Setup
There is a really cool javascript library called fingerprintjs2 that can uniquely identify a browser with amazing accuracy. Start by going to this CDN link and copy-pasting the entire code into a new script called tracker.js
// . . .
!function(e,t,a). . .
Add the following below all that code:
function getFingerprint(cb){Fingerprint2.get(function(m3){cb(Fingerprint2.x64hash128(m3.map(function(m3){return m3.value}).join(''),31))})}
In essence, this function will convert browser features into a hash. This hash is a browser fingerprint and is not likely to change
With just this script. You will be able to identify your users with more than 97 accuracy! Without cookies!
Usage
An example use of this script could be like this:
window.requestIdleCallback(function() {
var fingerprint = getFingerprint();
var url = location.href;
fetch("http://localhost:8080/collector", {body: {fingerprint: fingerprint, url: url}, method: "POST"});
})
And on the server:
// Get the "cors" package to allow any website to make xhr requests to your server
const cors = require("cors");
// Create /collector route and enable CORS
app.post("/collector", cors(), (req, res)=>{
const {fingerprint, url} = req.body;
// Save `url` to `fingerprint`
users[fingerprint].push(url);
res.end();
});
Let's understand how this method is better than the method in the previous video
- There is no need to depend on cookies.
- It is very difficult to change your fingerprint. You can remove cookies from your browser. But fingerprints stick indefinitely
- The script can send back information like how long the website is used, and the exact url to the website.
So that's it. If you haven't seen part one, learn how to use images to track people.
Once again, do not use this for malicious purposes. This is for your education only.
Cheers