Browser Fingerprinting Explained for Frontend Developers

How websites identify your browser even without cookies.

How websites identify your browser even without cookies.

Introduction

Imagine this.

You visit an e-commerce website for the first time.

You don’t log in.

You reject all cookies.

You even open the website in Incognito mode.

But somehow, the website still knows that it has seen your browser before.

How is that possible?

The answer is Browser Fingerprinting.

When I first learned about this, I thought websites were only using cookies or local storage to identify users. But I was surprised to find that browsers already expose a lot of information through different Web APIs. When all of these values are combined, they can create a unique fingerprint for your browser.

In this article, I’ll explain how browser fingerprinting works and why libraries like FingerprintJS are able to identify browsers even when cookies are disabled.

What is Browser Fingerprinting?

Browser fingerprinting is a technique used to identify a browser by collecting different pieces of information that the browser already exposes.

A single value is usually not unique.

For example:

• Thousands of users may have the same screen resolution.
• Thousands of users may use Chrome.
• Thousands of users may have the same language.

But when many of these values are combined together, the final combination becomes much more unique.

Think of it like this.

Imagine you’re trying to identify someone in a crowd.

Just knowing they wear a blue shirt isn’t enough.

But if you know:

• Blue shirt
• Black shoes
• Glasses
• Height
• Curly hair

Now it’s much easier to identify that person.

Browser fingerprinting works in a similar way.

What Information Does the Browser Expose?

Modern browsers provide a lot of information through JavaScript APIs.

Some common examples are:

• Browser name
• Browser version
• Operating system
• Screen resolution
• Device pixel ratio
• Language
• Timezone
• Platform
• Number of CPU cores
• Device memory
• Touch support
• Color depth

These values are easy to access using JavaScript.

For example:

console.log(navigator.language);
console.log(screen.width);
console.log(screen.height);
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);

Individually, these values are not unique.

But together, they become much more useful.

It Doesn’t Stop There

Browser fingerprinting also uses more advanced techniques.

Some of them include:

• Canvas Fingerprinting
• WebGL Fingerprinting
• Audio Fingerprinting
• Installed Fonts
• Hardware Information

These values are much harder to fake and add more uniqueness to the fingerprint.

Let’s understand them one by one.

Canvas Fingerprinting

The HTML Canvas API allows websites to draw graphics.

A fingerprinting library draws hidden text or shapes on the canvas.

Then it reads the generated image.

Although every browser receives the same drawing instructions, the final image may be slightly different because of:

• Operating system
• Graphics driver
• GPU
• Browser rendering engine
• Font rendering

These tiny differences can be used as part of the browser fingerprint.

WebGL Fingerprinting

WebGL is used for rendering 2D and 3D graphics.

Get Faizalhussain’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It also exposes information about the graphics hardware.

For example:

• GPU Vendor
• GPU Renderer

Different devices usually return different values.

This adds another piece to the fingerprint.

Audio Fingerprinting

This one surprised me the most.

Browsers have a Web Audio API.

A website can generate a small audio signal in the background.

Instead of playing it, the website analyzes the generated output.

Small differences in hardware and browser implementations can produce slightly different results.

These differences become another fingerprint signal.

Fonts

Different users install different fonts.

A website can detect which fonts are available on your device.

The combination of installed fonts can make your browser more unique.

How Does Browser Fingerprinting Work?

The overall process is actually simple.

Browser

↓
Collect Browser Information
↓
Canvas
WebGL
Fonts
Timezone
Screen Size
Language
CPU
Memory
↓
Combine All Values
↓
Generate Browser Fingerprint
↓
Visitor ID

The Visitor ID is generated based on the collected values.

If most of those values remain the same, the same browser usually gets the same Visitor ID.

Where is Browser Fingerprinting Used?

Many companies use browser fingerprinting for security instead of tracking users.

Some common use cases are:

Fraud Detection

Banks and payment gateways use it to detect suspicious devices.

Preventing Multiple Accounts

Some websites don’t allow users to create unlimited accounts.

Browser fingerprinting helps detect repeated sign-ups from the same browser.

Bot Detection

Automated browsers often expose different characteristics than real browsers.

Fingerprinting helps identify them.

Account Protection

Imagine you always log in from the same laptop.

Suddenly, someone tries to log in using a completely different browser fingerprint.

That login can be marked as suspicious and may require additional verification.

Can Browser Fingerprinting Identify You 100%?

No.

Browser fingerprinting is not perfect.

Your fingerprint can change when:

• You update your browser.
• You change your operating system.
• You install new fonts.
• You change your graphics driver.
• You switch devices.

Privacy-focused browsers may also reduce the amount of information that websites can collect.

Because of this, browser fingerprinting should be treated as a probability-based technique rather than a guaranteed way to identify someone.

What About Cookies?

Cookies and browser fingerprinting are different.

Cookies store data inside the browser.

Browser fingerprinting doesn’t need to store anything.

Instead, it creates an identity based on the information that the browser already exposes.

That’s why deleting cookies doesn’t always prevent a website from recognizing your browser.

Where Does FingerprintJS Fit In?

FingerprintJS is a library that automates this entire process.

Instead of manually collecting dozens of browser signals, it gathers them, processes them, and generates a Visitor ID.

As developers, we don’t have to implement all the detection logic ourselves.

The library handles most of the work.

Final Thoughts

Before learning about browser fingerprinting, I assumed cookies were the only way websites could recognize users.

But modern browsers expose a lot of information through standard APIs.

When those values are combined, they can create a surprisingly unique browser fingerprint.

Browser fingerprinting is widely used for fraud detection, account security, and bot protection. At the same time, it also raises important privacy questions, which is why developers should understand both its benefits and its limitations.

As frontend developers, we don’t just build user interfaces. Understanding how browsers work behind the scenes helps us build better and more secure applications.

Thanks for reading! If you found this useful, feel free to share it with other frontend developers.