ClientRects fingerprinting uses the getBoundingClientRect() and getClientRects() methods to detect subtle rendering differences between devices.
🔬 How It Works
const element = document.createElement('div');
element.innerHTML = 'Test text for fingerprinting';
document.body.appendChild(element);
const rect = element.getBoundingClientRect();
console.log(rect.width); // e.g., 142.328125
console.log(rect.height); // e.g., 18.4
console.log(rect.x); // Position values
console.log(rect.y);🎯 Why It's Unique
Element dimensions vary due to:
- Font rendering: Different fonts/sizes
- Zoom level: Browser zoom affects measurements
- DPI scaling: High-DPI displays
- Anti-aliasing: Text smoothing differences
- OS rendering: Platform-specific rendering
📊 Precision
Values are returned as floating-point numbers with high precision (e.g., 142.328125), making even tiny differences detectable.
🛡️ Spoofing ClientRects
Antidetect browsers can add noise to ClientRects values or return consistent values per profile to prevent fingerprinting.