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

Comment désactivez-vous autocompletedans les principaux navigateurs pour un input(ou form field) spécifique ?

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

• Le gestionnaire de mots de passe demande toujours 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 la documentation de Mozilla Developer Network , l'attribut d'élément de formulaire booléen autocompleteempêche la mise en cache des données de formulaire dans les anciens navigateurs.

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

De plus 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 retirer cette partie avant de la traiter côté serveur. Cela empêcherait le navigateur Web de trouver le contexte de votre champ et pourrait également empêcher les attaques XSRF car un attaquant ne pourrait pas deviner les noms de champ pour une soumission de formulaire.

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

Pourquoi? De nombreuses banques et autres sites Web de «haute sécurité» ont été ajoutés autocomplete=offà leurs pages de connexion «à des fins de sécurité», mais cela diminue en fait la sécurité car cela permet aux gens de changer les mots de passe sur ces sites à haute sécurité pour être faciles à mémoriser (et donc à casser) depuis la saisie semi-automatique a été cassé.

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, insérant accidentellement des noms d'utilisateur dans des champs qui ont été 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 / passe. 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 d'utiliser 2 champs de mot de passe (nouveau et confirmez nouveau) pour tous les formulaires où 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. C'est un assez mauvais bug qui, espérons-le, changera le comportement de Safari. Cependant, l'ajout de cela 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é en détail 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 n'empêcherait pas de remplir les informations d'identification dans des champs incorrects, mais pas le champ utilisateur ou surnom.

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

correction du remplissage automatique du navigateur en lecture seule et mise en écriture sur le focus (clic et onglet)

 <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/

// UpdateEnd

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

Je remarque ce comportement étrange sur Chrome et Safari, quand il y a des champs de mot de passe sous 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 (juste en devinant en raison d'une observation) le champ de saisie de 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,

Cette correction 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 n'est pas standard XHTML.

La solution pour Chrome consiste à ajouter autocomplete="new-password"au mot de passe du type d'entrée. Veuillez vérifier l'exemple ci-dessous.

Exemple:

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

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

Cela fonctionne bien pour moi.

Remarque: assurez-vous F12que vos modifications prennent effet, plusieurs fois les navigateurs enregistrent la page en cache, cela m'a donné une 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 qu'il vaut la peine d'indiquer pourquoi c'est une bonne idée de l'utiliser dans certains cas, car certaines réponses à cette question et des questions en double ont suggéré qu'il est préférable de ne pas la désactiver.

L'arrêt des navigateurs stockant des numéros de carte de crédit ne doit pas être laissé aux utilisateurs. Trop d'utilisateurs ne réaliseront même pas que c'est 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 l'indique cette page :

"Ne stockez jamais le code de sécurité ... sa valeur dépend de la présomption que le seul moyen de le fournir est de le lire à partir de la carte de crédit physique, prouvant que la personne qui le 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 les autres utilisateurs de voler les détails de votre carte, et même sur votre propre machine, un site Web malveillant pourrait voler des données de saisie semi-automatique .

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

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

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

Je dois mendier pour différer avec ces réponses qui disent d'éviter de désactiver la saisie semi-automatique.

La première chose à signaler est que la saisie semi-automatique n'étant 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 l'utilisabilité, mais il y a un très bon équilibre quand il s'agit de savoir quels champs du formulaire doivent avoir la saisie semi-automatique désactivée et lesquels ne doivent pas.

Trois options: Première:

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

Seconde:

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

Troisième (code javascript):

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

Sur un sujet apparenté 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 saisie semi-automatique, utilisez le bookmarklet" mémoriser le mot de passe "de cette page de bookmarklets . Il supprime tous les autocomplete="off"attributs de tous les formulaires de la page. Continuez à combattre le bon combat! "

Nous avons effectivement utilisé l 'idée de sasb pour un site. C'était une application Web de logiciel médical pour gérer le cabinet d'un médecin. Cependant, beaucoup de nos clients étaient des chirurgiens qui utilisaient de nombreux postes de travail différents, y compris des terminaux semi-publics. Ainsi, ils voulaient 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 peut pas accidentellement laisser ses informations de connexion facilement accessibles. Bien sûr, c'était avant l'idée de la navigation privée qui commence à apparaître dans IE8, FF3.1, etc. Néanmoins, de nombreux médecins sont obligés d'utiliser des navigateurs de la vieille école dans les hôpitaux avec des TI qui ne changeront pas.

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

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

J'ai finalement trouvé une solution HTML pure qui ne nécessite pas de Javascript , fonctionne dans les navigateurs modernes (sauf IE; il fallait 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 activez-le pour tout inputce que 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>

Réglez juste autocomplete="off". Il y a une très bonne raison à cela: vous voulez fournir votre propre fonctionnalité de saisie semi-automatique!

J'ai essayé des solutions sans fin, puis j'ai trouvé ceci:

Au lieu d' autocomplete="off"utiliser simplementautocomplete="false"

Aussi simple que cela, et cela fonctionne aussi comme un charme dans Google Chrome!

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, sélectionnez etc.

Je pense que autocomplete=offc'est pris en charge dans HTML 5.

Demandez-vous cependant pourquoi vous voulez faire cela - cela peut avoir du sens dans certaines situations, mais ne le faites pas uniquement pour 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 voient voler leur mot de passe à distance - un enregistreur de frappe peut toujours le faire même si votre application l'utilise autcomplete=off.

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

En plus de

autocomplete="off"

Utilisation

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

pour les entrées que vous ne voulez pas de se rappeler des données de 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');" >

J'espère que cela t'aides.

La meilleure solution:

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

<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: autocompletecontinue de fonctionner dans <input>, autocomplete="off"ne fonctionne pas, mais vous pouvez passer 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

Un peu tard pour le jeu ... mais je suis juste tombé sur 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 saisie semi-automatique même si l'attribut de saisie semi-automatique est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour forcer vraiment le non-achèvement est d'assigner une chaîne aléatoire à l'attribut comme ceci:

autocomplete="nope"

Ajout du

autocomplete="off"

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

Testé sur:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Chrome

L'ajout autocomplete="off"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.

Utilisez un nom et un identifiant non standard pour les champs, donc plutôt que "nom", ayez "nom_". Les navigateurs ne le verront alors pas comme étant le champ du nom. La meilleure partie à ce sujet est que vous pouvez le faire pour certains mais pas tous les champs et il remplira automatiquement certains mais pas tous les champs.

Afin d'éviter le XHTML non valide, vous pouvez définir cet attribut à l'aide de javascript. Exemple utilisant jQuery:

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

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

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

essayez-les aussi si autocomplete="off"cela ne fonctionne pas:

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

Je ne peux pas croire que c'est toujours un problème si longtemps après qu'il a é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 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!

Voici donc:

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

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

Il s'agit d'un problème de sécurité que les navigateurs ignorent maintenant. 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. Faire 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 place dans mon cadre. Tous les éléments de saisie semi-automatique sont générés avec une entrée caché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 sera pas en mesure de suggérer des informations de la demande précédente ou des utilisateurs précédents.

Tout fonctionne comme un charme, même si les navigateurs se mettent à jour, veulent ignorer la saisie semi-automatique ou non. Cela a été la meilleure façon de résoudre le problème pour moi.

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

Ajout de cela à l'intérieur d'une <form>œuvre (au moins pour l'instant):

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

Vous pouvez utiliser en entrée.

Par exemple;

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