Comment désactiver la saisie semi-automatique du navigateur sur le champ de formulaire Web/la balise de saisie ?

https://stackoverflow.com/questions/2530

08-06-2019
|

Question

Comment désactiver autocomplete dans les principaux navigateurs pour un input (ou form field)?

La solution

Firefox 30 ignore autocomplete="off" pour les mots de passe, en choisissant plutôt de demander à l'utilisateur si le mot de passe doit être stocké sur le client.Notez ce qui suit commentaire à partir du 5 mai 2014 :

Le gestionnaire de mots de passe toujours demande s’il souhaite enregistrer un mot de passe.Les mots de passe ne sont pas enregistrés sans l'autorisation de l'utilisateur.

Nous sommes le troisième navigateur à implémenter ce changement, après IE et Chrome.

Selon le Réseau de développeurs Mozilla documentation, l'attribut booléen de l'élément de formulaire autocomplete empêche les données de formulaire d'être mises en cache dans les anciens navigateurs.

<input type="text" name="foo" autocomplete="off" />

Autres conseils

En plus de autocomplete=off, vous pouvez également faire en sorte que les noms de vos champs de formulaire soient randomisés par le code qui génère la page, peut-être en ajoutant une chaîne spécifique à la session à la fin des noms.

Lorsque le formulaire est soumis, vous pouvez supprimer cette partie avant de les traiter côté serveur.Cela empêcherait le navigateur Web de trouver le contexte de votre champ et pourrait également contribuer à prévenir les attaques XSRF, car un attaquant ne serait pas en mesure de deviner les noms de champs pour une soumission de formulaire.

La plupart des principaux navigateurs et gestionnaires de mots de passe (correctement, à mon humble avis) ignorent désormais autocomplete=off.

Pourquoi?De nombreuses banques et autres sites Web « haute sécurité » ajoutés autocomplete=off à leurs pages de connexion "à des fins de sécurité", mais cela diminue en fait la sécurité car cela amène les gens à modifier les mots de passe sur ces sites de haute sécurité pour qu'ils soient faciles à mémoriser (et donc à craquer) puisque la saisie semi-automatique a été interrompue.

Il y a longtemps, la plupart des gestionnaires de mots de passe ont commencé à ignorer autocomplete=off, et maintenant les navigateurs commencent à faire de même pour les entrées de nom d'utilisateur/mot de passe uniquement.

Malheureusement, des bogues dans les implémentations de saisie semi-automatique insèrent des informations de nom d'utilisateur et/ou de mot de passe dans des champs de formulaire inappropriés, provoquant des erreurs de validation de formulaire, ou pire encore, l'insertion accidentelle de noms d'utilisateur dans des champs intentionnellement laissés vides par l'utilisateur.

Que doit faire un développeur Web ?

Si vous pouvez conserver tous les champs de mot de passe sur une page par eux-mêmes, c'est un bon début car il semble que la présence d'un champ de mot de passe soit le principal déclencheur de la saisie semi-automatique utilisateur/pass.Sinon, lisez les conseils ci-dessous.
Safari remarque qu'il y a 2 champs de mot de passe et désactive la saisie semi-automatique dans ce cas, en supposant qu'il doit s'agir d'un formulaire de changement de mot de passe, pas d'un formulaire de connexion.Assurez-vous donc simplement d'utiliser 2 champs de mot de passe (nouveau et confirmer le nouveau) pour tous les formulaires que vous autorisez.
Chrome 34, malheureusement, essaiera de remplir automatiquement les champs avec user/pass chaque fois qu'il verra un champ de mot de passe.Il s’agit d’un assez mauvais bug qui, espérons-le, modifiera le comportement de Safari.Cependant, l'ajout de ceci en haut de votre formulaire semble désactiver la saisie automatique du mot de passe :
```
<input type="text" style="display:none">
<input type="password" style="display:none">
```

Je n'ai pas encore étudié de manière approfondie IE ou Firefox, mais je serai heureux de mettre à jour la réponse si d'autres ont des informations dans les commentaires.

Parfois même la saisie semi-automatique=off serait n'empêche pas de remplir dans les informations d'identification dans de mauvais champs, mais pas dans le champ utilisateur ou surnom.

Cette solution de contournement s'ajoute à l'article d'Apinstein sur le comportement du navigateur.

correction du remplissage automatique du navigateur en lecture seule et définition de l'écriture sur le focus (clic et tabulation)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Mise à jour:Mobile Safari place le curseur dans le champ, mais n'affiche pas le clavier virtuel.Le nouveau correctif fonctionne comme avant mais gère le clavier virtuel :

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Démo en direct https://jsfiddle.net/danielsuess/n0scguv6/

//Mise à jourFin

Parce que le navigateur remplit automatiquement les informations d'identification dans un mauvais champ de texte !?

Je remarque ce comportement étrange sur Chrome et Safari, lorsqu'il y a des champs de mot de passe dans la même forme. Je suppose que le navigateur recherche un champ de mot de passe pour insérer vos informations d'identification enregistrées.Ensuite, il remplit automatiquement (en devinant simplement en raison de l'observation) le champ de saisie de type texte le plus proche, qui apparaît avant le champ de mot de passe dans DOM.Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,

Ce correctif en lecture seule ci-dessus a fonctionné pour moi.

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Cela fonctionnera dans Internet Explorer et Mozilla FireFox, l'inconvénient est qu'il ne s'agit pas du standard XHTML.

La solution pour Chrome est d'ajouter autocomplete="new-password" au mot de passe du type de saisie.

Exemple:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

Chrome complète toujours automatiquement les données s'il trouve une boîte de tapez votre mot de passe, juste assez pour indiquer cette case autocomplete = "new-password".

Cela fonctionne bien pour moi.

Note:assurez-vous avec F12 que vos modifications prennent effet, plusieurs fois les navigateurs enregistrent la page en cache, cela m'a donné la mauvaise impression que cela ne fonctionnait pas, mais le navigateur n'a pas réellement apporté les modifications.

Comme d'autres l'ont dit, la réponse est autocomplete="off"

Cependant, je pense que cela vaut la peine de le dire pourquoi c'est une bonne idée de l'utiliser dans certains cas comme réponse à cette question et dupliquer des questions ont suggéré qu'il vaut mieux ne pas l'éteindre.

L'arrêt des navigateurs stockant les numéros de carte de crédit ne devrait pas être laissé aux utilisateurs.Trop d’utilisateurs ne réalisent même pas qu’il s’agit d’un problème.

Il est particulièrement important de le désactiver dans les champs des codes de sécurité des cartes de crédit.Comme cette page États:

"Ne stockez jamais le code de sécurité...sa valeur dépend de la présomption selon laquelle la seule façon de la fournir est de la lire sur la carte de crédit physique, prouvant que la personne qui la fournit détient effectivement la carte.

Le problème est que s'il s'agit d'un ordinateur public (cybercafé, bibliothèque, etc.), il est alors facile pour d'autres utilisateurs de voler les détails de votre carte, et même sur votre propre ordinateur, un site Web malveillant pourrait voler des données de saisie semi-automatique.

Je devrais être en désaccord avec ces réponses qui disent d'éviter de désactiver la saisie semi-automatique.

La première chose à souligner est que la saisie semi-automatique n'est pas explicitement désactivée dans les champs du formulaire de connexion est un échec PCI-DSS.De plus, si la machine locale d'un utilisateur est compromise, toutes les données de saisie semi-automatique peuvent être obtenues de manière triviale par un attaquant car elles sont stockées en clair.

Il y a certainement un argument en faveur de la convivialité, mais il existe un équilibre très délicat lorsqu'il s'agit de savoir quels champs de formulaire doivent avoir la saisie semi-automatique désactivée et lesquels ne le doivent pas.

Trois options :D'abord:

<input type='text' autocomplete='off' />

Deuxième:

<form action='' autocomplete='off'>

Troisième (code javascript) :

$('input').attr('autocomplete', 'off');

J'ai résolu le combat sans fin avec Google Chrome en utilisant des caractères aléatoires.Lorsque vous effectuez toujours le rendu de la saisie semi-automatique avec une chaîne aléatoire, il ne se souviendra jamais de rien.

<input name="name" type="text" autocomplete="rutjfkde">

J'espère que cela aidera d'autres personnes.

Sur une note connexe ou en fait, sur une note complètement opposée -

"Si vous êtes l'utilisateur du formulaire susmentionné et que vous souhaitez réactiver la fonctionnalité de la saisie semi-automatique, utilisez le signet` `Remember Motway '' à partir de ce page Bookmarklets.Ça supprime tout autocomplete="off" attributs de tous les formulaires de la page.Continuez à combattre le bon combat! "

Nous avons effectivement utilisé sabC'est une idée pour un site.Il s'agissait d'une application Web logicielle médicale permettant de gérer un cabinet médical.Cependant, bon nombre de nos clients étaient des chirurgiens qui utilisaient de nombreux postes de travail différents, y compris des terminaux semi-publics.Ils voulaient donc s'assurer qu'un médecin qui ne comprend pas l'implication des mots de passe enregistrés automatiquement ou qui n'y prête pas attention ne puisse pas accidentellement laisser ses informations de connexion facilement accessibles.Bien sûr, c'était avant l'idée de navigation privée qui commence à apparaître dans IE8, FF3.1, etc.Malgré cela, de nombreux médecins sont obligés d'utiliser des navigateurs à l'ancienne dans les hôpitaux, avec une informatique qui ne changera pas.

Nous avons donc demandé à la page de connexion de générer des noms de champs aléatoires qui ne fonctionneraient que pour cette publication.Oui, c'est moins pratique, mais cela frappe simplement l'utilisateur de ne pas stocker les informations de connexion sur les terminaux publics.

Il suffit de définir autocomplete="off".Il y a une très bonne raison pour cela :Vous souhaitez fournir votre propre fonctionnalité de saisie semi-automatique !

J'ai essayé d'innombrables solutions, puis j'ai trouvé ceci :

Au lieu de autocomplete="off" il suffit simplement d'utiliser autocomplete="false"

C'est aussi simple que cela, et cela fonctionne également à merveille dans Google Chrome !

Je pense autocomplete=off est pris en charge dans HTML 5.

Demandez-vous pourquoi vous voulez faire cela - cela peut avoir du sens dans certaines situations, mais ne le faites pas juste pour le plaisir de le faire.

C'est moins pratique pour les utilisateurs et ce n'est même pas un problème de sécurité sous OS X (mentionné par Soren ci-dessous).Si vous craignez que des personnes se fassent voler leurs mots de passe à distance, un enregistreur de frappe peut toujours le faire même si votre application utilise autcomplete=off.

En tant qu'utilisateur qui choisit qu'un navigateur se souvienne de (la plupart de) mes informations, je trouverais ennuyeux si votre site ne se souvenait pas des miennes.

Aucune des solutions n'a fonctionné pour moi dans cette conversation.

J'ai finalement trouvé un solution HTML pure cela exige pas de Javascript, fonctionne dans les navigateurs modernes (sauf IE ;il devait y avoir au moins 1 capture, non ?), et ne vous oblige pas à désactiver la saisie semi-automatique pour l'ensemble du formulaire.

Désactivez simplement la saisie semi-automatique sur le form puis allumez-le pour tout input vous souhaitez qu'il fonctionne dans le formulaire.Par exemple:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

C'était une manière non standard de procéder (je pense que Mozilla et Internet Explorer le prennent toujours en charge), mais jouer avec les attentes des utilisateurs est une mauvaise idée.

Si l'utilisateur saisit les détails de sa carte de crédit dans un formulaire et laisse ensuite quelqu'un d'autre utiliser ce navigateur, cela ne vous concerne pas.:)

Cela fonctionne pour moi.

<input name="pass" type="password" autocomplete="new-password" />

Nous pouvons également utiliser cette stratégie dans d'autres contrôles comme le texte, la sélection, etc.

Un peu tard dans le jeu... mais je viens de rencontrer ce problème et j'ai essayé plusieurs échecs, mais celui-ci fonctionne pour moi, trouvé sur MDN

Dans certains cas, le navigateur continuera de suggérer des valeurs de complétion automatique même si l'attribut de saisie semi-automatique est défini sur OFF.Ce comportement inattendu peut être assez déroutant pour les développeurs.L'astuce pour vraiment forcer la complétion sans limite est d'attribuer une chaîne aléatoire à l'attribut comme SO:

autocomplete="nope"

La meilleure solution:

Empêcher la saisie semi-automatique du nom d'utilisateur (ou de l'e-mail) et du mot de passe :

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Empêcher la saisie semi-automatique d'un champ :

<input type="text" name="field" autocomplete="nope">

Explication:autocomplete continue de travailler dans <input>, autocomplete="off" ça ne marche pas, mais tu peux changer off à une chaîne aléatoire, comme nope.

Travaille dans:

Chrome:49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 et 64
Firefox :44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 et 58

Ajout du

autocomplete="off"

à la balise form désactivera la saisie semi-automatique du navigateur (ce qui a été précédemment saisi dans ce champ) de tous input champs dans ce formulaire particulier.

Testé sur :

Firefox 3.5, 4 BÊTA
Internet Explorer 8
Chrome

Essayez d'ajouter

readonly onfocus="this.removeAttribute('readonly');"

en plus de

saisie semi-auto = "désactivé"

aux entrées dont vous ne souhaitez pas mémoriser les données du formulaire (username, password, etc.) comme indiqué ci-dessous :

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Mise à jour: Voici un exemple complet ci-dessous basé sur cette approche qui empêche de glisser-déposer, copie, pâte, etc.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Testé sur les dernières versions des principaux navigateurs, c'est-à-dire Google Chrome, Mozilla Firefox, Microsoft Edge, etc.et fonctionne sans aucun problème.J'espère que cela t'aides...

Utilisez un nom et un identifiant non standard pour les champs, donc plutôt que "nom", utilisez "nom_".Les navigateurs ne le verront alors pas comme étant le champ de nom.La meilleure partie est que vous pouvez faire cela pour certains champs, mais pas pour tous, et cela complétera automatiquement certains champs, mais pas tous.

Afin d'éviter le XHTML invalide, vous pouvez définir cet attribut en utilisant javascript.Exemple utilisant jQuery :

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Le problème est que les utilisateurs sans javascript bénéficieront de la fonctionnalité de saisie semi-automatique.

Ajouter autocomplete="off" ça ne va pas le couper.

Remplacez l'attribut de type d'entrée par type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.

essayez-les aussi si seulement autocomplete="off" ça ne marche pas :

autocorrect="off" autocapitalize="off" autocomplete="off"

Je ne peux pas croire que ce soit toujours un problème aussi longtemps après qu'il ait été signalé.Les solutions ci-dessus n'ont pas fonctionné pour moi, car Safari semblait savoir quand l'élément n'était pas affiché ou hors écran, mais les solutions suivantes ont fonctionné pour moi :

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

J'espère que c'est utile pour quelqu'un !

Il s’agit d’un problème de sécurité que les navigateurs ignorent désormais.Les navigateurs identifient et stockent le contenu à l'aide de noms d'entrée, même si les développeurs considèrent que les informations sont sensibles et ne doivent pas être stockées.Rendre un nom d'entrée différent entre 2 requêtes résoudra le problème (mais sera toujours enregistré dans le cache du navigateur et augmentera également le cache du navigateur).Demander à l'utilisateur d'activer ou de désactiver des options dans les paramètres de son navigateur n'est pas une bonne solution.Le problème peut être résolu dans le backend.

Voici ma solution.Une approche que j'ai mise en œuvre dans mon framework.Tous les éléments de saisie semi-automatique sont générés avec une entrée masquée comme celle-ci :

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Le serveur traite ensuite les variables de publication comme ceci :

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

La valeur est accessible comme d'habitude

var_dump($_POST['username']);

Et le navigateur ne pourra pas suggérer les informations de la demande précédente ou des utilisateurs précédents.

Tout fonctionne à merveille, même si les navigateurs sont mis à jour, qu'ils souhaitent ou non ignorer la saisie semi-automatique.Cela a été pour moi la meilleure façon de résoudre le problème.

Aucun des hacks mentionnés ici n'a fonctionné pour moi dans Chrome.Il y a une discussion sur le problème ici : https://code.google.com/p/chromium/issues/detail?id=468153#c41

En ajoutant ceci dans un <form> fonctionne (au moins pour l'instant):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Alors voilà :

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow