Le problème a été relevé récemment dans plusieurs articles sur la sécurité : doit-on vraiment masquer les mots de passe dans les formulaires ?
Solution
Mot de passe en clair au survol
La solution que je propose est relativement simple : lorsque le curseur de la souris survole le champ de mot de passe, celui-ci est affiché en clair. Sinon, il est masqué. L’explication est donnée en fin d’article.
Voici un premier jet de plugin jQuery qui permet de mettre en œuvre ce comportement :
(function($){
$.fn.reveal = function() {
this.filter('input[type="password"]').mouseover(function() {
$(this).replaceWith(
$('<input name="'+$(this).attr('name')+'" type="text" />')
.attr('class', $(this).attr('class'))
.val($(this).val())
.mouseout(function() {
$(this).replaceWith(
$('<input name="'+$(this).attr('name')+'" type="password" />')
.attr('class', $(this).attr('class'))
.val($(this).val())
.reveal()
);
})
);
});
return this;
};
})(jQuery);
Le plugin est relativement sommaire et peu complet (il correspond à une utilisation que j’en fait pour un projet personnel). Cependant, le principe est simple à comprendre et il est donc adaptable à d’autres situations.
Pour l’utiliser, il suffit d’appeler la fonction reveal() sur un objet jQuery (exemple : $('input.monPassword').reveal();).
Explication
Les arguments relevés dans l’article sont tout à fait judicieux : ne pas afficher le mot de passe est sujet à erreurs plus fréquentes et risque d’entraîner les utilisateurs à choisir des mots de passe plus faciles à taper. Des solutions plus ou moins bonnes ont été proposées, notamment par arc90 (HalfMask et HashMask). J’ai pu également lire une solution basée sur une case à cocher qui permettrait d’afficher ou masquer le mot de passe.
En ce qui me concerne, à l’exposé du problème j’ai pu identifier deux types d’utilisateurs : les utilisateurs novices ou standards, pour qui le masquage du mot de passe peut être un inconvénient et les utilisateurs avancés qui sont habitués à taper des mots de passe complexes correctement, et qui préfère généralement le masquage par défaut. La solution de la case à cocher est selon moi trop contraignante : le comportement par défaut risque d’agacer un des types d’utilisateurs.
En réfléchissant à la façon dont les deux types d’utilisateurs entraient un mot de passe (et plus généralement des données de formulaire), j’ai pu détacher un comportement relativement commun : un utilisateur standard va très souvent cliquer sur le champ de formulaire pour l’indiquer tandis que l’utilisateur avancé va utiliser les contrôles clavier. Ainsi, la solution peut adopter un état par défaut (masquage ou affichage en clair) qui est deviné par rapport à ce comportement.
En l’occurrence, non seulement les utilisateurs standards cliquent sur le champ du formulaire, mais en général ils laissent le curseur dessus. C’est ce comportement précis qui dicte la solution expliquée plus haut.
Sans forcément être la solution idéale, je pense qu’elle a quelques avantages :
- un état par défaut plus adapté au type d’utilisateur ;
- un comportement relativement simple à comprendre et utiliser (plus qu’une case à cocher, a priori) ;
- une réponse très générale, applicable à beaucoup d’autres cas d’utilisation ;
- une sécurité une fois que l’utilisateur a compris le principe.
Le principal point faible est actuellement que ce comportement n’est pas naturel pour des personnes qui sont habituées à ne jamais voir leur mot de passe, et l’utilisateur standard est donc souvent surpris de lire son mot de passe en clair lorsqu’il lève les yeux du clavier. Une habitude est nécessaire pour que celui-ci pense à retirer la souris du champ du formulaire si une autre personne est présente dans la pièce.
(function($){
$.fn.reveal = function() {
this.filter(‘input[type="password"]‘).mouseover(function() {
$(this).replaceWith(
$(‘<input type=”text” name=”‘+$(this).attr(‘name’)+’” />’)
.attr(‘class’, $(this).attr(‘class’))
.val($(this).val())
.mouseout(function() {
$(this).replaceWith(
$(‘<input type=”password” name=”‘+$(this).attr(‘name’)+’” />’)
.attr(‘class’, $(this).attr(‘class’))
.val($(this).val())
.reveal()
);
})
);
});
return this;
};