Websourcing.fr » Actualités, Web, Logiciels et Fun

PassShark, masquez les mots de passe comme sur l’iPhone avec Mootools

Tags: Confidentialité, Développement, Javascript, JQuery, Sécurité, Webdesign
Posté dans Billets, Webworker par Lionel Roux le 20 déc 2009

L’équilibre entre usabilité et sécurité est toujours un sujet de controverse sur le web. Faut-il ou pas masquer les mots de passe, ou bien au moins donner la possibilité de le faire ?

Les ingénieurs et ergonomes de Apple ont réglé le problème avec l’interface de l’iPhone. Lorsque vous utilisez celui-ci et que vous tapez un mot de passe, le dernier caractère entré reste visible et n’est pas masqué immédiatement (par une étoile ou un point, et suivant le réglage).

PassShark est une classe pour Mootools qui permet de reproduire le comportement de l’iPhone lors de la saisie de mots de passe : le dernier caractère saisie n’est pas masqué immédiatement.

Il suffit d’installer le petit script passshark.js sur vos pages et la prise en compte est automatique. Ce dernier se charge de trouver les champs de type password de vos formulaires et de les « instrumenter ».

PassShark permet de personnaliser un peu le comportement avec les quelques options disponibles. Il est par exemple possible de définir l’intervalle de temps avant le masquage du dernier caractère, le caractère de remplacement, …

//  1_ Include MooTools-Core and MooTools-More* in your document head
<script type="text/javascript" charset="utf-8" src="Mootools-Core.js"></script>
<script type="text/javascript" charset="utf-8" src="Mootools-More.js"></script>

// 2_ Include the PassShark script in your document head
<script type="text/javascript" charset="utf-8" src="PassShark.js"></script>

// 3_ Initialise PassShark, where 'sample_pass' is the id of your input,
// such as: id="sample_pass"
<script type="text/javascript">
    window.addEvent('domready', function(){
        new PassShark('sample_pass',{
            interval: 200,
            duration: 2000,
            replacement: '%u25CF',
            debug: false
        });
    });
</script>

D’un point de vue pré-requis, il vous faudra

• MooTools-Core version 1.2.4 minimum
• MooTools-More version 1.2.4.2 minimum

Il est compatible avec Safari 3+, Firefox 3+, Opera 10+, Internet Explorer 6, 7 et 8.
Je pense qu’il est compatible avec Chrome, à tester.

Ce que je trouve bien c’est qu’il n’est pas nécessaire de modifier les pages. Il n’est pas intrusif et se « dégrade » bien.

PassShark est distribué avec la licence Open Source MIT, vous pouvez donc l’utiliser librement dans tout vos projets.

Dans le même genre, vous trouverez les plugin pour jQuery HashMask et ChromaHash.

Téléchargez PassShark