Comment désactiver le navigateur Autocomplete sur le champ de formulaire web / étiquette d'entrée?

en plus de autocomplete=off , vous pouvez aussi faire randomiser vos noms de champs de formulaires par le code qui génère la page, peut-être en ajoutant une chaîne de caractères propre à la session à la fin des noms.

lorsque le formulaire est soumis, vous pouvez enlever cette partie avant de les traiter du côté du serveur. Cela empêcherait le navigateur web de trouver le contexte pour votre champ et pourrait aussi aider à prévenir les attaques XSRF parce qu'un attaquant ne serait pas en mesure de deviner les noms de champ pour la soumission d'un formulaire.

la plupart des principaux navigateurs et gestionnaires de mots de passe (correctement, IMHO) ignorent maintenant autocomplete=off .

pourquoi? De nombreuses banques et d'autres sites "haute sécurité" ont ajouté autocomplete=off à leurs pages de connexion "à des fins de sécurité", mais cela diminue en fait la sécurité car cela fait que les gens changent les mots de passe sur ces sites à haute sécurité pour être facile à se souvenir (et donc crack) depuis autocomplete a été cassé.

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

malheureusement, les bogues dans les implémentations autocomplètes 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 en blanc par l'utilisateur.

que doit faire un développeur web?

• si vous pouvez garder 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 est le principal déclencheur pour l'utilisateur/pass autocomplete pour donner un coup de pied. Sinon, lisez les conseils ci-dessous.
• Safari remarque qu'il y a 2 champs de mot de passe et désactive autocomplete 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. Alors assurez-vous d'utiliser 2 champs de mot de passe (nouveau et confirmer nouveau) pour tous les formulaires où vous autorisez

• Chrome 34, malheureusement, va essayer de Auto remplir les champs avec l'Utilisateur/passer chaque fois qu'il voit un champ de mot de passe. C'est un assez mauvais bug qui, espérons-le, va changer le comportement du Safari. Cependant, l'ajout de ceci au haut de votre formulaire semble désactiver le mot de passe autofill:

  <input type="text" style="display:none">
  <input type="password" style="display:none">
  

Je n'ai pas encore enquêté sur IE ou Firefox soigneusement, mais sera heureux de mettre à jour la réponse si d'autres ont des informations dans les commentaires.

Parfois même autocomplete=off serait empêche pas de remplir dans les informations d'identification en mal de champs, mais pas d'utilisateur ou pseudo champ.

cette solution s'ajoute au billet d'apinstein sur le comportement du navigateur.

fix navigateur de remplissage automatique en lecture seule et est définie en écriture sur l'objet (et cliquez sur l'onglet

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

mise à jour: Safari Mobile Fixe le curseur dans le domaine, mais ne pas afficher 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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6 /

/ / UpdateEnd

parce que le navigateur remplit automatiquement les informations d'identification au mauvais champ de texte!?

je remarque ce comportement étrange sur Chrome et Safari, quand il ya des champs de mot de passe dans le même formulaire. je suppose que le navigateur recherche un champ de mot de passe pour insérer vos justificatifs d'identité enregistrés. Puis il remplit automatiquement (en devinant juste à cause de l'observation) le champ textlike-input le plus proche, qui apparaît avant le champ password dans DOM. Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,

cette simple correction 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 la norme XHTML.

la solution pour Chrome est d'ajouter autocomplete="new-password" au mot de passe de type input.

exemple:

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

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

cela fonctionne bien pour moi.

Note: assurez-vous avec F12 que vos modifications prennent effet, plusieurs fois les navigateurs enregistrez la page dans le cache, cela m'a donné une mauvaise impression qu'il ne fonctionne pas, mais le navigateur n'a pas réellement apporter les modifications.

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

cependant, je pense qu'il vaut la peine de dire pourquoi c'est une bonne idée de l'utiliser dans certains cas car certaines réponses à cette question et duplicate questions ont suggéré qu'il est préférable de ne pas l'éteindre.

arrêter les 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 que c'est un problème.

il est particulièrement important de l'éteindre sur les champs pour les codes de sécurité de carte de crédit. Comme cette page États:

" ne conservez jamais le code de sécurité ... sa valeur dépend de la présomption que le seul moyen de la Fournir est de la lire à partir de la carte de crédit physique, prouvant que la personne qui la fournit détient effectivement la carte."

le problème est, si c'est un ordinateur public (cybercafé, bibliothèque etc) il est alors facile pour d'autres utilisateurs de voler vos détails de carte, et même sur votre propre machine un site Web malveillant pourrait voler autocomplete données .

je vous prie d'être en désaccord avec ces réponses qui disent d'éviter de désactiver l'auto-complete.

la première chose à signaler est que l'auto-complèt n'étant pas explicitement désactivé sur les champs de formulaire de connexion est un échec PCI-DSS. En outre, si la machine locale d'un utilisateur est compromise, alors toutes les données autocomplètes peuvent être trivialement obtenues par un attaquant parce qu'il est stocké dans le clair.

Il ya certainement un argument pour la facilité d'utilisation, mais il ya un très bon équilibre quand il s'agit de la forme que les champs doivent avoir autocomplete désactivé et qui ne devrait pas.

Trois options: Premier:

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

la Deuxième:

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

troisième (code javascript):

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

vient de définir autocomplete="off" . Il y a une très bonne raison pour faire cela: vous voulez fournir votre propre fonctionnalité autocomplete!

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

au lieu de autocomplete="off" utilisez simplement autocomplete="false"

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

Sur une ou fait, sur la complètement à l'opposé de note

"Si vous êtes l'utilisateur du formulaire précité et souhaitez réactiver la fonctionnalité autocomplete, utilisez le 'remember password' bookmarklet de ce bookmarklets page . Il supprime tous les attributs autocomplete="off" de tous les formulaires sur la page. Garder le bon combat!"

nous avons effectivement utilisé sasb l 'idée pour un site. C'était une application web pour gérer le cabinet d'un médecin. Toutefois, bon nombre de nos clients étaient des chirurgiens qui utilisaient de nombreux postes de travail différents, y compris des terminaux semi-publics. Donc, ils voulaient s'assurer qu'un médecin qui ne comprend pas l'implication des mots de passe enregistrés automatiquement ou qui ne fait pas attention ne puisse pas laisser accidentellement leurs informations de connexion facilement accessibles. Bien sûr, c'était avant que l'idée de navigation privée qui commence à être présenté dans IE8, FF3.1, etc. Même si, de nombreux médecins sont forcés d'utiliser de vieux navigateurs scolaires dans les hôpitaux avec elle qui ne changera pas.

ainsi, nous avons eu la page de connexion générer des noms de champ aléatoires qui ne fonctionneraient que pour ce poste. Oui, c'est moins pratique, mais c'est juste frapper l'utilisateur sur la tête à propos de ne pas stocker les informations de connexion sur les terminaux publics.

je pense que autocomplete=off est supporté en HTML 5.

Demandez-vous pourquoi vous voulez faire cela, bien qu'il peut faire sens dans certaines situations, mais ne pas le faire juste pour le plaisir de le faire.

c'est moins pratique pour les utilisateurs et pas même un problème de sécurité dans OS X (mentionné par Soren ci-dessous). Si vous êtes inquiet que les gens aient leurs mots de passe volés à distance - un enregistreur de frappe pourrait toujours le faire même si votre application utilise autcomplete=off .

comme un utilisateur qui choisit d'avoir un navigateur se souviennent (la plupart) de mes informations, je le trouverais ennuyeux si votre site ne se souvient pas de la mienne.

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

j'ai finalement trouvé un solution HTML pure qui nécessite pas de Javascript , fonctionne dans les navigateurs modernes (sauf IE; il fallait au moins 1 prise, non?), et ne vous oblige pas à désactiver autocomplete pour l'ensemble du formulaire.

il suffit de désactiver autocomplete sur le form et ensuite l'allumer pour n'importe quel input que vous souhaitez il pour travailler au sein de la forme. 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>

était une façon non-standard de faire cela (je pense que Mozilla et Internet Explorer le soutiennent toujours), mais jouer avec les attentes des utilisateurs est une mauvaise idée.

si l'utilisateur entre les détails de sa carte de crédit dans un formulaire et puis laisser quelqu'un d'autre utiliser ce navigateur, ce n'est pas votre problème. :)

ça me va.

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

nous pouvons également utiliser cette stratégie dans d'autres contrôles comme le texte, sélectionner etc

ajouter le

autocomplete="off"

à la balise du formulaire désactivera le navigateur autocomplete (ce qui a été précédemment tapé dans ce champ) de tous les champs input dans ce formulaire particulier.

testé le:

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

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

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

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

le problème est que les utilisateurs sans javascript obtiendront la fonctionnalité autocomplete.

ajouter autocomplete="off" ne suffira pas.

modifier l'attribut "type d'entrée" en type="search" .

Google ne s'applique pas auto-remplir aux entrées avec un type de recherche.

un peu tard pour le match...mais j'ai juste couru dans ce problème et essayé plusieurs échecs, mais celui-ci fonctionne pour moi trouvé sur MDN

dans certains cas, le navigateur continuera de suggérer des valeurs d'autocomplétion même si l'attribut autocomplete est réglé sur off. Cette inattendue le comportement peut être assez déroutant pour les développeurs. Le truc vraiment force la non-completion est d'assigner une chaîne aléatoire à l'attribut comme :

autocomplete="nope"

utilisez un nom et un id non standard pour les champs, donc plutôt que" nom "ayez"name_". Les navigateurs ne verront alors pas qu'il s'agit du champ name. La meilleure partie à ce sujet est que vous pouvez faire cela à certains, mais pas tous les champs et il sera autocomplete certains, mais pas tous les champs.

essayez ceux-ci aussi si juste autocomplete="off" ne fonctionne pas:

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

Je ne peux pas croire que ce soit encore un problème si longtemps après qu'il ait été signalé. Les solutions ci-dessus ne fonctionnaient pas pour moi, comme safari semblait savoir quand l'élément n'était pas affiché ou hors écran, cependant 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!

il s'agit d'un problème de sécurité que les navigateurs ignorent maintenant. Les navigateurs identifient et stockent le contenu en utilisant des noms d'entrée, même si les développeurs considèrent que l'information est sensible et ne doit pas être stockée. Faire un nom d'entrée différent entre 2 requêtes résoudra le problème (mais sera quand même sauvegardé dans le cache du navigateur et augmentera également le cache du navigateur). Demander à l'utilisateur d'activer ou de désactiver les options de son navigateur n'est pas une bonne solution. Le problème peut être résolu dans le backend.

voilà ma solution. Une approche que j'ai mise en œuvre dans mon cadre. Tous les éléments autocomplete sont générés avec une entrée cachée comme ceci:

<? $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>

Serveur de processus variables post 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 peut être consulté comme d'habitude

var_dump($_POST['username']);

et le navigateur ne sera pas en mesure de suggérer des informations provenant de la demande précédente ou des utilisateurs précédents.

Tout fonctionne comme un charme, même si les navigateurs mises à jour, veulent ignorer autocomplete ou non. Qui a été la meilleure façon de résoudre le problème pour moi.

la meilleure solution:

empêcher autocomplete username (ou email) et 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 le travail dans <input> , autocomplete="off" ne fonctionne pas, mais vous pouvez changer off à une chaîne aléatoire, comme nope .

Travaille:

• 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

aucun des hacks mentionnés ici ne fonctionnait pour moi en Chrome. Il y a une discussion sur la question ici: https://code.google.com/p/chromium/issues/detail?id=468153#c41

ajouter ce à l'intérieur d'un <form> travaux (au moins pour l'instant):

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

essayer d'ajouter

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

en plus de

autocomplete= "off"

à l'entrée ou aux entrées que vous ne voulez pas mémoriser les données du formulaire ( username , password , etc.) comme indiqué ci-après:

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

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

Testé sur les dernières versions des principaux navigateurs c'est à dire Google Chrome , Mozilla Firefox , Microsoft Edge , etc. et de travail sans aucun problème. Espérons que cette aide...

Vous pouvez utiliser en entrée.

par exemple;

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

alors voilà:

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

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