HTML / CSS

Browser FingerPrint JavaScript

I needed to identify unique users without cookies. That led me to browser fingerprinting — a technique that identifies browsers by collecting device and b...

13 Oct 2023

Browser FingerPrint JavaScript

I needed to identify unique users without cookies. That led me to browser fingerprinting — a technique that identifies browsers by collecting device and browser characteristics, then hashing them into a unique identifier.

What Is Fingerprinting?

Fingerprinting queries your browser for a set of attributes: user agent string, screen color depth, language, installed plugins, timezone offset, and capabilities like local storage support. These values get passed through a hashing function to produce a fingerprint.

No cookies are stored. The identification happens entirely from the browser's observable properties.

Research by the Electronic Frontier Foundation showed this approach can uniquely identify a browser with up to 94% accuracy. That's remarkably high for a technique that doesn't persist any data on the client.

How It Works

The browser exposes a lot of information through standard JavaScript APIs:

  • Navigator properties: User agent, language, platform, hardware concurrency
  • Screen properties: Color depth, resolution, available dimensions
  • WebGL: Renderer info, vendor strings
  • Canvas: Rendering differences between GPUs and operating systems
  • Audio context: Subtle differences in audio processing
  • Timezone and locale: Offset and formatting preferences

Each data point alone isn't unique. Combined, they create a distinct signature.

There's a well-maintained open-source library called FingerprintJS that handles this collection and hashing for you.

The Trade-offs

Benefits: No cookies, no server-side storage needed for identification. Works even in incognito mode. Useful for fraud detection, bot prevention, and analytics.

Costs: Privacy implications are real. Users can't easily opt out. Mobile browsers are much more uniform, so fingerprinting accuracy drops significantly on phones. Browser updates and privacy features can change fingerprint values over time, making them less stable than cookies for long-term identification.

When to use it: As a supplementary identification mechanism alongside other methods — not as your sole user identity strategy.