Retour au Blog
Empreinte

Protection des empreintes Canvas avec BotBrowser

Comment BotBrowser contrôle le rendu HTML5 Canvas au niveau du moteur pour produire une sortie cohérente correspondant au profil. Découvrez pourquoi le fingerprinting Canvas menace la vie privée et comment s'en protéger.

Qu'est-ce que le fingerprinting Canvas ?

L'élément Canvas de HTML5 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, elle alimente tout, des tableaux de bord aux jeux basés sur le navigateur.

Cependant, Canvas a un effet secondaire : lorsque le navigateur rend du texte ou des formes sur un élément Canvas, la sortie 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 exécutant 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 des recherches du Web Transparency and Accountability Project de l'université de Princeton, le fingerprinting Canvas était présent sur plus de 5% des 100 000 principaux sites dès 2014, et sa prévalence n'a cessé d'augmenter. 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é à d'autres signaux du navigateur.

Ce qui est préoccupant, c'est que le fingerprinting Canvas ne nécessite aucune permission, n'enregistre pas de données sur l'appareil et est invisible pour les utilisateurs. Il n'y a pas d'invite, pas de bannière de cookies et pas de mécanisme d'opt-out intégré aux navigateurs.

Pourquoi la sortie Canvas varie-t-elle entre les appareils ?

Pour comprendre pourquoi Canvas produit des sorties uniques, il est utile de connaître la chaîne de rendu :

  1. Rasterisation des polices : les 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, du hinting et des schémas d'anticrénelage légèrement différents.

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

  3. Gestion des couleurs : les systèmes d'exploitation appliquent des profils colorimétriques et une correction gamma différents. Un dégradé Canvas rendu sur un macOS calibré ressemble différemment au même dégradé rendu sur une installation Windows par défaut.

  4. Algorithmes d'anticrénelage : l'approche pour lisser les bordures varie selon la plateforme, la version du pilote GPU et les paramètres du système. Ces différences sont trop faibles pour être perçues par l'œil humain, mais suffisantes 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 traiter les calculs flottants légèrement différemment, affectant le rendu des courbes bezier et les calculs de transformation.

Lorsque la sortie de pixels est convertie en data URL ou en tableau ImageData puis hachée, le résultat est un identifiant stable propre à l'appareil. Ce hash ne change pas entre les sessions, survit au vidage du cache et persiste dans les fenêtres d'incognito.

Pourquoi les outils de confidentialité courants sont insuffisants

Plusieurs approches tentent d'atténuer le fingerprinting Canvas, mais chacune présente des limites importantes :

VPN et serveurs proxy

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

Navigation privée / incognito

Les modes privés effacent les cookies, l'historique et le stockage local à la fin de la session. Ils ne modifient en rien la chaîne de rendu Canvas. Votre fingerprint Canvas en mode incognito est identique à celui d'une fenêtre normale.

Extensions de navigateur

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

  • Bloquer complètement Canvas : cela est facilement détectable car les sites peuvent vérifier si les opérations Canvas retournent des résultats vides ou des erreurs. Un Canvas bloqué est en soi un signal distinctif.
  • Ajouter du bruit aléatoire : injecter des pixels aléatoires dans la sortie Canvas change le fingerprint à chaque chargement. Bien que cela empêche le suivi stable, cela crée un autre problème : un fingerprint qui change à chaque fois indique que le navigateur utilise des outils de confidentialité.
  • Retourner des données falsifiées : remplacer la sortie Canvas par des données pré-calculées casse les sites qui s'appuient légitimement sur Canvas (graphiques, CAPTCHA, cartes) et produit souvent des sorties non cohérentes avec d'autres signaux du navigateur.

Le problème central est que les extensions peuvent intercepter les appels API mais ne peuvent pas contrôler la chaîne de rendu réelle. Toute modification peut être détectée via 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 une randomisation de Canvas (par exemple, la fonction de bruit Canvas de Brave). Cela ajoute de petites perturbations par origine. Bien que mieux que les approches basées sur des extensions, la randomisation a des compromis :

  • Le motif de bruit peut être analysé et différencié de la variation réelle des appareils
  • La sortie randomisée peut ne pas être cohérente avec les signaux GPU, polices et OS du navigateur
  • Certaines implémentations ne randomisent que certaines opérations Canvas, laissant d'autres comme identifiants

Approche au niveau du moteur de BotBrowser

BotBrowser adopte une approche fondamentalement différente. Plutôt que 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 réalistes et cohérents qui correspondent à un profil d'appareil complet.

Comment ça marche

Lorsque vous chargez un profil de fingerprint, BotBrowser configure toute la chaîne de rendu pour correspondre aux caractéristiques de l'appareil du profil. La sortie Canvas n'est pas modifiée après rendu ; 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 sur un appareil réel
  • La sortie est cohérente avec les signaux GPU, OS et polices du profil
  • Les sites 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 puissent être détectés

Contrôle déterministe du bruit

Pour les cas nécessitant des résultats reproductibles entre 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 un redémarrage du système ou sur des systèmes d'exploitation hôtes différents. Cela est utile pour :

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

Cohérence multiplateforme

L'une des capacités les plus importantes de BotBrowser pour la protection Canvas est la cohérence multiplateforme. 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 à la chaîne de rendu du système hôte.

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

Enregistrement forensique de Canvas

Pour les chercheurs en confidentialité et les développeurs qui ont besoin d'auditer le comportement de 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,
});

Combiné avec d'autres protections

Canvas n'est qu'un signal parmi d'autres. Pour une protection complète, combinez la configuration Canvas avec le fuseau horaire, la locale et les paramètres 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 la protection Canvas fonctionne correctement :

const page = await context.newPage();

// Rendre du 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 avec des outils publics de test de fingerprint tels que CreepJS, BrowserLeaks ou Pixelscan. Ils devraient signaler un hash Canvas cohérent sans anomalies.

À vérifier :

  • Le hash Canvas reste identique après le rechargement de la page dans la même session
  • Le hash Canvas correspond entre les sessions en utilisant le même profil et la même graine de bruit
  • Des profils différents produisent des hashes Canvas différents
  • Les outils de test de fingerprint n'affichent pas d'avertissements liés à Canvas

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, polices et autres signaux sont alignés sur la même identité d'appareil.

  2. Utilisez le mode déterministe pour les tests. L'option --bot-noise-seed assure des résultats reproductibles, essentiel pour les tests automatisés et les pipelines CI.

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

  4. Adaptez la localisation du proxy au profil. Un profil configuré pour un appareil Windows basé aux États-Unis devrait utiliser un proxy situé aux États-Unis. Un décalage entre la localisation du proxy et le profil affaiblit la cohérence du fingerprint.

  5. Enregistrez les opérations Canvas pour l'audit. Utilisez --bot-canvas-record-file en développement pour vérifier les appels Canvas du site cible et confirmer leur traitement par BotBrowser.

Questions fréquentes

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

Oui. Le mode incognito ne modifie pas la chaîne de rendu du navigateur. Le fingerprint Canvas est identique en fenêtres normales et en incognito.

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

Si la protection consiste à bloquer ou randomiser Canvas, alors oui, l'incohérence ou l'absence de données Canvas est en soi un signal. BotBrowser évite cela en produisant une sortie réaliste et cohérente via le moteur de rendu au lieu d'intercepter les appels API.

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

Non. Parce que BotBrowser contrôle la chaîne de rendu et ne bloque pas les appels API, toutes les fonctionnalités dépendantes de Canvas (graphiques, cartes, jeux, CAPTCHA) fonctionnent normalement.

Combien de fingerprints uniques BotBrowser peut-il produire ?

Chaque profil de fingerprint génère un hash Canvas distinct. BotBrowser propose des centaines de profils et les clients entreprises peuvent générer des profils personnalisés pour des configurations matérielles spécifiques.

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

Oui. BotBrowser prend en charge Windows, macOS et Linux en tant que systèmes hôtes, et peut émuler la sortie Canvas pour toute plateforme cible prise en charge, indépendamment du système hôte.

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

Minimal. Comme la protection s'exécute dans le moteur de rendu plutôt que comme post-traitement ou interception d'API, les opérations Canvas s'exécutent presque à vitesse native.

Résumé

Le fingerprinting Canvas est l'une des techniques de suivi les plus répandues et les plus difficiles à contrer sur le web. BotBrowser s'attaque au problème à la source en contrôlant la chaîne de rendu au niveau du moteur du navigateur, produisant une sortie cohérente et réaliste qui correspond à des profils d'appareils complets. Associé à WebGL protection, audio fingerprint control et comprehensive profile management, BotBrowser offre une protection de la vie privée cohérente, réaliste et utilisable au quotidien.

title: "Protection de l'empreinte Canvas avec BotBrowser" description: "Comment BotBrowser controle la sortie de rendu HTML5 Canvas au niveau du moteur du navigateur pour des resultats coherents et alignes avec le profil entre les plateformes." date: "2025-04-02" locale: fr category: fingerprint tags: ["canvas", "fingerprinting", "html5", "privacy", "tracking"] published: true

Le risque pour la vie privee

Le rendu HTML5 Canvas produit une sortie au niveau des pixels qui varie selon le GPU, les pilotes graphiques et la composition du systeme d'exploitation. Cette sortie peut etre hachee pour creer un identifiant d'appareil stable, sans permissions requises et sans donnees stockees sur l'appareil.

La solution BotBrowser

BotBrowser controle le pipeline de rendu au niveau du moteur du navigateur. Au lieu de bloquer ou randomiser Canvas, il produit une sortie coherente et realiste qui correspond au profil d'empreinte charge.

Coherence basee sur le profil

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

Le hachage Canvas reste stable entre les sessions et correspond a ce qu'un vrai appareil avec cette configuration produirait.

Controle de bruit deterministe

Avec une graine de bruit, la sortie Canvas est deterministe par profil :

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

Le meme profil et la meme graine produisent toujours la meme sortie Canvas, meme apres redemarrage.

Coherence multiplateforme

Un profil Windows sur Linux ou macOS produit un rendu Canvas qui correspond a la plateforme cible, pas au systeme hote.

Forensique Canvas

Pour l'analyse, BotBrowser peut enregistrer toutes les operations Canvas :

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

Verification

Apres avoir lance BotBrowser, verifiez la protection Canvas :

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

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

const page = await (await browser.newContext()).newPage();

const hash1 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('BotBrowser test', 2, 2);
  return c.toDataURL();
});

await page.reload();
const hash2 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('BotBrowser test', 2, 2);
  return c.toDataURL();
});

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

Verifications cles :

  1. Le hachage Canvas est stable apres rechargement de la page
  2. Pas d'avertissements "Canvas blocked" ou "Canvas inconsistent"
  3. Differents profils produisent differents hachages Canvas

Pour commencer

  1. Telechargez BotBrowser depuis GitHub
  2. Chargez un profil d'empreinte avec --bot-profile
  3. Utilisez --bot-noise-seed pour une sortie Canvas deterministe
  4. Utilisez --bot-canvas-record-file pour auditer les operations Canvas
#canvas#fingerprinting#html5#privacy#tracking