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


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.

10 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.

  • Xavier Combelle

    Je viens de me faire la réflexion suivante (sur https://www.reddit.com/r/sametmax/comments/4v785h/code_review/d5w8hzv ): dans le cas de génération des avatars ou des mots de passe, par exemple pour zerobin, la fonction de hachage à tout interêt à ne pas être résistante aux collisions, son seul rôle étant d’avoir un avatar unique pour chaque ip/adresse mail/mot de passe dans le contexte d’une discussion/d’un site/d’un utilisateur. (il faut juste que le nombre de différents avatars/mots de passe dans un contexte soit suffisamment grand). Au contraire utiliser une fonction résistante au collision permet d’utiliser le vizhash comme un oracle pour vérifier si un mot de passe/une adresse mail/adresse ip correspond a un vizhash donné. Bien sur, si on veut juste vérifier si une adresse mail ou une adresse ip est bien celle d’un utilisateur, dans ce cas on peut en avoir la certitude avec une probabilité de l’ordre de (à la louche) 1-1/nombre de hash différent. Ceci dit c’est beaucoup mieux que en être sur avec une certitude absolue.

  • Sam Post author

    Pour que ce soit un problème, il faudrait que l’on ait l’image de la chose qu’on veut matcher. Si tu as cette image, puisqu’elle est générée uniquement de manière ephémère côté client, c’est que tu as accès à la page et vizhash est le dernier des problèmes.

    • Xavier Combelle

      @Sam, pas forcément, tu peux voir le vizhash sans accéder au coté client. par exemple dans le cas d’utilisation du mot de passe, tu peux regarder l’écriture du mot de passe par dessus l’épaule (c’est contre ce type d’attaque qu’il est masqué)

  • Sam Post author

    Oui mais il faudrait prendre un photo pour pouvoir faire un brut force dessus plus tard. Ca commence à être super tordu, et suppose que tu es dans un environnement où:

    • tu as des infos super importantes;
    • quelqu’un veut VRAIMENT te les voler;
    • tu es dans un environnement qui permet à cette personne de mettre en place ce hack. Vu les 2 lignes du dessus, visiblement tu as des problèmes plus grave que vizhash.
    • tu as un système qui utilises vizhash et pour un système d’auth à simple facteur.

    Ca fait beaucoup de si. Ta critique reste valable, mais étant donné la taille et le contexte du projet, je pense qu’on peut garder toute modification sous le coude pour quand la probabilité d’une telle attaque sera plus réaliste.

    On pourra alors imaginer faire un backend pour le hashing, et le rendering, et permettre aux utilisateur de choisir un backend a fortes collisions, un rendering different de l’image par défaut, etc.

    • Xavier Combelle

      Je sais qu’il y a des problèmes de sécurité plus important que vizhash. Ceci dit, il n’y a pas de raison que vizhash soit le maillon faible alors qu’on peut très facilement augmenter sa force: il s’agit seulement de faire un truc aussi simple que hash = hash & 0xFFF

Comments are closed.

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