Comment contourner le problème des navigateurs avec les fonctionnalités de «sauvegarde du mot de passe» et de «saisie semi-automatique du mot de passe»

Tout le monde connaît les fonctions de sauvegarde du mot de passe et de saisie automatique du navigateur, qui offrent une expérience utilisateur fluide et confortable lors du remplissage de formulaires et de la connexion à vos sites Web préférés.

Mais que se passe-t-il lorsque vous devez désactiver le remplissage automatique du mot de passe pour des raisons de sécurité? Ou pire encore, si vous devez empêcher le navigateur de suggérer de sauvegarder les mots de passe? C'est là que ça se complique.

Autocomplete = off is dead

Vous avez donc cherché un moyen de désactiver la fonctionnalité de remplissage automatique dans votre formulaire HTML, mais vous avez constaté que Chrome ne tenait pas compte de l'attribut autocomplete = "off"? bummer.

Il existe de nombreux articles à ce sujet et un très long filetage de chromium team, mais l’essentiel est qu’aucune solution intégrée ne vous permet de désactiver cette fonctionnalité. Il n’existe pas de solution multi-navigateurs, c’est une norme HTML.

Je vais vous expliquer comment résoudre le problème de saisie semi-automatique du mot de passe pour Chrome et Firefox, mais gardez à l’esprit que cela ne fonctionne pas avec Safari aussi longtemps que j’ai vérifié. L'idée est de tromper le navigateur pour qu'il remplisse automatiquement le mauvais champ de saisie.
Je sais, cela semble stupide, mais cela fonctionne comme un charme et j’ai vu les sites Web de grandes banques qui appliquent le même stratagème.

Comment ça marche?
Supposons que votre formulaire HTML est un formulaire de connexion simple contenant les éléments suivants:


Pour tromper le navigateur, vous devez ajouter un autre champ de saisie du mot de passe juste au-dessus du champ du mot de passe existant. Cette fois, il sera masqué et le navigateur le remplira automatiquement en ignorant le champ de saisie du mot de passe visible.

Encore une fois, gardez à l’esprit que ce n’est pas un navigateur à la fois et qu’il n’y a pas lieu de savoir combien de temps durera cette solution de contournement.

Sauvegarder le mot de passe? non, merci!

Travailler avec des applications sécurisées et des règles PCI DSS m'a amené au point où je devais désactiver la fonctionnalité de sauvegarde du mot de passe du navigateur. Ce n’était pas une demande officielle, mais une partie de la tentative de désactivation de la fonctionnalité de saisie automatique. Si vous ne pouvez pas enregistrer le mot de passe, le navigateur ne peut pas le remplir automatiquement. Sucré!

Le pire de la fonction de sauvegarde du mot de passe est que vous pouvez voir les mots de passe enregistrés sous forme de texte brut dans les paramètres de sécurité du navigateur (!). En chrome, vous êtes invité à fournir des informations d'identification Windows, mais pas dans Firefox. Firefox ne vous demandera que si vous êtes sûr de vouloir voir les mots de passe enregistrés… boiteux.

Connexions enregistrées par Firefox - vous pouvez voir les mots de passe enregistrés sous forme de texte brut

Comment le navigateur sait-il même quand suggérer que le mot de passe de sauvegarde apparaisse?
Je n'ai pas approfondi cette question, mais je sais qu'il suffit d'un mot de passe de type entrée dans votre code HTML. Vous n'avez même pas besoin d'avoir un élément

.

Il s'avère que si vous remplacez par , le navigateur n'offre plus la sauvegarde du mot de passe. Cette bonne nouvelle, mais qu'en est-il de masquer le mot de passe? Après tout, l'idée de l'entrée HTML spéciale est de masquer le mot de passe afin que personne autour de vous ne voie ce que vous tapez.

La solution pour masquer le texte est faite par CSS.
Voici un exemple de ce dont vous avez besoin pour réaliser le masquage. Cela a été testé avec succès sur Chrome, Safari et Firefox.

contribution {
    text-security: disque;
    -webkit-text-security: disque;
    -mox-text-security: disque;
}

D'ailleurs, certaines personnes ont signalé qu'utiliser AJAX pour envoyer les données de connexion n'avait pas déclenché la fonction de sauvegarde du mot de passe, mais cela ne fonctionnait pas lorsque je l'ai testé.

Cette solution est-elle suffisamment sécurisée?
Il n'y a pas de réponse directe à cette question. Les impacts de cette solution sur la sécurité sont discutés dans stackoverflow.

Au moment d'écrire cet article, je ne suis pas sûr que cette solution de contournement est conforme aux normes de sécurité et je suis sûr que votre responsable de la conformité PCI ne l'aimera pas. mais d’autre part, il n’ya pas d’autre moyen de contourner le problème,

Encore.