web-dev-qa-db-fra.com

Masquage des caractères d'entrée sans type = mot de passe

J'ai donc un problème avec les nouveaux navigateurs qui sauvegardent leurs mots de passe. Dites que j'ai une boîte de mot de passe comme suit:

<input type="password" autocomplete="off" />

De nouveaux navigateurs tels que IE11 et Safari dans iOS 7.1 ont commencé à ignorer spécifiquement la fonction autocomplete = "off" dans les zones de mot de passe et proposent à l'utilisateur de sauvegarder le mot de passe. Dans mon entreprise (une banque), nous considérons cela comme un problème de sécurité. 

Je me demandais si quelqu'un avait déjà résolu ce problème. Peut-être que quelqu'un a écrit un plugin javascript qui masque une entrée normale [type = text] afin que l'attribut autocomplete = "off" soit respecté.

Mettre à jour:

Pour un peu plus d’informations, voici la documentation de la saisie semi-automatique sur msdn: http://msdn.Microsoft.com/en-us/library/ie/ms533486%28v=vs.85%29.aspx

javascripthtmlinternet-explorer-11
15
gislikonrad

Tout d'abord, autocomplete = "off" doit figurer sur l'élément <form> et non sur les champs individuels. En effet, les navigateurs stockent généralement ensemble les valeurs de tous les champs d’un formulaire donné (par exemple, pour permettre l’enregistrement de plusieurs combinaisons de nom d’utilisateur/mot de passe pour le même site).

Définissez-le dans le formulaire, et cela devrait fonctionner parfaitement pour vous. (Bien que les mots de passe déjà enregistrés soient toujours automatiquement complétés, effacez donc votre banque de mots de passe avant le test.)

Cependant, je suggérerais que vous poursuivez probablement la mauvaise cible si cela est considéré comme un problème de sécurité.

La raison pour laquelle les navigateurs offrent cette fonctionnalité est que les utilisateurs veulent pouvoir stocker leurs identifiants de connexion. Les empêcher de le faire ne les empêchera pas de vouloir, et si les utilisateurs le souhaitent vraiment, ils peuvent toujours le contourner - il existe des plug-ins de navigateur explicitement conçus pour tuer la fonctionnalité autocomplete = "off" et autoriser tous les utilisateurs. les mots de passe à sauvegarder.

La manière dont votre utilisateur stocke le mot de passe à la fin n'est en définitive pas votre préoccupation de sécurité, ni une chose sur laquelle vous avez réellement le contrôle.

En fait, si nous empêchons les gens de stocker leurs mots de passe, il est plus probable qu’ils utilisent le même mot de passe à plusieurs endroits (tout simplement parce que les gens n’ont pas la capacité de retenir des mots de passe différents pour chaque site qu’ils utilisent). Si vous ne les enregistrez pas, vous pourriez en fait rendre les mots de passe de vos utilisateurs moins sécurisés.

Si votre site a un réel besoin de sécurité qui ne permet pas de sauvegarder un mot de passe, vous devrez envisager un autre mécanisme. Par exemple, les identifiants bancaires de ces jours obligent souvent les utilisateurs à entrer des caractères numérotés spécifiques à partir de leur mot de passe - par exemple "Veuillez saisir les cinquième, huitième et douzième caractères de votre mot de passe" .

Cependant, ces systèmes visent davantage à sécuriser la transmission du mot de passe que son stockage: en ne saisissant que certains caractères, il n'est pas nécessaire de saisir ou de transmettre le mot de passe complet, il n'y a donc aucune chance qu'il soit être piraté en route. Il est toujours supposé que l'utilisateur aura probablement le mot de passe noté quelque part (surtout s'il doit déterminer quel est le douzième caractère de la chaîne).

Ce type de système peut être très pénible pour les utilisateurs, mais offre un véritable niveau de sécurité de connexion sans devoir saisir ou transmettre le mot de passe. Le niveau de difficulté supplémentaire ajouté au processus de connexion signifie toutefois que seuls les sites très sécurisés, tels que les banques, sont susceptibles d'utiliser ce type de système avec un mot de passe standard.

4
Spudley

Vous pouvez créer un faux mot de passe avec du texte en utilisant une police personnalisée:

D&EACUTE;MO

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url("path/to/password.ttf");
}

input.key {
  font-family: 'password';
  width: 100px; height: 16px;  
}

Notez que cela ne fait que poser plus de problèmes de sécurité.

14
rafaelcastrocouto

Voici une idée, mais je le suggère pour les cas où les navigateurs obtiennent une erreur de remplissage automatique pour les mots de passe qui ne sont pas utilisés pour les connexions. Il devrait probablement exister un meilleur standard d'identification des écrans de connexion afin que les navigateurs ne soient pas obligés d'utiliser des méthodes heuristiques pour rechercher des champs avec type="password". 

Chargez le formulaire avec le champ mot de passe avec type="text". Les algorithmes d'auto-complétion des navigateurs l'ignoreront donc. Lorsque l'utilisateur entre quelque chose dans ce champ, changez son type="password".

Je ne suis pas un grand programmeur JavaScript, mais j'ai piraté un JSFiddle pour montrer comment cela fonctionne théoriquement.

onfocus serait peut-être une meilleure solution, mais je ne l'ai pas essayée.

12
Fuhrmanator

Avez-vous essayé de changer l'attribut name en quelque chose de ridicule? Je crois que la fonctionnalité autocomplete est basée sur l'attribut name. Je ne suis pas sûr à 100%, mais lors des tests limités que j'ai effectués, l'attribut name modifiait le type de données de saisie semi-automatique présentées.

Exemple évident pour que tout soit clair: name = "nom d'utilisateur" montrait mon nom d'utilisateur alors que name = "email" montrait mes adresses électroniques saisies précédemment. Lorsque je suis passé à name = "browsersAreStupidForImplementingThisFeature", je n'ai reçu aucune donnée de saisie semi-automatique. 

Besoin de tests supplémentaires, mais pourrait être un bon endroit pour commencer? Bonne chance

0
Jesse