Complete Guide to Browser Fingerprinting: Device Identification Without Cookies & Resilient Fingerprint Strategy

User identification on the web has long relied heavily on client-side storage such as cookies, localStorage, or indexedDB. However, the emergence of strict privacy policies (Safari's ITP, Chrome's Privacy Sandbox), incognito mode, and users' periodic cookie deletion have made traditional methods less stable.

Browser Fingerprinting has emerged as a technique for identifying devices based entirely on hardware characteristics, operating system, and browser rendering engine. This article will break down each component that constitutes a high-quality fingerprint, while analyzing why removing resolution (screen resolution) is the key to unlocking countless real-world use cases.

1. What is Browser Fingerprinting and How Does It Work?

Browser Fingerprinting is a method of collecting a set of public attributes that the browser provides through standard Web APIs. By hashing all these signals together, the system creates a unique identifier (Visitor ID) representing that device.

This technique possesses outstanding advantages:

Non-invasive to sensitive data: Does not read computer files, phone numbers, or email addresses.
Resistant to incognito mode: Even if users open an Incognito tab or delete cookies, the underlying hardware configuration and drivers remain unchanged.
Independent of local storage: The identifier is dynamically computed in each browsing session.

2. Detailed Breakdown of Components Creating a Device Fingerprint

A robust fingerprint system does not rely on a single parameter but combines multiple layers of entropy from hardware to software.

2.1. WebGL & GPU Pipeline (Graphics Card Signature)

Most modern devices use a GPU for web graphics rendering. Through WebGL:

Unmasked Vendor & Renderer: Using the WebGL extension WEBGL_debug_renderer_info, applications can directly read the chipset name and graphics card driver (e.g., Apple M2 Max, NVIDIA GeForce RTX 4070 Laptop GPU, AMD Radeon RX 7800 XT).
Sub-pixel Render Hash: Have the GPU silently draw a complex 3D geometric shape with reflected light, color gradients, and shadows onto an invisible canvas. Because each GPU microarchitecture and driver version processes antialiasing algorithms and floating-point coordinate rounding differently at the sub-pixel level, the hash string of the resulting pixel buffer creates an extremely unique graphics signature.

2.2. HTML5 Canvas 2D Rendering

Similar to WebGL, Canvas 2D draws a sample text containing special characters, emojis, and Bezier curves.

Each operating system uses a distinct font rendering engine: CoreText on macOS/iOS, DirectWrite on Windows, and FreeType on Linux/Android.
Differences in how the engine handles sub-pixel text antialiasing make Canvas 2D one of the highest-discriminating entropy sources.

2.3. AudioContext DSP (Audio Decoding Signature)

AudioContext fingerprinting does not record from a microphone or emit external noise. This technique operates entirely in memory using OfflineAudioContext:

A sine wave audio signal is passed through a chain of DSP filters (DynamicsCompressor, BiquadFilter, Oscillator).
After digital signal processing, the PCM audio buffer array is rendered. Audio compression algorithms, mathematical decoders, and the hardware sound card create microscopic errors, generating a unique sampleHash value for the device.

2.4. Math Functions Precision (IEEE-754 CPU Microarchitecture Errors)

The IEEE-754 standard for floating-point arithmetic allows for tiny errors in the final decimal places when calculating complex trigonometric functions.

When executing calculations such as Math.sin, Math.cos, Math.tan, Math.asin, Math.acos, and especially large values (Math.largeTan, Math.largeCos), different processor architectures (Intel Core x86_64, AMD Zen, Apple Silicon ARM64, Qualcomm Snapdragon) yield results that differ from the 16th decimal place onward.
This is a fingerprint at the silicon level, nearly impossible to emulate unless run on the correct CPU architecture.

2.5. Font Detection Probing (Scanning Installed Font List)

Each system has a unique collection of fonts installed over time (graphic fonts, office fonts, local fonts).

By creating an invisible string on the DOM and measuring the bounding box size (width and height) when applying each font in a list against default fonts (monospace, sans-serif), the system can accurately determine which fonts actually exist on the user's machine.

2.6. Hardware & Platform Details

Basic physical configuration parameters:

Architecture: CPU instruction set architecture (32-bit or 64-bit).
Device Memory: Approximate RAM capacity of the device (navigator.deviceMemory).
Hardware Concurrency: Number of available physical/logical CPU threads (navigator.hardwareConcurrency).
Platform: Core operating system name and kernel version.

2.7. Locales & System Environment

Languages: User's list of preferred languages (navigator.languages), e.g., ["en-US", "en", "vi-VN"].
Timezone: System timezone (IANA timezone like Asia/Ho_Chi_Minh) and UTC offset.

3. Architectural Turning Point: Why Removing `Resolution` Unlocks Countless Real-World Use Cases?

According to the traditional approach, most basic fingerprint libraries include screen.width, screen.height, and screen.resolution in the identification hash string. However, in real production environments, resolution is an extremely fragile entropy attribute.

Removing screen.resolution from the hash entropy to create a Resilient Fingerprint brings a significant leap in stability for the following scenarios:

1. Users Connecting/Disconnecting External Monitors (Laptop Docking & External Displays)

This is the most common scenario for office workers and developers:

When working on a laptop (Retina display 2880×1800), they have a certain resolution.
When they arrive at their desk and plug an HDMI/Thunderbolt cable into an external 4K monitor (3840×2160) or Ultra-wide (3440×1440) dock, all resolution parameters are completely replaced.
If resolution is retained: The system will treat this as two completely different users, losing the entire anonymous session.
When resolution is removed: GPU, Audio, Canvas, CPU Math, and Font remain unchanged, maintaining a continuous and smooth device identifier.

2. Dragging Windows Between Monitors (Multi-display Dragging)

In a multi-monitor setup (Dual/Triple Monitor), users frequently drag browser windows from the primary monitor to a secondary monitor with different resolutions and scale ratios. Resilient Fingerprint ensures no interruptions or session breaks when users move windows.

3. Screen Rotation on Mobile/Tablet Devices (Mobile/Tablet Orientation)

On smartphones and tablets (iPhone, iPad, Android):

When users rotate from Portrait mode (390×844) to Landscape mode (844×390) to watch videos or play web games, the width and height swap places.
If resolution is retained: Rotating the device is equivalent to "transforming the device," fragmenting analytics data and user sessions.
When resolution is removed: The device is uniquely identified regardless of how it is held.

4. Using Split Screen & Tiling Window Managers

iPad users (Stage Manager / Split View), Windows users (Snap Assist), or Linux/macOS users (i3, Hyprland, Yabai) frequently work with split or dynamically resized frames. Decoupling resolution makes the system completely immune to such size changes.

5. Changing Display Scale (OS Display Scaling & Browser Zoom)

Users often change DPI scaling on Windows (100% → 125% → 150%) or use Ctrl + / Ctrl - to zoom in and out of the interface. Removing resolution ensures identification is not dependent on individual vision or screen zoom preferences.

4. Technical Guide: How to Configure and Use Fingerprint

4.1. Configuring Client-Side Collection with Thumbmark

To create a Resilient Fingerprint, you can use the @feelai/thumbmark library with a configuration that excludes screen.resolution:

```typescript import { Thumbmark } from "@feelai/thumbmark"; import { UAParser } from "ua-parser-js";

export const getResilientFingerprint = async () => { // Exclude the fragile resolution attribute const client = new Thumbmark({ exclude: ["screen.resolution"], });

const info = await client.get(); const ua = UAParser(navigator.userAgent); info.platform = ua.os.name ?? "Unknown";

return { thumbmarkId: info.thumbmark, platform: info.platform, components: info.components, version: info.version, }; }; ```

4.2. Combining with Edge Headers on Server-Side

To enhance uniqueness, the server (Cloudflare Worker or Next.js Edge Route) can combine client-sent data with unforgeable network headers:

```typescript export const createServerMasterFingerprint = async ( req: Request, clientData: any, ) => { const serverInfo = { requestIp: req.headers.get("CF-Connecting-IP") || "127.0.0.1", country: (req as any).cf?.country || req.headers.get("cf-ipcountry") || "", region: (req as any).cf?.region || req.headers.get("x-cf-region") || "", timezone: (req as any).cf?.timezone || req.headers.get("x-cf-timezone") || "", };

// Remove resolution from the screen object before calculating the hash const { screen, ...otherComponents } = clientData.components || {}; const cleanScreen = screen ? { ...screen, resolution: undefined } : {};

const entropyComponents = [ serverInfo.requestIp, serverInfo.country, serverInfo.region, serverInfo.timezone, clientData.platform, clientData.thumbmarkId, JSON.stringify(otherComponents.audio), JSON.stringify(otherComponents.fonts), JSON.stringify(otherComponents.hardware), JSON.stringify(otherComponents.locales), JSON.stringify(otherComponents.math), JSON.stringify(cleanScreen), JSON.stringify(otherComponents.webgl), ];

const encoder = new TextEncoder(); const digestBuffer = await crypto.subtle.digest( "SHA-256", encoder.encode(entropyComponents.join("|")), );

const hashHex = Array.from(new Uint8Array(digestBuffer)) .map((b) => b.toString(16).padStart(2, "0")) .join("");

return { masterFingerprint: hashHex.slice(0, 32), serverInfo, }; }; ```

5. Interactive Experience: Explore Your Digital Fingerprint Now

You can directly observe all WebGL, AudioContext, differential CPU error, and font list parameters of the device you are using with the FeelAI Fingerprint Inspector tool:

👉 Experience it now at: FeelAI Fingerprint Inspector

The tool allows you to flexibly switch between Standard Hash (including resolution) and Resilient Hash (excluding resolution) to directly verify the mechanism of maintaining identity when resizing or changing displays.