Wie deaktivieren Sie die automatische Vervollständigung des Browsers für Webformularfelder/Eingabe-Tags?

StackOverflow https://stackoverflow.com/questions/2530

  •  08-06-2019
  •  | 
  •  

Frage

Wie deaktivieren Sie autocomplete in den wichtigsten Browsern für eine bestimmte input (oder form field)?

War es hilfreich?

Lösung

Firefox 30 ignoriert autocomplete="off" Bei Passwörtern wird der Benutzer stattdessen gefragt, ob das Passwort auf dem Client gespeichert werden soll.Beachte das Folgende Kommentar vom 5. Mai 2014:

  • Der Passwort-Manager stets fragt, ob ein Passwort gespeichert werden soll.Passwörter werden nicht ohne Erlaubnis des Benutzers gespeichert.
  • Nach IE und Chrome sind wir der dritte Browser, der diese Änderung implementiert.

Entsprechend der Mozilla Developer Network Dokumentation, das boolesche Formularelementattribut autocomplete verhindert, dass Formulardaten in älteren Browsern zwischengespeichert werden.

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

Andere Tipps

Zusätzlich zu autocomplete=off, können Sie auch festlegen, dass die Namen Ihrer Formularfelder durch den Code, der die Seite generiert, zufällig ausgewählt werden, indem Sie beispielsweise am Ende der Namen eine sitzungsspezifische Zeichenfolge hinzufügen.

Wenn das Formular gesendet wird, können Sie diesen Teil entfernen, bevor Sie ihn auf der Serverseite verarbeiten.Dies würde verhindern, dass der Webbrowser den Kontext für Ihr Feld findet, und könnte auch dazu beitragen, XSRF-Angriffe zu verhindern, da ein Angreifer nicht in der Lage wäre, die Feldnamen für eine Formularübermittlung zu erraten.

Die meisten großen Browser und Passwort-Manager (richtig, meiner Meinung nach) ignorieren es jetzt autocomplete=off.

Warum?Viele Banken und andere „Hochsicherheits“-Websites hinzugefügt autocomplete=off "aus Sicherheitsgründen" auf ihre Anmeldeseiten zugreifen, aber das verringert tatsächlich die Sicherheit, da es dazu führt, dass die Leute die Passwörter auf diesen Hochsicherheitsseiten ändern und sie sich leichter merken (und somit knacken), da die automatische Vervollständigung unterbrochen wurde.

Vor langer Zeit haben die meisten Passwort-Manager damit begonnen, sie zu ignorieren autocomplete=off, und jetzt beginnen die Browser, dasselbe nur für die Eingabe von Benutzername/Passwort zu tun.

Leider fügen Fehler in den Autocomplete-Implementierungen Benutzernamen und/oder Passwortinformationen in ungeeignete Formularfelder ein, was zu Fehlern bei der Formularvalidierung führt oder, noch schlimmer, dazu führt, dass versehentlich Benutzernamen in Felder eingefügt werden, die vom Benutzer absichtlich leer gelassen wurden.

Was kann ein Webentwickler tun?

  • Wenn Sie alle Passwortfelder auf einer Seite einzeln belassen können, ist das ein guter Anfang, da das Vorhandensein eines Passwortfelds offenbar der Hauptauslöser dafür ist, dass die automatische Vervollständigung durch Benutzer/Pass aktiviert wird.Ansonsten lesen Sie die folgenden Tipps.
  • Safari stellt fest, dass es zwei Passwortfelder gibt, und deaktiviert in diesem Fall die automatische Vervollständigung, vorausgesetzt, es muss sich um ein Formular zum Ändern des Passworts und nicht um ein Anmeldeformular handeln.Stellen Sie also sicher, dass Sie für alle Formulare, in denen Sie dies zulassen, zwei Passwortfelder (Neu und Neu bestätigen) verwenden
  • Chrom 34 wird leider versuchen, Felder automatisch mit Benutzer/Pass auszufüllen, wenn ein Passwortfeld angezeigt wird.Das ist ein ziemlich schlimmer Fehler, der hoffentlich das Safari-Verhalten ändern wird.Wenn Sie dies jedoch oben in Ihr Formular einfügen, scheint das automatische Ausfüllen des Passworts deaktiviert zu sein:

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

Ich habe IE oder Firefox noch nicht gründlich untersucht, werde die Antwort aber gerne aktualisieren, wenn andere Informationen in den Kommentaren haben.

Manchmal sogar Autovervollständigung=aus würde nicht verhindern, zu füllen in Anmeldeinformationen in falsche Felder, aber nicht in das Benutzer- oder Spitznamenfeld.

Diese Problemumgehung erfolgt zusätzlich zu Apinsteins Beitrag zum Browserverhalten.

Korrigieren Sie das automatische Ausfüllen des Browsers im schreibgeschützten Modus und setzen Sie den Fokus auf Schreibzugriff (Klicken und Tab).

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

Aktualisieren:Mobile Safari setzt den Cursor in das Feld, zeigt aber keine virtuelle Tastatur an.Der neue Fix funktioniert wie zuvor, behandelt jedoch die virtuelle Tastatur:

<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

Weil der Browser die Anmeldeinformationen automatisch in das falsche Textfeld einfügt!?

Ich bemerke dieses seltsame Verhalten in Chrome und Safari, wenn dort Passwortfelder vorhanden sind die gleiche Form. Ich vermute, dass der Browser nach einem Passwortfeld sucht, um Ihre gespeicherten Anmeldeinformationen einzugeben.Dann füllt es automatisch (nur aufgrund der Beobachtung erraten) das nächste textähnliche Eingabefeld aus, das vor dem Passwortfeld im DOM erscheint.Da der Browser die letzte Instanz ist und Sie ihn nicht steuern können,

Dieser schreibgeschützte Fix oben hat bei mir funktioniert.

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

Dies funktioniert im Internet Explorer und Mozilla Firefox, der Nachteil ist, dass es sich nicht um den XHTML-Standard handelt.

Die Lösung für Chrome besteht darin, hinzuzufügen autocomplete="new-password" zum Eingabetyp Passwort.

Beispiel:

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

Chrome vervollständigt die Daten immer automatisch, wenn es eine Kiste findet Passwort eingeben, gerade genug, um für dieses Feld anzugeben autocomplete = "new-password".

Das funktioniert gut für mich.

Notiz:Stellen Sie mit F12 sicher, dass Ihre Änderungen wirksam werden. Oft speichern Browser die Seite im Cache. Dadurch hatte ich den schlechten Eindruck, dass es nicht funktioniert hat, aber der Browser hat die Änderungen nicht wirklich übernommen.

Wie andere bereits gesagt haben, lautet die Antwort autocomplete="off"

Ich denke jedoch, dass es erwähnenswert ist Warum Es ist eine gute Idee, dies in bestimmten Fällen als Antwort auf dieses und zu verwenden Duplikat Fragen haben gezeigt, dass es besser ist, es nicht auszuschalten.

Das Stoppen der Speicherung von Kreditkartennummern durch Browser sollte nicht den Benutzern überlassen werden.Zu viele Benutzer werden nicht einmal erkennen, dass es sich um ein Problem handelt.

Es ist besonders wichtig, die Funktion in Feldern für Kreditkarten-Sicherheitscodes zu deaktivieren.Als diese Seite Zustände:

„Speichern Sie niemals den Sicherheitscode …“Ihr Wert hängt von der Annahme ab, dass die einzige Möglichkeit, sie bereitzustellen, darin besteht, sie von der physischen Kreditkarte abzulesen und zu beweisen, dass die Person, die sie bereitstellt, tatsächlich im Besitz der Karte ist.

Das Problem besteht darin, dass es für andere Benutzer leicht ist, Ihre Kartendaten zu stehlen, wenn es sich um einen öffentlichen Computer (Cyber-Café, Bibliothek usw.) handelt, und selbst auf Ihrem eigenen Computer könnte dies zu einer bösartigen Website führen Autovervollständigungsdaten stehlen.

Ich muss den Antworten widersprechen, die besagen, dass die automatische Vervollständigung nicht deaktiviert werden soll.

Als Erstes muss darauf hingewiesen werden, dass es sich um einen PCI-DSS-Fehler handelt, wenn die automatische Vervollständigung in Anmeldeformularfeldern nicht explizit deaktiviert wird.Wenn außerdem der lokale Computer eines Benutzers kompromittiert wird, kann ein Angreifer problemlos alle Autovervollständigungsdaten erhalten, da diese im Klartext gespeichert werden.

Es gibt sicherlich ein Argument für die Benutzerfreundlichkeit, es besteht jedoch ein sehr feines Gleichgewicht, wenn es darum geht, bei welchen Formularfeldern die automatische Vervollständigung deaktiviert werden sollte und bei welchen nicht.

Drei Optionen:Erste:

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

Zweite:

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

Drittens (Javascript-Code):

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

Ich habe den endlosen Kampf mit Google Chrome durch die Verwendung zufälliger Zeichen gelöst.Wenn Sie die automatische Vervollständigung immer mit einer zufälligen Zeichenfolge rendern, wird sich nie etwas merken.

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

Ich hoffe, dass es anderen Menschen hilft.

In einem verwandten oder genau entgegengesetzten Sinne –

"Wenn Sie der Benutzer des oben genannten Formulars sind und die automatische Vervollständigungsfunktionen wieder aufnehmen möchten, verwenden Sie das Lesezeichen" Remember Passwort "aus dieser Lesezeichen Seite.Es entfernt alle autocomplete="off" Attribute aus allen Formularen auf der Seite.Kämpfe weiter gegen den guten Kampf! "

Wir haben es tatsächlich genutzt sasb's Idee für eine Website.Es handelte sich um eine Web-App für medizinische Software zur Führung einer Arztpraxis.Viele unserer Kunden waren jedoch Chirurgen, die viele verschiedene Arbeitsplätze nutzten, darunter auch halböffentliche Terminals.Deshalb wollten sie sicherstellen, dass ein Arzt, der die Auswirkungen automatisch gespeicherter Passwörter nicht versteht oder nicht aufpasst, seine Anmeldeinformationen nicht versehentlich leicht zugänglich hinterlassen kann.Dies geschah natürlich vor der Idee des privaten Surfens, das in IE8, FF3.1 usw. eingeführt wird.Dennoch sind viele Ärzte gezwungen, in Krankenhäusern mit der IT, die sich nicht ändern wird, Browser der alten Schule zu verwenden.

Also ließen wir die Anmeldeseite zufällige Feldnamen generieren, die nur für diesen Beitrag funktionieren würden.Ja, es ist weniger praktisch, aber es ist für den Benutzer einfach übertrieben, dass die Anmeldeinformationen nicht auf öffentlichen Terminals gespeichert werden.

Einfach einstellen autocomplete="off".Dafür gibt es einen sehr guten Grund:Sie möchten Ihre eigene Autovervollständigungsfunktion bereitstellen!

Ich habe unzählige Lösungen ausprobiert und dann Folgendes gefunden:

Anstatt autocomplete="off" einfach nutzen autocomplete="false"

So einfach ist das und es funktioniert auch in Google Chrome hervorragend!

Ich finde autocomplete=off wird in HTML 5 unterstützt.

Fragen Sie sich jedoch, warum Sie dies tun möchten – es kann in manchen Situationen sinnvoll sein, aber tun Sie es nicht nur, um es zu tun.

Es ist für Benutzer weniger praktisch und stellt in OS X nicht einmal ein Sicherheitsproblem dar (von Soren weiter unten erwähnt).Wenn Sie befürchten, dass die Passwörter von Personen aus der Ferne gestohlen werden, könnte ein Tastenanschlag-Logger dies auch dann tun, wenn Ihre App sie verwendet autcomplete=off.

Als Benutzer, der sich dafür entscheidet, dass ein Browser (die meisten) meiner Informationen speichert, fände ich es ärgerlich, wenn Ihre Website meine Informationen nicht speichert.

In diesem Gespräch hat für mich keine der Lösungen funktioniert.

Endlich habe ich herausgefunden, a reine HTML-Lösung Das benötigt kein Javascript, funktioniert in modernen Browsern (außer IE;Es musste mindestens einen Haken geben, oder?) und erfordert nicht, dass Sie die automatische Vervollständigung für das gesamte Formular deaktivieren.

Deaktivieren Sie einfach die automatische Vervollständigung auf dem form und schalten Sie es dann für alle ein input Sie möchten, dass es innerhalb des Formulars funktioniert.Zum Beispiel:

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

War eine nicht standardmäßige Methode, dies zu tun (ich glaube, Mozilla und Internet Explorer unterstützen es immer noch), aber es ist eine schlechte Idee, sich mit den Erwartungen der Benutzer herumzuschlagen.

Wenn der Benutzer seine Kreditkartendaten in ein Formular eingibt und dann jemand anderen diesen Browser verwenden lässt, ist das nicht Ihr Problem.:) :)

Das funktioniert bei mir.

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

Wir können diese Strategie auch in anderen Steuerelementen wie Text, Auswahl usw. verwenden

Etwas spät im Spiel ... aber ich bin gerade auf dieses Problem gestoßen und habe mehrere Fehler ausprobiert, aber dieses funktioniert bei mir und ich habe es gefunden MDN

In einigen Fällen schlägt der Browser die Autokapostionswerte auch dann vor, auch wenn das automatische Vervollständigungsattribut auf OFF gesetzt ist.Dieses unerwartete Verhalten kann für Entwickler ziemlich rätselhaft sein.Der Trick, die No-Completion wirklich zu erzwingen, besteht darin, dem Attribut wie SO eine zufällige Zeichenfolge zuzuweisen:

autocomplete="nope"

Die beste Lösung:

Automatische Vervollständigung von Benutzername (oder E-Mail) und Passwort verhindern:

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

Automatische Vervollständigung eines Felds verhindern:

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

Erläuterung:autocomplete arbeitet weiter <input>, autocomplete="off" funktioniert nicht, aber man kann es ändern off zu einer zufälligen Zeichenfolge, wie nope.

Arbeitet in:

  • Chrom:49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 und 64

  • Feuerfuchs:44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 und 58

Hinzufügen der

autocomplete="off"

Wenn Sie dem Formular-Tag hinzufügen, wird die automatische Vervollständigung des Browsers (was zuvor in dieses Feld eingegeben wurde) für alle deaktiviert input Felder innerhalb dieses bestimmten Formulars.

Getestet am:

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

Versuchen Sie hinzuzufügen

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

zusätzlich zu

Autovervollständigung = „aus“

zu den Eingaben, an die Sie sich keine Formulardaten merken möchten (username, password, usw.), wie unten gezeigt:

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

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


Aktualisieren: Nachfolgend finden Sie ein vollständiges Beispiel, das auf diesem Ansatz basiert und dies verhindert ziehen und loslassen, Kopieren, Paste, usw.

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

Getestet mit den neuesten Versionen der wichtigsten Browser, d. h. Google Chrome, Mozilla Firefox, Microsoft Edge, usw.und funktioniert ohne Probleme.Hoffe das hilft...

Verwenden Sie für die Felder einen nicht standardmäßigen Namen und eine nicht standardmäßige ID, also anstelle von „name“ „name_“.Browser erkennen es dann nicht als Namensfeld.Das Beste daran ist, dass Sie dies für einige, aber nicht alle Felder tun können und einige, aber nicht alle Felder automatisch vervollständigt werden.

Um ungültiges XHTML zu vermeiden, können Sie dieses Attribut mithilfe von Javascript festlegen.Beispiel mit jQuery:

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

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

Das Problem besteht darin, dass Benutzer ohne Javascript die Funktion zur automatischen Vervollständigung erhalten.

Hinzufügen autocomplete="off" wird es nicht schaffen.

Ändern Sie das Eingabetypattribut in type="search".
Google wendet das automatische Ausfüllen nicht auf Eingaben mit einem Suchtyp an.

Probieren Sie diese auch aus, wenn es gerechtfertigt ist autocomplete="off" funktioniert nicht:

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

Ich kann nicht glauben, dass dies so lange, nachdem es gemeldet wurde, immer noch ein Problem ist.Die oben genannten Lösungen haben bei mir nicht funktioniert, da Safari anscheinend wusste, wann das Element nicht angezeigt wurde oder sich außerhalb des Bildschirms befand. Folgendes hat jedoch bei mir funktioniert:

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

Ich hoffe, das ist für jemanden nützlich!

Dies ist ein Sicherheitsproblem, das Browser derzeit ignorieren.Browser identifizieren und speichern Inhalte mithilfe von Eingabenamen, auch wenn Entwickler der Ansicht sind, dass die Informationen vertraulich sind und nicht gespeichert werden sollten.Das Problem wird dadurch gelöst, dass der Eingabename bei zwei Anfragen unterschiedlich ist (wird jedoch weiterhin im Cache des Browsers gespeichert und erhöht auch den Cache des Browsers).Den Benutzer zu bitten, Optionen in den Einstellungen seines Browsers zu aktivieren oder zu deaktivieren, ist keine gute Lösung.Das Problem kann im Backend behoben werden.

Hier ist meine Lösung.Ein Ansatz, den ich in meinem Framework implementiert habe.Alle Autovervollständigungselemente werden mit einer versteckten Eingabe wie dieser generiert:

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

Der Server verarbeitet dann Post-Variablen wie folgt:

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

Auf den Wert kann wie gewohnt zugegriffen werden

var_dump($_POST['username']);

Und der Browser kann keine Informationen aus der vorherigen Anfrage oder von früheren Benutzern vorschlagen.

Alles funktioniert wie ein Zauber, auch wenn Browser aktualisiert werden, ob die automatische Vervollständigung ignoriert werden soll oder nicht.Das war für mich der beste Weg, das Problem zu beheben.

Keiner der hier genannten Hacks hat bei mir in Chrome funktioniert.Hier gibt es eine Diskussion zum Thema: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Fügen Sie dies in a hinzu <form> funktioniert (zumindest im Moment):

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

Also hier ist es:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top