Coding Your Digital Fingerprint: A Developer's Guide
Introduction
So you have built (or acquired) your billion-dollar social application, and you have sold vanity verification badges to the insecure betas. You have even introduced exorbitant API pricing to prevent researchers from accessing your data. But you still want to extract the most out of your users. You have thought of introducing third-party cookies to later sell the data to some broker, but you find out that it is heavily regulated by GDPR and CCPA. “What else can I do?” you ask, “Browser Fingerprinting” I answer.
What is Browser Fingerprinting?
Browser fingerprinting is where a unique identifier is generated based on a computer’s software configuration and hardware specs as they browse the internet. This unique identifier is the “fingerprint”.
How is Browser Fingerprinting possible?
Whenever we visit any website, the browser must provide some information about the current device to that website. This information ranges from your screen resolution, the GPU specs, and your IP address to even devices connected to your device. This information is important to the website as it helps to determine how the content will be served. For instance, your IP will be used to determine whether you can access some data or not on websites like Youtube. In another case, think of a website that uses WebGL (GSAP and Three.js of the world), when rendering the models it has to determine what features to enable like ray tracing, and what frames per second to render among other things.
Efficiency of Browser Fingerprinting
Fingerprinting, when compared to other tracking elements such as cookies, has a lower accuracy. However, given that third-party cookies are heavily regulated, they are currently being used in the industry by most of the major players. The accuracy ranges from 90–99.5%, which is better than not tracking the user at all. To further improve its effectiveness compared to cookies, fingerprinting still works even when a user uses Incognito or a private session.
Why Browser Fingerprinting?
When this concept comes to mind, all you might think of is that it is only used by some nefarious advertisers to serve you ads across the web (and yes, that’s the case), but that is not the only use case of this technology. Another use case is for fraud detection. Let’s consider an example of a bank using this technology. When a user tries to access their online banking account, the bank’s system collects and analyzes the unique fingerprint of the user’s device. If the fingerprint matches a known device associated with the user, the login is allowed. However, if the fingerprint doesn’t match or raises suspicion (e.g., due to unusual geolocation or behavioral patterns), the bank may trigger additional authentication steps, such as sending a one-time code to the user’s registered email or phone, to ensure the login is legitimate and secure.
Other use cases include bot detection (web scraping), analytics, and improving user experience based on the user and device.
There are certain topics we won’t cover here, such as privacy concerns and regulations, among other issues that may be less important to you as a developer (remember, we are after the bag). You can find a great article here that discusses these topics in more depth.
Browser Fingerprinting Methods and Attributes.
There are several elements that it takes to create a fingerprint, below are some of the elements and attributes that are used to create it.
- User Agent string. - The user agent string is a text sent by the browser to the server to identify itself and provide information about the browser and the current device specs. It is part of the HTTP protocol request headers. Example of a user agent string.
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0
-
HTTP Headers - Various HTTP headers such as Referrer policy andAccept-Language can be used to determine users’ preferences based on their history.
-
Browser plugins - plugins (extensions) are also exposed to the current site and are used in fingerprinting given that everyone has a diverse type of these extensions.
-
Canvas Fingerprinting - Canvas is an element used in HTML and allows for creating drawing boards. Websites will run a script to draw an image in the background. With that done the rendered image will give a host of information about the data device such as the graphics hardware. With this information, it creates a “canvas fingerprint”.
-
Audio Fingerprinting - The AudioContext API is used to measure how a device produces sound and a unique fingerprint is generated based on the device’s hardware.
-
WebGL Fingerprinting - Similar to Canvas fingerprinting, WebGL capabilities such as the graphics card and driver information, can be used to generate a “WebGL fingerprint”.
-
TLS Fingerprinting: Analyzing the SSL/TLS handshake and supported cipher suites can provide information about the device.
-
Connected Devices fingerprinting - This is where any external device connected to your device such as a printer, speaker, etc. is used as attributes and is used to generate a “Connected devices fingerprint”.
-
Device Motion and Orientation: Data from the Device Motion and Orientation APIs can be used for fingerprinting.
-
Others include: Installed fonts, Screen resolution, Time zone, Battery status, Keyboard layout, Cookies settings and Supercookies, IP address
All these attributes are then combined to form a unique identifier of every device, which persists across the web.
Building A Browser Fingerprinter
We’ll be using JavaScript as the primary language for this project. You can use any Chromium-based browser or Firefox (Opera and Safari not tested). By the end of this project, you’ll have built a program that produces the following page.
You can find the codebase here on GitHub.
Since everything will be handled on the client side (browser), we’ll not be using some attributes that form a browser fingerprint such as TLS, Accept-Language, and Referrer headers among others. Some attributes mentioned above are out of scope for this project due to their complexity, so we’ll not cover them.
Create a directory and create a file fingerprint.js
this file will contain most of the code we’ll be using in this project. Add the following to this file.
As you can see from this code, we are using various browser-based APIs and features to gather device and browser-related attributes. We’ve only used an external API to fetch the IP address since it’s not available directly from the browser.
Moving on, we’ll create a file canvas.js
which will contain the code to generate a canvas fingerprint. Add the following code to this file.
This code creates a canvas element, renders some text on it, and then extracts the image as a data URL. This data URL can be used as a fingerprint. The generated fingerprint will look like this.
Next, we’ll create a file webgl.js
which will contain the code to generate a WebGL fingerprint. Add the following code to this file.
In the above code, we first check if the browser supports WebGL. If it does, we create a WebGL context and extract the vendor and renderer information. We also check if the EXT_texture_filter_anisotropic
extension is supported and extract the maximum anisotropy value. This information is then returned as a JSON string.
The generated WebGL fingerprint will look like this.
Now that we have all the code we need, we’ll create a file index.js
which will contain the code to generate the fingerprint. Add the following code to this file.
In the above code, we first import all the functions we created in the previous files. We then create a function generateFingerprint
which calls all the functions and returns the fingerprint and its hash. The hash is generated using the SHA-256 algorithm.
Finally, we’ll create a file index.html
which will contain the code to display the fingerprint. Add the following code to this file.
To make the html code display the fingerprint data, we’ll add the following code to the index.js
file.
Now that we have all the code we need, we can run the program by opening the index.html
file in a browser. The generated fingerprint will look like this.
Some Notes
This code will produce a unique fingerprint for every browser and device. However, it is not persistent across the web or even locally as might be using a dynamic IP address or even a VPN.
Now that you have generated a fingerprint, you can map the fingerprint to a user account and use it to track the user across the web. You can also sell this data to advertisers and rake in some cash to repay your debtors.
Conclusion
In this article, we have discussed what browser fingerprinting is, how it works, and why it is used. We have also built a program that generates a browser fingerprint using JavaScript. You can find the codebase here on GitHub.
References
browser-fingerprinting-everything-you-need-to-know
fingerprint.com