Login Security: Browser Fingerprinting

TL;DR

Browser fingerprinting adds an extra layer of security to your login process by identifying users based on their browser’s unique characteristics. This makes it harder for attackers to gain access even if they have a user’s password.

How Browser Fingerprinting Works

Every web browser is slightly different due to installed extensions, fonts, operating system, and other settings. Browser fingerprinting collects this information (without using cookies) to create a unique ‘fingerprint’ for each browser. This fingerprint can then be used to verify the user’s identity.

Setting up Browser Fingerprinting – A Step-by-Step Guide

1. Choose a Library/Service: Several JavaScript libraries and services offer browser fingerprinting functionality. Popular options include:
   • FingerprintJS Pro (Paid): Highly accurate, regularly updated.
   • ClientJS: Open-source, good for basic fingerprinting.
   • Browser Fingerprinting API (Self-Hosted): Requires more technical setup but gives you full control.
2. Install the Library/Service: The installation process varies depending on your chosen solution.
   • FingerprintJS Pro: Typically involves adding a script tag to your HTML and obtaining an API key.
   • ClientJS: Download the library file and include it in your project.
   • Browser Fingerprinting API: Requires setting up a server and database.
3. Generate the Fingerprint on Login: When a user attempts to log in, use the chosen library/service to generate a browser fingerprint.

   // Example using FingerprintJS Pro (simplified)

   fingerprintjs.get({apiKey: 'YOUR_API_KEY'}).then(function(result) {

     const fingerprint = result.hash;

     // Store the fingerprint securely (see Step 4).

4. Securely Store Fingerprints: Never store fingerprints in plain text! Use strong hashing algorithms (like SHA-256) with salting to protect them.
   • Database Considerations: Choose a database that supports secure storage and encryption.
   • Salting: Add a unique random string (the ‘salt’) to each fingerprint before hashing. This prevents rainbow table attacks.

   // Example using Node.js with crypto module

   const crypto = require('crypto');

   function hashFingerprint(fingerprint, salt) {

     const saltedFingerprint = fingerprint + salt;

     return crypto.createHash('sha256').update(saltedFingerprint).digest('hex');

   }

5. Verify Fingerprints on Subsequent Logins: When a user logs in again, generate a new fingerprint and compare it to the stored hashed fingerprint.
   • Tolerance Level: Fingerprints aren’t always identical due to browser updates or minor changes. Implement a tolerance level (e.g., allow for a certain percentage of difference).
   • Multi-Factor Authentication: Combine browser fingerprinting with other security measures like passwords, one-time codes, or biometrics for stronger protection.

   // Example comparison (simplified)

   function compareFingerprints(storedHash, newFingerprint, salt) {

     const hashedNewFingerprint = hashFingerprint(newFingerprint, salt);

     // Implement comparison logic with tolerance level here.

     return storedHash === hashedNewFingerprint; // Basic example - improve this!

6. Regularly Update Your Library/Service: Browser fingerprinting techniques evolve as browsers change. Keep your chosen library or service updated to maintain accuracy and effectiveness.

Important Considerations

• Privacy: Be transparent with users about collecting browser data. Include this information in your privacy policy.
• False Positives: Fingerprinting isn’t foolproof. False positives (incorrectly identifying a user) can occur. Implement recovery mechanisms for legitimate users who are blocked.
• Performance Impact: Some fingerprinting libraries can impact page load time. Choose a lightweight solution and optimize its implementation.