Canvas Fingerprinting : fonctionnement et protection

Qu'est-ce que le Canvas Fingerprinting ?

L'élément HTML5 Canvas a été conçu pour dessiner des graphiques, rendre des diagrammes et créer des visualisations interactives dans le navigateur. C'est l'une des API web les plus utilisées, alimentant tout, des tableaux de bord de données aux jeux sur navigateur.

Cependant, Canvas a un effet secondaire : lorsque le navigateur rend du texte ou des formes sur un élément Canvas, la sortie exacte au niveau des pixels dépend du GPU de l'appareil, des pilotes graphiques, de la composition du système d'exploitation, du moteur de rendu des polices et de l'implémentation de l'anticrénelage. Cela signifie que deux ordinateurs différents rendant les mêmes instructions Canvas produiront des données de pixels légèrement différentes.

Cette variation est cohérente et reproductible sur le même appareil, ce qui en fait un signal stable pour identifier les navigateurs. Selon les recherches du projet Web Transparency and Accountability de l'Université de Princeton, le Canvas fingerprinting a été détecté sur plus de 5 % des 100 000 sites les plus visités dès 2014, et sa prévalence n'a fait que croître depuis. Une étude de 2020 publiée au USENIX Security Symposium a montré que le fingerprinting basé sur Canvas peut distinguer les appareils avec plus de 99 % de précision lorsqu'il est combiné avec d'autres signaux du navigateur.

L'aspect préoccupant est que le Canvas fingerprinting ne nécessite aucune permission, ne stocke aucune donnée sur l'appareil et est invisible pour les utilisateurs. Il n'y a pas de demande d'autorisation, pas de bannière de cookies et aucun mécanisme de refus intégré aux navigateurs.

Le pipeline de collecte que les trackers exécutent est court, silencieux et réutilisable sur des millions de pages. Le diagramme ci-dessous trace ce qui se passe entre l'arrivée d'un script de tracker sur la page et l'aboutissement d'un identifiant stable dans une base de données device-graph.

L'étape de collecte est bon marché pour le tracker et totalement opaque pour le visiteur. La partie coûteuse vit en aval dans le device graph: chaque site qui embarque le même tracker contribue des hashes qui sont regroupés, construisant un profil qui suit l'utilisateur à travers des domaines sans rapport. Le travail du défenseur n'est donc pas de bloquer l'appel de dessin mais de rendre la sortie rendue stable, réaliste et cohérente avec tout le reste que le navigateur signale.

Pourquoi la sortie Canvas varie entre les appareils

Pour comprendre pourquoi Canvas produit une sortie unique, il est utile de comprendre le pipeline de rendu :

1. Rastérisation des polices : Les différents systèmes d'exploitation utilisent des moteurs de rendu de texte différents (DirectWrite sur Windows, Core Text sur macOS, FreeType sur Linux). Chaque moteur produit des formes de glyphes, des hints et des schémas d'anticrénelage subtilement différents.

2. Rendu GPU : La carte graphique et ses pilotes affectent la façon dont les formes, les dégradés et les opérations de composition sont traités. Un GPU NVIDIA produit une sortie sous-pixel légèrement différente d'un GPU AMD ou Intel, même pour les mêmes instructions de dessin.

3. Gestion des couleurs : Les systèmes d'exploitation appliquent différents profils colorimétriques et corrections gamma. Un dégradé Canvas rendu sur un système macOS calibré pour l'affichage semble différent du même dégradé sur une installation Windows par défaut.

4. Algorithmes d'anticrénelage : L'approche pour lisser les bords varie selon la plateforme, la version du pilote GPU et les paramètres du système d'exploitation. Ces différences sont suffisamment petites pour être invisibles à l'oeil nu mais suffisamment grandes pour produire un hash différent lorsque les données de pixels sont converties en chaîne.

5. Précision en virgule flottante : Différentes architectures CPU peuvent gérer les calculs en virgule flottante légèrement différemment, affectant le rendu des courbes de Bézier et les calculs de transformation.

Lorsque la sortie pixel est convertie en URL de données ou en tableau ImageData et hashée, le résultat est un identifiant stable, spécifique à l'appareil. Ce hash ne change pas entre les sessions du navigateur, survit au vidage du cache et persiste entre les fenêtres de navigation privée.

Le diagramme ci-dessous oppose les trois principales plateformes hôtes côte à côte. Chaque colonne montre la chaîne de composants qui contribuent au tampon de pixels final, et chaque chaîne produit un hash différent même quand les appels de dessin JavaScript sont identiques.

Pourquoi les outils de confidentialité courants sont insuffisants

Plusieurs approches tentent de résoudre le Canvas fingerprinting, mais chacune a des limitations significatives :

VPN et serveurs proxy

Un VPN change votre adresse IP mais n'a aucun effet sur la sortie Canvas. Le Canvas fingerprinting opère entièrement dans le moteur de rendu du navigateur et n'a rien à voir avec le trafic réseau. Deux appareils derrière le même VPN produisent toujours des empreintes Canvas complètement différentes.

Navigation privée / Mode incognito

Les modes de navigation privée effacent les cookies, l'historique et le stockage local à la fin de la session. Ils ne modifient en aucune façon le pipeline de rendu Canvas. Votre empreinte Canvas en mode incognito est identique à votre empreinte dans une fenêtre normale.

Extensions de navigateur

Les extensions qui bloquent ou modifient l'accès Canvas font face à un défi fondamental : elles opèrent au niveau de l'API JavaScript, pas au niveau du rendu. Les approches courantes incluent :

• Bloquer Canvas entièrement : C'est facilement détectable car les sites web peuvent vérifier si les opérations Canvas retournent des résultats vides ou des erreurs. Un Canvas bloqué est lui-même un signal d'empreinte distinctif.
• Ajouter du bruit aléatoire : Injecter des pixels aléatoires dans la sortie Canvas change l'empreinte à chaque chargement de page. Bien que cela empêche le suivi stable, cela crée un nouveau problème : une empreinte qui change à chaque fois est elle-même un signal fort indiquant que le navigateur utilise des outils de confidentialité.
• Retourner des données préfabriquées : Remplacer la sortie Canvas par des données précalculées casse les sites qui dépendent de Canvas pour des usages légitimes (graphiques, CAPTCHA, cartes) et produit souvent une sortie qui ne correspond pas aux autres signaux du navigateur.

Le problème fondamental est que les extensions peuvent intercepter les appels API mais ne peuvent pas contrôler le pipeline de rendu réel. Cela signifie que toute modification qu'elles apportent est intrinsèquement détectable par des vérifications de cohérence entre ce que le navigateur rapporte et ce qu'il rend réellement.

Randomisation au niveau du navigateur

Certains navigateurs implémentent la randomisation Canvas (comme la fonctionnalité de bruit Canvas de Brave). Cela ajoute de petites perturbations aléatoires à la sortie Canvas par origine. Bien que meilleure que les approches par extension, la randomisation a encore des compromis :

• Le schéma de bruit lui-même peut être analysé pour des propriétés statistiques qui diffèrent de la variation réelle des appareils
• La sortie randomisée peut ne pas être cohérente avec les signaux GPU, de polices et de système d'exploitation du navigateur
• Certaines implémentations ne randomisent que certaines opérations Canvas, laissant d'autres comme identifiants

L'approche au niveau du moteur de BotBrowser

BotBrowser adopte une approche fondamentalement différente. Au lieu de bloquer, randomiser ou intercepter Canvas au niveau de l'API, BotBrowser contrôle la sortie de rendu au niveau du moteur du navigateur pour produire des résultats cohérents et réalistes qui correspondent à un profil d'appareil complet.

Le diagramme ci-dessous empile les quatre modèles de défense courants face au type d'inspection qu'effectue un script de détection moderne. Chaque couche supérieure est détectable parce que l'inspection voit les preuves que la couche a été insérée. Le rendu au niveau du moteur ne produit aucune couche insérée du tout.

Comment ça fonctionne

Lorsque vous chargez un profil d'empreinte, BotBrowser configure l'ensemble du pipeline de rendu pour correspondre aux caractéristiques de l'appareil de ce profil. La sortie Canvas n'est pas modifiée après le rendu. Au lieu de cela, le rendu lui-même produit une sortie cohérente avec l'appareil cible :

chrome --bot-profile="/path/to/profile.enc" \
       --user-data-dir="$(mktemp -d)"

Cela signifie :

• Le hash Canvas est stable entre les sessions, tout comme il le serait sur un vrai appareil
• La sortie est cohérente avec les signaux GPU, de système d'exploitation et de polices du profil
• Les sites web qui utilisent Canvas pour des usages légitimes (graphiques, cartes, jeux) fonctionnent normalement
• Il n'y a pas de hooks ou d'interceptions au niveau de l'API qui pourraient être détectés

Contrôle déterministe du bruit

Pour les cas d'utilisation nécessitant des résultats reproductibles entre les exécutions de test, BotBrowser prend en charge une graine de bruit :

chrome --bot-profile="/path/to/profile.enc" \
       --bot-noise-seed=12345

Le même profil et la même graine produisent toujours une sortie Canvas identique, même après des redémarrages système et sur différents systèmes d'exploitation hôtes. C'est précieux pour :

• Les tests de régression où la sortie Canvas doit être comparée entre les exécutions
• Les scénarios de recherche nécessitant des conditions reproductibles
• Les pipelines CI/CD qui valident la cohérence de l'empreinte

Cohérence inter-plateformes

L'une des capacités les plus importantes de BotBrowser pour la protection Canvas est la cohérence inter-plateformes. Un profil Windows chargé sur macOS ou Linux produit une sortie Canvas qui correspond aux caractéristiques de rendu Windows définies dans le profil, pas au pipeline de rendu du système hôte.

Cela n'est possible que parce que BotBrowser contrôle le rendu au niveau du moteur. Une approche par extension ou au niveau de l'API ne peut pas remplacer les différences fondamentales de rendu entre les systèmes d'exploitation.

Enregistrement forensique Canvas

Pour les chercheurs en confidentialité et les développeurs qui ont besoin d'auditer le comportement Canvas, BotBrowser peut enregistrer toutes les opérations Canvas :

chrome --bot-profile="/path/to/profile.enc" \
       --bot-canvas-record-file="/path/to/canvas-log.json"

Cela capture chaque appel d'API Canvas, ses paramètres et la sortie résultante, fournissant une piste d'audit complète pour l'analyse sans nécessiter d'injection de code.

Guide de configuration

Protection de base avec Playwright

const { chromium } = require('playwright-core');

(async () => {
  const browser = await chromium.launch({
    executablePath: '/path/to/botbrowser/chrome',
    args: [
      '--bot-profile=/path/to/profile.enc',
    ],
    headless: true,
  });

  const context = await browser.newContext({ viewport: null });
  const page = await context.newPage();

  await page.goto('https://example.com');
  // La sortie Canvas sera cohérente avec le profil chargé
  await browser.close();
})();

Mode déterministe avec Puppeteer

const puppeteer = require('puppeteer-core');

const browser = await puppeteer.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-noise-seed=42',
  ],
  headless: true,
  defaultViewport: null,
});

Combinaison avec d'autres protections

Canvas est un signal parmi d'autres. Pour une protection complète, combinez la configuration Canvas avec les paramètres de fuseau horaire, de locale et de proxy :

chrome --bot-profile="/path/to/profile.enc" \
       --bot-noise-seed=12345 \
       --proxy-server="socks5://user:pass@proxy:1080" \
       --bot-config-timezone="America/New_York" \
       --bot-config-locale="en-US" \
       --bot-config-languages="en-US,en"

Vérification

Après avoir lancé BotBrowser, vérifiez que votre protection Canvas fonctionne correctement :

const page = await context.newPage();

// Rendre le contenu Canvas et capturer le hash
const hash1 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  c.width = 200;
  c.height = 50;
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('BotBrowser Canvas test', 2, 2);
  ctx.fillStyle = 'rgba(0, 50, 255, 0.5)';
  ctx.fillRect(50, 10, 100, 30);
  return c.toDataURL();
});

// Recharger et rendre à nouveau
await page.reload();
const hash2 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  c.width = 200;
  c.height = 50;
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('BotBrowser Canvas test', 2, 2);
  ctx.fillStyle = 'rgba(0, 50, 255, 0.5)';
  ctx.fillRect(50, 10, 100, 30);
  return c.toDataURL();
});

console.log('Canvas output stable:', hash1 === hash2);

Vous pouvez également valider en utilisant des outils de test d'empreinte publics tels que CreepJS ou BrowserLeaks. Ceux-ci devraient rapporter un hash Canvas cohérent sans anomalies.

Ce qu'il faut vérifier :

• Le hash Canvas reste le même entre les rechargements de page au sein de la même session
• Le hash Canvas correspond entre les sessions lors de l'utilisation du même profil et de la même graine de bruit
• Les différents profils produisent des hash Canvas différents
• Les outils de test d'empreinte n'affichent aucun avertissement lié au Canvas

La matrice de vérification que les défenseurs utilisent pour confirmer qu'une protection Canvas fonctionne est présentée ci-dessous. Chaque ligne représente un environnement, chaque colonne une propriété qui doit tenir. Une protection qui échoue à n'importe quelle cellule de la matrice peut être détectée par un fingerprinter déterminé.

Bonnes pratiques

1. Utilisez toujours un profil complet. La protection Canvas fonctionne mieux lorsque tous les signaux sont cohérents. Charger un profil garantit que Canvas, WebGL, les polices et les autres signaux s'alignent tous avec la même identité d'appareil.

2. Utilisez le mode déterministe pour les tests. Le flag --bot-noise-seed assure des résultats reproductibles, ce qui est essentiel pour les tests automatisés et les pipelines CI.

3. Ne mélangez pas les extensions modifiant Canvas avec BotBrowser. Les extensions de navigateur qui modifient Canvas entreront en conflit avec le contrôle au niveau du moteur de BotBrowser. BotBrowser gère la protection Canvas nativement.

4. Faites correspondre la localisation de votre proxy avec votre profil. Un profil configuré pour un appareil Windows basé aux États-Unis devrait utiliser un proxy basé aux États-Unis. La cohérence Canvas combinée à une géolocalisation incohérente affaiblit la cohérence globale de l'empreinte.

5. Enregistrez les opérations Canvas pour l'audit. Utilisez --bot-canvas-record-file pendant le développement pour vérifier quels appels Canvas votre site cible effectue et confirmer que BotBrowser les gère correctement.

Questions fréquemment posées

Le Canvas fingerprinting fonctionne-t-il en mode incognito ?

Oui. Le mode incognito ne change pas le pipeline de rendu du navigateur. Votre empreinte Canvas est identique dans les fenêtres normales et incognito.

Les sites web peuvent-ils détecter que le Canvas est protégé ?

Si la protection fonctionne par blocage ou randomisation du Canvas, alors oui, l'incohérence ou l'absence de données Canvas est elle-même un signal. BotBrowser contourne ce problème en produisant une sortie réaliste et cohérente via le moteur de rendu plutôt qu'en interceptant les appels API.

La protection Canvas de BotBrowser affecte-t-elle la fonctionnalité des sites web ?

Non. Parce que BotBrowser contrôle le pipeline de rendu plutôt que de bloquer les appels API, toutes les fonctionnalités dépendant du Canvas (graphiques, cartes, jeux, CAPTCHA) fonctionnent normalement.

Combien d'empreintes Canvas uniques BotBrowser peut-il produire ?

Chaque profil d'empreinte génère un hash Canvas distinct. BotBrowser fournit des centaines de profils, et les utilisateurs entreprise peuvent générer des profils personnalisés pour des configurations d'appareils spécifiques.

La protection Canvas fonctionne-t-elle sur toutes les plateformes ?

Oui. BotBrowser prend en charge Windows, macOS et Linux comme systèmes d'exploitation hôtes, et peut émuler la sortie Canvas pour toute plateforme cible prise en charge, indépendamment de l'hôte.

Quel est l'impact sur les performances de la protection Canvas ?

Minimal. Parce que la protection opère au sein du moteur de rendu plutôt que par post-traitement ou interception d'API, les opérations Canvas s'exécutent à une vitesse proche du natif.

Résumé

Le Canvas fingerprinting est l'une des techniques de suivi les plus répandues et les plus difficiles à contrer sur le web. BotBrowser y répond à la source en contrôlant le pipeline de rendu au niveau du moteur du navigateur, produisant une sortie cohérente et réaliste qui correspond à des profils d'appareils complets. Combiné avec la protection WebGL, le contrôle de l'empreinte audio et la gestion complète des profils, BotBrowser fournit une protection de la vie privée cohérente, réaliste et pratique pour un usage quotidien.