L'API Canvas est conçue pour dessiner des graphiques dans un navigateur Web. Il peut être utilisé pour l'animation, les graphismes de jeux, la visualisation de données, l'édition d'images, le traitement vidéo en temps réel, etc. Il peut également être utilisé pour le suivi en ligne via les empreintes digitales du navigateur. La technologie s'appuie sur les changements dans la façon dont une image de canevas s'affiche sur différents navigateurs et plates-formes Web pour créer une empreinte numérique personnalisée du navigateur d'un utilisateur. Mais il est possible de le répéter dans le même environnement matériel.

Détection de la fonction Canvas

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(couramment utilisé pour la reconnaissance d'empreintes digitales)
• OffscreenCanvas API
• Canvas native

  La fonction Canvas toDataURL peut également être modifiée par les plug-ins du navigateur, mais est facilement identifiable

• la stabilité

  Canvas est stable sur le même appareil et le même environnement de navigateur

• bruit non humain

  Certains navigateurs d'empreintes digitales ou plug-ins d'empreintes digitales peuvent ajouter des paramètres au bruit du canevas, mais ils peuvent toujours être reconnus.

Détails de l'image

Causes des empreintes digitales sur toile

La façon dont une image Canvas est rendue sur le canevas peut varier en fonction du navigateur Web, du système d'exploitation, de la carte graphique et d'autres facteurs, ce qui donne lieu à une image unique qui peut être utilisée pour créer une empreinte digitale.

1. Anticrénelage

La technologie anti-aliasing est une sorte de filtre de beauté et elle est largement utilisée. Si le lissage des polices n'est pas activé dans le système d'exploitation, certaines polices auront un aspect horrible sur l'écran de votre ordinateur. De manière générale, les systèmes d'exploitation Windows activent par défaut le lissage des polices et des images. Sous Mac OS X, l'anticrénelage semble fonctionner uniquement pour les polices inférieures à une certaine taille. Non seulement au niveau du système d'exploitation, certains navigateurs intègrent également leur propre technologie d'anticrénelage. Par exemple, Safari utilise son propre moteur de rendu de polices intégré. Et mieux encore, la technologie d'anticrénelage fonctionne également lors du dessin de polices et d'images sur Canvas.

Comme le montre la figure ci-dessous, le côté gauche indique l'état dans lequel le lissage des polices n'est pas activé, tandis que le côté droit indique qu'il est activé :

La technologie d'anticrénelage générera des pixels de couleur non pure, et les valeurs des pixels dans ces états intermédiaires sont affectées par le profil de couleur de la carte graphique, ce qui entraîne des couleurs différentes. Nous appelons cela du bruit. En dessinant les mêmes polices et images sur une toile suffisamment grande, puis en calculant toutes les données de pixels, des données d'empreintes digitales relativement uniques peuvent être obtenues.

2. Indication de police

L'une des fonctionnalités de réglage fin est l'ajustement de la grille, ce qui signifie modifier la hauteur et la largeur des caractères de police pour les aligner sur la grille de pixels définie affichée à l'écran. L'image est affichée à l'écran sous la forme d'une grille de petits carrés. Les polices peuvent être déplacées vers la gauche et la droite pour garantir qu'elles s'affichent correctement sur la grille. Cela permet également de garantir que la forme et la disposition de la police sont à peu près identiques sur différents supports. écrans.

Grâce à l'image GIF suivante, qui est une collection d'images de canevas provenant de dizaines d'utilisateurs différents, nous pouvons voir intuitivement les différences dans la présentation du même code dans différents environnements d'appareil :

Comme le montrent les détails de l'image ci-dessus, de manière générale, nous pouvons appeler la fonction toDataURL pour obtenir les données base64 de l'image Canvas, ou nous pouvons obtenir la somme de contrôle CRC du bloc IDAT à partir du bloc de données de l'image PNG générée par Canvas. Nous pouvons ensuite calculer le hachage de cette chaîne (somme de contrôle base64 ou CRC) (l'algorithme exact varie d'un site à l'autre) comme empreinte digitale Canvas.

Remarque : Il existe de nombreuses raisons pour lesquelles les empreintes digitales Canvas varient d'un site Web à l'autre. Différentes chaînes utilisées (somme de contrôle base64 ou CRC), différents algorithmes de hachage (MD5, SHA, MUMUHASH, etc.) rendront l'empreinte digitale Canvas complètement différente, mais la réalité. L'empreinte digitale Canvas est stable, donc dans le même environnement de navigateur et de périphérique, l'empreinte digitale Canvas sous le même site Web est corrigée. C'est également la base théorique de l'utilisation des empreintes digitales Canvas pour l'identification assistée par l'utilisateur, qui possède des propriétés stables.