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

Tout d'abord, autocomplete = "off" devrait être sur l'élément <form> , et non sur les champs individuels. C'est parce que les navigateurs stockent généralement les valeurs pour tous les champs dans un formulaire donné ensemble (p. Ex., Pour permettre d'enregistrer plusieurs combinaisons de nom d'utilisateur / mot de passe pour le même site).

Réglez-le sous la forme, et cela devrait fonctionner très bien pour vous. (Bien que les mots de passe déjà enregistrés soient généralement automatiquement complétés, alors effacez votre magasin de mots de passe avant de tester)

Cependant, je suggère 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 parce que les utilisateurs veulent pouvoir stocker leurs informations d'identification de connexion. En empêchant de le faire, cela ne les empêchera pas de vouloir, et si les utilisateurs veulent vraiment, il existe encore un certain nombre de façons dont ils peuvent contourner – il existe des plug-ins de navigateur explicitement conçus pour tuer thew autocomplete = "off" Et permettre à tous les mots de passe d'être sauvegardés.

La façon dont votre utilisateur stocke le mot de passe à sa fin n'est finalement pas votre problème de sécurité, et ce n'est pas quelque chose dont vous avez vraiment le contrôle.

En fait, si nous empêchons les gens de stocker leurs mots de passe, il est plus probable qu'ils utiliseront le même mot de passe dans plusieurs endroits (simplement parce que les gens n'ont pas la capacité de se souvenir de différents mots de passe pour chaque site qu'ils utilisent), en empêchant Afin de les sauvegarder, vous risquez de rendre les mots de passe de vos utilisateurs moins sécurisés.

Si votre site a un besoin réel de sécurité qui ne peut pas permettre la sauvegarde d'un mot de passe, vous devrez absolument envisager un autre mécanisme. Par exemple, les connexions bancaires de nos jours exigent souvent que les utilisateurs entrez des caractères numérotés spécifiques à partir de leur mot de passe – par exemple, "Entrez les cinquième, huitième et douzième caractères de votre mot de passe" .

Toutefois, ces schémas visent davantage à sécuriser la transmission du mot de passe plutôt que de le stocker: en n'inscrivant que certains caractères donnés, nous ne devons pas entrer ou transmettre le mot de passe entier, donc il n'y a aucune chance Être piraté en route. Il est toujours supposé que l'utilisateur aura probablement le mot de passe noté quelque part (surtout s'ils doivent déterminer quel est le douzième caractère de la chaîne)

Ce type de plan peut être une véritable douleur pour les utilisateurs, mais offre un véritable niveau de sécurité de connexion sans avoir à entrer ou transmettre le mot de passe. Le niveau supplémentaire de difficulté qu'il ajoute à la procédure de connexion, cependant, signifie que seuls les sites très sécurisés comme les banques sont susceptibles d'utiliser ce type de régime sur un mot de passe régulier.

Voici une idée, mais je le suggère pour les cas où les navigateurs récupèrent la saisie automatique des mots de passe qui ne sont pas utilisés pour les connexions. Il est nécessaire qu'il y ait une meilleure norme pour identifier les écrans de connexion, de sorte que les navigateurs ne doivent pas utiliser de heuristiques à la recherche de champs avec type="password" .

Chargez le formulaire avec le champ de mot de passe avec type="text" , de sorte que les algorithmes de remplissage automatique des navigateurs l'ignoreront. Lorsque l'utilisateur saisit quelque chose dans ce champ, changez son type="password" .

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

Peut-être que onfocus serait un meilleur moyen d'aller, mais je ne l'ai pas essayé.

Vous pouvez saisir un faux mot de passe avec le type de texte à l'aide d'une police personnalisée:

DEMO

 @font-face { font-family: 'password'; font-style: normal; font-weight: 400; src: url(https://sites.google.com/site/rafaelcastrocouto/download/password.ttf); } input.key { font-family: 'password'; width: 100px; height: 16px; } 

Notez que cela ne soulève plus de problèmes de sécurité.