VizHash.js, notre implémentation libre de hash visuel utilisant HTML5 canvas 5


Sam et Max ont des goûts très différents, il n’y a pas beaucoup de sources d’information que nous lisons tous les deux, mais sebsauvage.net fait l’unanimité. Du coup quand il sort des outils forts mignons comme VizHash_GD, ça donne envie de faire pareil.

VizHash.js est une implémentation en javascript de la version PHP de VizHash, sous licence zlib/libpng. Elles produisent des images presques similaires pour le même texte, et sont donc compatibles.

Mais qu’est-ce que c’est que ce truc ?

Un hash est une empreinte unique d’un contenu. Par exemple, si ont fait le hash md5 du texte suivant:

Un petit garcon demande à sa soeur :
– Tu sais comment on fait les bébés, toi ?
– Bien sûr, c’est facile !
– Alors vas-y, dis-moi…
– Eh bien c’est simple, alors le papa il met la petite graine dans le ventre de la maman…
– Et après ?
– Et après, il la pousse bien au fond avec sa bite.

On obtient l’empreinte unique suivante:

a2def9b853b021e1644d5b65fc394e6f

Si on change UNE SEULE LETTRE, par exemple on met juste la première lettre en minuscule, on obtient une empreinte complètement différente:

caa111ff9cd798e495695a4a9f668eeb

On s’en sert pour plein de choses:

  • Verifier qu’un contenu n’a pas été corrompu lors d’un transfert de fichier.
  • S’assurer qu’aucune modification malveillante n’a été faite à un contenu.
  • Identifier rapidement si on possède le même contenu en base de données.
    Etc.

Le hash visuel

Mais les hashs textuels sont fastidieux à comparer manuellement. Quand la machine le fait, ça va, mais quand on doit le faire soi-même, c’est galère.

Le hash visuel fabrique une image unique à partir d’un contenu, de telle sorte qu’il soit facile pour un humain de comparer deux hashs en un coup d’oeil.

Essayez:

A quoi ça pourrait bien servir, dans la vraie vie ?

Vous savez, la vie ou je fais des trucs utiles…

  • Vérifier un password au moment de la frappe. Très facile de voir si le mot de passe est le bon, sans avoir à l’afficher.
  • Générer des avatars à partir de données comme l’addresse IP pour les commentaires anonymes.
  • Comparer les hashs comme ceux des commits GIT ou des addresse Bitcoin.

Par exemple, pour nous faire un don en bitcoin, vous pouvez les envoyer à:

JfymvUm9y2Z47puGfnsrGewDDCBPaYFj

Si votre logiciel bitcoin implémentait le hash visuel, vous pourriez être certain qu’il n’y a pas de faute de frappe avant de valider le paiement en comparant les deux images.

Plus concrètement, pour vérifier le mot de passe:

Si aimez les “$” et que vous cherchez une solution qui marche sous tous les navigateurs, VizHash_GD est fait pour vous. Si par contre vous voulez alléger la charge de votre serveur (ou que vous ne pouvez pas installer PHP GD) et que vous ciblez les navigateurs compatibles HTML5, VizHash.js sera un très bon choix.

Télécharger VizHash.js en ZIP

Si le README en anglais ne vous parle pas, cliquez sur les onglets “javascript” et “html” des démos ci-dessus pour voir le code.

Update:

On a créé un chouette plugin jquery pour checker les passwords avec VisHash.js.

5 thoughts on “VizHash.js, notre implémentation libre de hash visuel utilisant HTML5 canvas

  • bastoch

    Peut on imaginer coller ça dans une extension firefox/chrome, notamment pour la partie mot de passe et surcharger des pages existantes avec votre bout de javascript ?

  • bastoch

    Merci pour l’information !
    Je trouve néanmoins vos hash plus parlant, notamment par le fait que le votre génère aussi une forme, et pas seulement un code de quatre couleur.
    Mais je suppose qu’on ne peut pas tout avoir…

  • Marien

    Comme j’en ai eu besoin dernièrement mais qu’il n’y avait pas d’implémentation en Python je me suis permis de le faire. C’est honteusement repompé de votre code JavaScript (ce qui me fait douter sur l’aspect Pythonesque de mon code) et les hashs sont assez différents (j’ai l’impression que j’ai un problème de coordonnées) mais ça marche quand même globalement bien ;).

    Mon implémentation a l’avantage de pouvoir être aussi utilisée en ligne de commande et le désavantage de se baser sur Pillow qui est assez pénible à installer.

    Le code est sur GitHub et j’ai gardé la même licence.

  • Sam Post author

    Le code Javascript lui-même est immonde, c’est une transcription litérale du code PHP afin de garder des images similaires.

    Je tweet ton truc.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Des questions Python sans rapport avec l'article ? Posez-les sur IndexError.