Browser Fingerprinting

Imagine walking into a store. You don't show ID, you don't sign in—but the store recognizes you anyway. How? Your height, gait, clothing style, and the way you browse shelves create a unique "pattern." That's browser fingerprinting in the digital world.

Browser fingerprinting collects dozens of attributes from your browser—screen resolution, installed fonts, GPU model, timezone—and combines them into a hash. This hash is statistically unique: 99.7% of browsers can be individually identified.

Canvas fingerprinting exploits the HTML5 <canvas> element. When your browser draws text or shapes, tiny differences in your GPU, drivers, and font rendering create a unique image—even if you can't see the difference.

How It Works

1. A hidden canvas element draws specific text and shapes
2. The rendered pixels are extracted as data
3. Subtle rendering differences create a unique hash
4. This hash identifies you across sites

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'alphabetic';
ctx.font = "14px 'Arial'";
ctx.fillText('Browser fingerprint test 🎨', 2, 15);
const dataURL = canvas.toDataURL();
// Hash: a7f3b2c1d4e5f6... (unique per device)

WebGL fingerprinting goes deeper—it queries your GPU hardware directly. Your graphics card vendor, renderer string, supported extensions, and shader precision all contribute to a highly stable fingerprint.

Data Points Collected

• Vendor & Renderer: GPU manufacturer and model
• Max Texture Size: Hardware capability limits
• Shader Precision: Floating-point accuracy
• Extensions: Supported WebGL features
• Parameters: 50+ queryable values

The Web Audio API was designed for music apps—but its subtle processing differences create another fingerprint vector. Your browser's audio stack has a unique "sound."

The Technique

1. Create an AudioContext with an oscillator
2. Apply compression and filtering effects
3. Capture the output waveform data
4. Hash the floating-point values

Different CPUs, audio drivers, and browser implementations produce microscopically different output values. These differences are consistent and trackable.

Oscillator: 0.00024127289627166092
Compressor: 0.00023456789012345678
Analyser:   [124, 124, 123, 124, 125, ...]
Hash:       35.73833801150322

Your installed fonts are another unique identifier. While CSS can only "test" if a font exists (no direct listing), clever techniques using JavaScript can enumerate most of your installed fonts.

Detection Method

1. Measure text width using a fallback font (e.g., monospace)
2. Apply a test font from a list of ~500 common fonts
3. If width changes, the font exists on your system
4. Build a list of installed fonts

Entropy: Users with unusual font collections (designers, developers) are especially identifiable. Installing a few unique fonts can make your browser stand out.

Each fingerprinting technique contributes "bits of entropy." Combined, they create overwhelming uniqueness:

With only ~5 billion internet users, 44 bits of entropy is more than enough to uniquely identify virtually everyone.