Browser fingerprint
A project to check the working of browser-fingerprinting, a technique used to uniquely identify devices and related accounts
From my previous understanding on how the web works(before fingerprint devices) I assumed that opening an incognito tab would help me stay incognito in terms of advertisement trackers, price trackers, youtube search history etc. However while I was browsing I came across this not so strange phenomenon when I tried searching for a product online in incognito tab and immediately found the product ads on the feed of my instagram.It could have been cookies/local storage, however I know that incognito would create a fresh browser instance and cookies and trackers would not be stored in it,also usually tabs are sandboxed and there would no link between two tabs.
Another example of this was, I was visiting a youtube video in incognito mode and even after watching it,closing the window and reopening the video in an incognito browser, I find the red seeker to be placed until where I have watched the video. It was weird, initially I could not understand on how incognito browser is keeping a track of the activities without cookies/session/local storage especially since a new instance is being created everytime, what is this wizardry!? Then I came across the concept of browser fingerprinting.
So what is browser fingerprint and how does it work? When your browser visits a website, it reveals tons of tiny details about itself such as User agent string (browser type + version + OS), typefaces, screen resolution, hardware concurrency, and most importantly canvas fingerprinting which is method in which a certain pixels are being asked by the browser to be rendered using the cpu/gpu usually the time taken in microseconds is unique to the device due to how manufacturing works. The difference is almost near negligible, however it could be one of the few vectors which help identify the device uniquely, even if it changes the values slightly due to amount of charging present on the device etc, it can stochastically be used in device identification.
Coming to my project, I knew that implementing this from scratch as a solo developer would cost me time,energy and writing a lot of code for identifying the major web APIs to be used in order to get such values and then using an algorithm to hash them to get a unique identifier. I was more interested in the implementing it and watch the application part of it. So like any other developer I searched for the best open source software available on github. Shoutout to fingerprint-js.
The project is as follows,
-
On initial load check if the user is a first time visitor or a returning visitor from the DB, basing on unique id generated. If the user is a first time visitor, let's run the fingerprint-js library and it generates a unique id for the user.
-
Then the user can set the slider to their desired value,both the unique id and the slider value would and sent to DB(I have used Neon DB,postgresql for the scope of this project).
-
When the user returns,let's assume via incognito browser to the same site, we get to see that the user is a returning user and also the state of the slider is set to their previous state, without using any cookies, without using any generic user identification such as email id, phone number,account credentials etc, due to the identification via fingerprint signals
I did not increase the scope of this project as it was intended to understand and see browser fingerprint in action over a weekend, but in future this can be extended to identifying saved state of users from logged in accounts in both browser states,helping in rate limit of usage,bot detection, adding layers such as heat maps and mouse tracking to get better insights on users and websites.
I am open to collaboration and the link of entire project can be found at link to project