Client Side Browser Fingerprinting
A device fingerprint or machine fingerprint is information collected about the software and hardware of a remote computing device for the purpose of identification. A browser fingerprint is collected specifically by interaction with the web browser of the device.
It is mainly used for web tracking: collection and sharing of information about an individual’s activity on the internet. It's hard to control how this information gets used by the entities who collect them. However, as users there are multiple tools available at our disposal to help make these fingerprint as less unique/reliable as possible.
The intent behind this library is mainly to study how browser fingerprinting works rather than indulging in web tracking. The uniqueness of the fingerprint isn't high in that 2 identical iPhones using the same browser (vendor & version) should reap indentical fingerprints.
Usage
- Install
yarn add @manufac/browserprint
- Import
import { getBrowserFingerprint } from "@manufac/browserprint";
getBrowserFingerprint().then((fingerprint) => {
console.log(fingerprint);
})- The fingerprint that this library generates looks like:
{
"hash": "-1129309543",
"data": {
"navigator": {
"languages": [
"en-GB",
"en-US",
"en"
],
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36",
"vendor": "Google Inc.",
"platform": "MacIntel",
"hardwareConcurrency": 16,
"maxTouchPoints": 0
},
"window": {
"sessionStorage": true,
"localStorage": true,
"indexedDB": true,
"colorDepth": 24,
"resolution": [
1920,
1080
],
"rtc": true,
"webSocket": true
},
"css-media": {
"any-hover": [
"hover"
],
"any-pointer": [
"fine"
],
"color-gamut": [
"srgb"
],
"prefers-contrast": [
"no-preference"
],
"forced-colors": [
"none"
],
"prefers-reduced-motion": [
"no-preference"
],
"inverted-colors": [],
"dynamic-range": [
"standard"
],
"grid": [
"0"
],
"hover": [
"hover"
],
"overflow-block": [],
"overflow-inline": [],
"pointer": [
"fine"
],
"prefers-color-scheme": [
"light"
],
"scripting": [],
"update": [],
"video-dynamic-range": [],
"device-height": [
"1080px"
],
"device-width": [
"1920px"
],
"resolution": [
"96dpi"
],
"color": [
"8"
],
"color-index": [
"0"
],
"monochrome": [
"0"
]
},
"math": {
"acos": 1.4473588658278522,
"acosh": 709.889355822726,
"asin": 0.12343746096704435,
"asinh": 0.881373587019543,
"atan": 0.4636476090008061,
"atanh": 0.5493061443340548,
"sin": 0.8178819121159085,
"sinh": 1.1752011936438014,
"cos": -0.8390715290095377,
"cosh": 1.5430806348152437,
"tan": -1.4214488238747245,
"tanh": 0.7615941559557649,
"exp": 2.718281828459045,
"expm1": 1.718281828459045,
"log1p": 2.3978952727983707,
"cbrt": 1.4422495703074083,
"sqrt": 1.4142135623730951
},
"fonts": [
"Arial Unicode MS",
"Gill Sans",
"Helvetica Neue",
"Menlo"
],
"canvas": {
"winding": true,
"geometry": "data:image/png;base64,iVBORw....",
"textImage": "data:image/png;base64,iVBO....."
},
"audio": "1240202222"
}
}- The
hashproperty contains the hash of thedataobject.
Strategies used for browser fingerprinting
Audio
Audio fingerprinting appears conceptually similar to canvas fingerprinting. Audio signals processed on different machines or browsers may have slight differences due to hardware or software differences between the machines. Our implementation uses OfflineAudioContext to generate and process the audio signals. Eventually, the processed audio signal is used for creating a hash that in turn is used for the unique identification of the browser.
Reference: Audio fingerprinting
Canvas
Canvas is an HTML5 API used to draw graphics and animations on a web page via scripting in JavaScript. The technique is based on the fact that the same canvas image may be rendered differently on different computers. This happens for several reasons:
- At the image format level: Web browsers use different image processing engines, image export options, compression levels, etc.
- At the OS level: Different OS have different fonts and use different rendering algorithms and settings.
In this strategy, we render two images, one consisting of text and emoji and the other of geometrical shapes. The generated images are converted into data URLs. These URLs are then used for creating fingerprint of the browser. We also determine if the browser supports winding or not. Reference: Canvas
Clock-Cycle
Hardware features have also been introduced to identify web users and perform web tracking. Hardware fingerprint exploits differences in the computer internal clock signals. For fingerprint generation we compute the time required to execute different invocation of a target function. Disclaimer: fingerprint generated using this strategy is not stable and hence, not included in the final signature.
CSS Media
Media queries allow us to apply CSS styles depending on a device's characteristics, such as screen resolution, browser viewport width, etc. In this strategy, we generate a dictionary that contains information about various CSS Media features and their values supported by the browser.
Fonts
The font fingerprinting technique is based on identifying the fonts available in the browser under consideration. A basic text string has been chosen consisting of alphabets, numbers, and special characters in this fingerprinting technique ("mmMwWLliI0O&1"). The text string is then rendered with different font families to identify if the given font is available in the browser or not. Eventually, all the available font names are combined together to create the fingerprint. Reference: Fonts Fingerprint
Math
Modern CPUs and Operating systems follow IEEE standards when it comes to computing math equations, however, these standards do not clearly define how certain functions such as SIN, COS, TAN, etc. should be computed. Errors crop up as these functions often require multiple steps and intermediary values could be defined as floats, doubles, or something else, and with each round of calculations rounding errors alter the LSB ever so slightly. This allows you to determine the browser and OS in many cases.
Adopted from Math Routine Fingerprint.
Navigator
The window.navigator object contains information about the visitor's browser, system, platform, languages and many more. Some of this information is unique to a system and can help create a fingerprint for the browser under consideration.
For example, this is a portion of a window.navigator object:
{
appCodeName: "Mozilla",
appName: "Netscape",
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
language: "en-US",
}Some properties used in this library: languages, userAgent, platform etc.
Reference: Navigator Fingerprint
Windows
In a browser environment, the window object represents the browser window containing a web page. It can tell us details like the dimensions and the color depth of the parent screen, which pages have been visited before the current page, and many more. Some of these values add to the uniqueness of a browser and can be used for generating its fingerprint.
For example, this is a portion of a window object:
{
screen: {
availHeight: 624,
availWidth: 1175,
colorDepth: 24,
height: 661,
},
scrollX: 0,
scrollY: 775.53515625,
pixelDepth: 24
}