Empreintes de poste de travail avec canvas HTML5

HTML5_Logo_256

Canvas est un élément HTML5 qui est utilisé pour dessiner des graphiques et des animations sur une page web via un script en JavaScript, mais pas que...

Je vais vous montrer dans cet article que Canvas peut aussi être utilisé comme entropie supplémentaire dans la prise d'empreintes digitales d'un navigateur web ainsi que pour un suivi en ligne.

La technique est basée sur le fait qu'une même image de canvas peut être rendue différente sur plusieurs ordinateurs. Cela se produit pour plusieurs raisons :

  • Au niveau du format d'image : les navigateurs Web utilisent différents moteurs de traitement d'images, ainsi les options d'exportation des images, le niveau de compression et le rendu final de l'image peuvent être différents, même si elles sont identiques au niveau des pixels,
  • Au niveau du système : les systèmes d'exploitation ont des polices différentes, ils utilisent différents algorithmes et des paramètres anti-alias et de rendu sous-pixel.

Voici un code JavaScript qui produit des pixels:

var canvas = document.getElementById('fingerprint_canvas');
var ctx = canvas.getContext('2d');
var txt = "Tutorial canvas netapsys";
ctx.textBaseline = "top";
// le type commun du rendu
ctx.font = "'14px 'Arial";
ctx.textBaseline = "alphabetic";

// Quelques déformation de couleur et de mélange pour augmenter la différence de rendu

ctx.rotate(.05);
ctx.fillStyle = "#f60";
ctx.fillRect(100, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 200, 0, 0.7)";
ctx.fillText(txt, 4, 17);

Pour créer la signature dans le canvas, nous devons exporter les pixels de la mémoire de l'application en utilisant la fonction toDataURL() de canvas, qui retournera une chaîne codée en base64 du fichier d'image binaire. Ensuite, nous pouvons simplement créer une fonction de hachage SHA1, de cette chaîne pour avoir une chaîne à 40 caractères, qui deviendra notre empreinte digitale par canvas.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.