Browser Fingerprint Javascript Example
FingerprintJS – GitHub
FingerprintJS is a browser fingerprinting library that queries browser attributes and computes a hashed visitor identifier from them. Unlike cookies and local storage, a fingerprint stays the same in incognito/private mode and even when browser data is purged.
View Our Demo.
Quick start
Install from CDN
Run this code
Alternatively you can install from NPM to use with Webpack/Rollup/Browserify
npm i @fingerprintjs/fingerprintjs
# or
yarn add @fingerprintjs/fingerprintjs
import FingerprintJS from ‘@fingerprintjs/fingerprintjs’
// Initialize an agent at application startup.
const fpPromise = ();(async () => {
const fp = await fpPromise
const result = await ()
(visitorId)})()
Full documentation
Upgrade to Pro version to get 99. 5% identification accuracy
FingerprintJS Pro is a professional visitor identification service that processes all information server-side and transmits it securely to your servers using server-to-server APIs.
Pro combines browser fingerprinting with vast amounts of auxiliary data (IP addresses, time of visit patterns, URL changes and more) to be able to reliably deduplicate different users that have identical devices, resulting in 99. 5% identification accuracy.
You can try Pro without usage limits for 10 days – no credit card required.
Full product comparison:
Open Source
Pro
Core Features
100% Open-sourceyesno1
Standard fingerprint signalsscreen, os, device name✓✓
Advanced fingerprint signalscanvas, audio, fonts✓✓
ID typefingerprintvisitorID2
ID lifetimeseveral weeksmonths/years
ID originclientserver
ID collisionscommonrare
Additional Features
Incognito mode detectionworks in all modern browsers – see our full list of browsers supported–✓
Server-side accuracy increasebased on additional server-side signals, such as TLS crypto support, ipv4/v6 data and others–✓
Query API & realtime Webhooksbuild flexible workflows–✓
Geolocationbased on IP address–✓
Operations
Data securityYour infrastructureEncrypted at rest
StorageYour infrastructureUnlimited up to 1 yr
RegionsYour infrastructureHosting in US and EU
ComplianceYour infrastructureGDPR, CCPA compliant3
SLANo SLA99. 9% Uptime
SupportGitHub communitySupport team via email, chat, and call-back within 1 business day
1. Pro uses the open source fingerprinting library as well as proprietary technology for increased accuracy and identifier stability.
2. VisitorIDs, in comparison to fingerprints, include server side techniques, are deduplicated and utilize fuzzy matching to result in a more accurate and stable identifier. Fingerprint hashes rely on an exact match across all browser attributes, making them less stable across > 4 week time intervals.
3. FingerprintJS Pro is GDPR and CCPA compliant as the data processor. You still need to be compliant as the data controller and use the identification for fraud under legitimate interest or ask for user consent.
Pro result example:
{
“requestId”: “HFMlljrzKEiZmhUNDx7Z”,
“visitorId”: “kHqPGWS1Mj18sZFsP8Wl”,
“visitorFound”: true,
“confidence”: { “score”: 0. 995},
“incognito”: false,
“browserName”: “Chrome”,
“browserVersion”: “92. 0. 4515. 107”,
“os”: “Mac OS X”,
“osVersion”: “10. 15. 6”,
“device”: “Other”,
“ip”: “192. 65. 67. 131”,
“ipLocation”: {
“accuracyRadius”: 100,
“latitude”: 37. 409657,
“longitude”: -121. 965467
//… }}
Live demo
⏱ How to upgrade from Open Source to Pro in 30 seconds
FingerprintJS Pro documentation
▶️ Video: use FingerprintJS Pro to prevent multiple signups
Migrating from v2
Migration guide
V2 documentation
Version policy
See the compatibility policy for the API and visitor identifiers in the version policy guide.
Browser support
The library supports all popular browsers.
See more details and learn how to run the library in old browsers in the browser support guide.
Contributing
See the contributing guidelines to learn how to start a playground, test and build.
Useful links
Easy to use bot detection in JS, new FingerprintJS project
How to identify unique devices using javascript? – Stack …
You can use the fingerprintJS2 library for your project too.
How this library gets fingerprints
collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.
Example
There are many other ways to get unique browser fingerprint.
The newest method to obtain browser information is called “Canvas Fingerprinting. ” Simply put, websites are written in HTML5 code, and inside that code, there is a little piece of code that takes your browser’s fingerprint.
So, how are websites doing that, exactly? Let me explain.
This new tracking method that websites employ to obtain your browser fingerprint is enabled by new coding features in HTML5.
HTML5 is the coding language used to build websites. It’s the core fundamentals of every website. Within the HTML5 coding language, there’s an element which is called “canvas. ”
Originally, the HTML element was used to draw graphics on a web page.
Wikipedia provides the following explanation on how exploiting the HTML5 canvas element generates browser fingerprinting:
“When a user visits a page, the fingerprinting script first draws text with the font and size of its choice and adds background colors. Next, the script calls Canvas API’s ToDataURL method to get the canvas pixel data in dataURL format, which is basically a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint. ”
In plain English, what this means is that the HTML5 canvas element generates certain data, such as the font size and active background color settings of the visitor’s browser, on a website. This information serves as the unique fingerprint of every visitor.
In contrast to how cookies work, canvas fingerprinting doesn’t load anything onto your computer, so you won’t be able to delete any data, since it’s not stored on your computer or device, but elsewhere.
Source and further reading:
By the way you can get much more information from Googling yourself.
The Top Browser Fingerprinting Techniques Explained
To generate a highly accurate browser fingerprint, many techniques are used to gather information about the user that can differentiate them from millions of others online. In this article, we review some of the most common methods used in a browser fingerprinting script.
Also known as online fingerprinting, browser fingerprinting is a tracking and identification method websites use to associate individual browsing sessions with one site visitor. Using Javascript, a plethora of data can be collected about a user’s browser and device. When these pieces of information are stitched together, they reveal a unique combination of information that forms every user’s very own ‘digital fingerprint. ’ The browser fingerprint is traceable across browsing sessions, even when the user enters incognito browsing or uses a VPN to access a site.
Browser fingerprinting can be used to stop fraudsters from attempting to hack, spam, or spoof website owners by accurately identifying site users. Browser fingerprinting is more difficult to circumvent than cookies, as a user’s fingerprint does not change between incognito browsing sessions, or clearing browser data. To generate a browser fingerprint with enough accuracy (or entropy) to uniquely identify a web visitor, the script must use a variety of browser fingerprinting techniques to gather data (called signals) that would vary between visitors. While many visitors to a website may have the same model of iPhone, the software and drivers installed, geolocation, browser and OS version, and even minute variances in the hardware could be different. Each browser fingerprinting technique is able to gather one or more of these signals that aim to identify these small variances between users.
What Information is Gathered?
With browser fingerprinting, a lot of information can be gathered from the browser: the user’s device model, its operating system, its browser version, browser extensions, user timezone, preferred language settings, ad blocker used, screen size and resolution, and all the granular tech specs of his CPU, graphics card, and so on.
Browser fingerprinting technology can capture more than enough specifics about a user’s device and settings to pinpoint them in a sea of internet users. Read our beginner’s guide to learn more about how browser fingerprinting works and how each signal adds to a fingerprint’s overall accuracy and stability.
FingerprintJS’s browser fingerprinting technology employs several cutting-edge browser identification methods to gather over 100 individual signals. These signals are combined with server-side analysis and deduplication to generate a visitorID, providing a persistent and useful abstraction of a browser fingerprint, which can be volatile if a user changes settings or updates software on their device.
What Are Some of the Different Fingerprinting Techniques?
Canvas Fingerprinting
This browser fingerprinting technique takes advantage of the HTML5 canvas element to identify variances in a user’s GPU, graphics drivers, or graphics card. First, the browser fingerprinting script draws an image, often overlaid with text. Then, the script captures how the user’s browser has rendered the image and text. Every device with different hardware and drivers will render the image slightly differently, distorting its color and shape. A hash is then computed using the rendered image’s data, which serves as the ‘canvas fingerprint. ’
Like any other browser fingerprinting technique, the scripts used for canvas fingerprinting operate in the background to keep the user from realizing that the fingerprinting is occurring. This fingerprinting technique is both accurate and not too processing intensive, making it one of the most employed techniques in browser fingerprinting scripts.
To read more about this technique, read our in-depth article on Javascript canvas fingerprinting.
Canvas and WebGL rendered images, from AmIUnique. Due to how this visitor’s specific browser and device rendered these images, they can be narrowed down to a pool of fewer than 0. 01% of total visitors.
WebGL Fingerprinting
WebGL fingerprinting is very similar to Canvas fingerprinting as they both use the browser to render text and images off-screen. These images are then used to differentiate users based on their graphics drivers and device hardware.
Media Device Fingerprinting
This technique uncovers a list of all the connected media devices and their respective IDs on a user’s laptop or PC. This includes all internal media components like video cards, audio cards, and all connected or linked devices like headphones.
Media device fingerprinting is not widely used in fingerprinting functions as it requires the user to grant access to their microphone and camera to get a full list of connected devices. As such, this technique is useful for services that innately require webcam or microphone access, such as video chat services.
Audio Fingerprinting
While other fingerprinting techniques force browsers to render a text or image, this technique checks how their devices play sound. Minute differences in sound waves generated by a digital oscillator are impacted by the browser vendor and version used, as well as differences in CPU architecture.
To learn more about audio fingerprinting, read our in-depth tutorial on how audio fingerprinting works using the Web Audio API.
Putting it all together
Multiple fingerprinting techniques need to be used in conjunction with each other to generate a sufficiently accurate fingerprint for user identification. Each technique generates one or more signals, which are then collectively combined into a visitor hash that serves as an individual identifier.
Fingerprinting and Online Fraud Detection
When you’re dealing with fraud, take note that only a small number of your site visitors are responsible for fraudulent activities. Hence, your developer team has to find a way to isolate these site users, identify them, verify them through authentication, and add them to your site blacklist. However, you need to keep these security layers away from your trusted traffic since extra authentication steps can cause an unpleasant user experience. More strict site security can also slow down account accessibility, purchase making, and overall site engagement.
Browser fingerprinting techniques are incredibly useful to identify visitors with a pattern of fraudulent behavior, and then target only these visitors for additional security. Fraudsters often use identity concealing techniques like disabling cookies, surfing through a VPN, or using browsers in incognito mode. These are all areas where fingerprinting proves to be at its best since it identifies users quickly without the reliance on IP addresses and site cookies.
One of the most common fraud use cases is account takeover, where malicious users will try to hack a legitimate user’s account and make purchases or steal their identity. With browser fingerprinting and related user identification technologies, additional security can be added to the login process for suspicious traffic only. This makes it more difficult for untrusted traffic to log in and take over trusted users’ accounts.
If your website is experiencing brute force or bot attacks, a best practice is to ask users to solve a CAPTCHA after each unsuccessful login attempt. After three to five unsuccessful login attempts, set your system to lock out the user for a period of time.
If your users are often the target of phishing scams, you can require email or two-factor authentication when a new fingerprint attempts to log in. And if such fingerprints repeatedly visit your site, you can also blacklist them.
For virtually all types of fraud, the first step in stopping the malicious activity on your website is accurate user identification technology. That way, you can accurately single out the bad apples while keeping your trusted users satisfied with your website performance.
Whether you have a newly-built website or you’ve been in the online industry for years, you can safeguard your leads, clients, and business if you can stop fraud at the source. Start a 30-day trial to see what accurate user identification technology can do for you.
