jQuery Visual Password est un plugin jQuery qui répond à cette question sans avoir à mettre le mot de passe en clair : il créé une image unique depuis le mot de passe, puis l’affiche. L’image se met à jour au fil de la frappe.

Impossible de se tromper, l’image change radicalement si on change le moindre caractère. Et pour cause, ça utilise VizHash.js :-)

Essayez :

On me sussure à l’oreille que ça peut être pratique pour les mails aussi, car c’est plus facile de voir si une image est changée que de chercher une faute de frappe.

On pourrait imaginer la même chose pour un champ d’adresse bitcoin, ou une signature PGP, un clé SSH, un hash de commit Git, etc.

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.