Définition

Le Canvas Fingerprinting exploite les variations de rendu graphique entre navigateurs et systèmes pour créer une empreinte unique. En demandant au navigateur de dessiner un texte ou une forme, puis en analysant le résultat pixel par pixel, les sites peuvent identifier les visiteurs même sans cookies. Cette technique est utilisée pour le tracking et la détection de bots.

Deep Dive

Comment fonctionne le Canvas Fingerprinting

Principe technique

1. Un script JavaScript crée un élément `<canvas>` caché

2. Il dessine du texte avec des polices spécifiques

3. Il applique des effets (ombres, dégradés, courbes)

4. Le résultat est converti en hash via `toDataURL()`

Pourquoi chaque rendu est unique

Le rendu dépend de nombreux facteurs :

**GPU** : Différences de traitement graphique

**Drivers** : Versions et configurations

**Polices** : Jeu de polices installées

**Anti-aliasing** : Lissage des contours

**OS** : Paramètres de rendu système

Statistiques de diversité

Selon une étude de l'EFF (Electronic Frontier Foundation) :

Plus de 80% des navigateurs ont une empreinte canvas unique

Combiné avec d'autres signaux, le fingerprinting atteint 99%+ de précision

Détection dans les contextes headless

Les environnements Puppeteer/Playwright génèrent des rendus canvas "parfaits" qui sont paradoxalement suspects car trop uniformes.

Code Playground

Génération d'empreinte canvas et technique de contournement pour scrapers

javascript

// Génération d'une empreinte canvas (côté site)
function getCanvasFingerprint() {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 50;
  
  const ctx = canvas.getContext('2d');
  
  // Texte avec différentes polices
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('Crawlers.fr 🤖', 2, 2);
  
  ctx.font = '18px Georgia';
  ctx.fillStyle = '#3b82f6';
  ctx.fillText('Fingerprint Test', 4, 20);
  
  // Formes géométriques
  ctx.beginPath();
  ctx.arc(50, 40, 10, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(168, 85, 247, 0.5)';
  ctx.fill();
  
  // Extraction du hash
  const dataUrl = canvas.toDataURL();
  return hashCode(dataUrl);
}

function hashCode(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash.toString(16);
}

// Pour les scrapers : injection d'un fingerprint réaliste
// En mode headless, on peut spoofer le canvas :
// page.evaluateOnNewDocument(() => {
//   HTMLCanvasElement.prototype.toDataURL = () => 'data:...';
// });

Avis d'Expert 2026

Le Canvas Fingerprinting évolue vers des techniques plus sophistiquées en 2026 : WebGL fingerprinting, Audio fingerprinting, et même analyse des timings de rendu. Les navigateurs comme Firefox et Brave intègrent des protections anti-fingerprinting. Pour le scraping éthique, le respect de la vie privée des utilisateurs doit primer.

Canvas Fingerprinting