it-swarm.com.de

Chrome Autofill/Autocomplete kein Wert für das Kennwort

Wenn Sie den Benutzernamen und das Kennwort für eine Site gespeichert haben, füllt Chrome diesen Benutzernamen und das Kennwort automatisch. Wenn Sie jedoch versuchen, den Wert für das Eingabefeld für das Kennwort zu erhalten, ist es leer. String, auch wenn dort ein Wert ****** vorhanden ist.

Wenn Sie irgendwo auf die Seite klicken, wird der Wert von input type="password" nicht ausgefüllt.

Dies ist Fiddle user/pass der Struktur des HTML-Codes und des Befehls console.log. Es ist hier nicht zu sehen, aber es kann auf jeder Seite mit Anmeldeformular reproduziert werden. Benutzername und Kennwort werden beim Laden der Seite automatisch ausgefüllt. Wenn Sie den Wert des Felds überprüfen, bevor Sie auf eine andere Stelle auf der Site klicken, ist der String leer.

Dies ist in Firefox oder Internet Explorer nicht der Fall, da der Wert des Elements input mit dem Kennwort gefüllt wird.

Ich verwende Windows 7 Ultimate 64-Bit-Betriebssystem, und die Google Chrome-Version ist 48.0.2564.97 m

Ist das ein normales Verhalten, ein Fehler oder?

UPDATE:

Wenn Sie auf F5 klicken, um die Seite neu zu laden und das Kennwortfeld zu überprüfen, wird der Wert für das Kennwort dort angezeigt. Wenn Sie in Chrome in der oberen linken Ecke auf die Schaltfläche zum erneuten Laden klicken, ist der Wert für das Kennwortfeld eine leere Zeichenfolge.

42
onetwo12

Dies scheint ein Fehler in Chrome zu sein. Wenn Chrome ein Kennwort beim ersten Laden der Seite automatisch ausfüllt (jedoch nicht aktualisiert), wird der Wert im Formularfeld auf dem Bildschirm angezeigt. Wenn Sie jedoch passwordField.value in Javascript abfragen, wird eine leere Zeichenfolge zurückgegeben. Wenn Sie davon abhängig sind, dass dieser Wert in Javascript angezeigt wird, können Sie dies nicht tun. Sobald der Benutzer eine andere Aktion auf der Seite ausführt, z. B. durch Klicken auf eine beliebige Stelle der Seite, wird der Wert plötzlich für Javascript sichtbar.

Ich bin nicht wirklich zu 100% sicher, ob es sich um einen Fehler handelt oder wenn es einen Sicherheitsgrund dafür gibt, beispielsweise das Verhindern, dass ein versteckter Frame Ihr Kennwort stiehlt, indem er den Browser dazu bringt, es auszufüllen.

Eine Problemumgehung, die wir verwendet haben, ist das Erkennen der Hintergrundfarbänderung, die Chrome in von ihm automatisch ausgefüllte Felder vornimmt. Chrome färbt den Hintergrund der automatisch ausgefüllten Felder gelb, und diese Änderung ist für Javascript immer sichtbar, auch wenn der Wert nicht angegeben ist. Wenn Sie dies in Javascript erkennen, wissen Sie, dass das Feld automatisch mit einem Wert gefüllt wurde, auch wenn der Wert in Javascript leer ist. In unserem Fall haben wir ein Anmeldeformular, bei dem die Schaltfläche "Senden" erst aktiviert wird, wenn Sie etwas im Kennwortfeld eingeben. Wenn Sie einen Wert oder die Hintergrundfarbe für das automatische Ausfüllen erkennen, ist dies ausreichend, um festzustellen, dass sich etwas im Feld befindet . Wir können dann die Schaltfläche "Senden" aktivieren, und durch Klicken auf die Schaltfläche (oder Drücken der Eingabetaste) wird der Wert des Kennwortfelds sofort für Javascript sichtbar, da die Interaktion mit der Seite das Problem behebt, so dass wir normal fortfahren können.

35
Adam Hamilton

Arbeitsantwort vom 8. Juli 2016

Adam richtig angegeben Dies ist ein Fehler (oder beabsichtigtes Verhalten). Keine der vorherigen Antworten sagt jedoch tatsächlich aus, wie Sie dies beheben können. Hier ist eine Methode, mit der Chrome gezwungen wird, den automatisch vervollständigten Wert als reellen Wert zu behandeln.

Es müssen mehrere Dinge in der richtigen Reihenfolge passieren, und dies muss nur in Chrome und nicht in Firefox ausgeführt werden, daher die if.

Zuerst konzentrieren wir uns auf das Element. Wir erstellen dann eine neue TextEvent und führen initTextEvent aus, wodurch eine benutzerdefinierte Zeichenfolge hinzugefügt wird (ich habe "@@@@@") am Anfang des Werts verwendet. Dies bewirkt, dass Chrome tatsächlich so wirkt, als wäre der Wert real. Wir können dann die benutzerdefinierte Zeichenfolge entfernen, die wir hinzugefügt haben, und dann unscharf stellen.


Code:

input.focus();

var event = document.createEvent('TextEvent');

if ( event.initTextEvent ) {

    event.initTextEvent('textInput', true, true, window, '@@@@@');

    input.dispatchEvent(event);

    input.value = input.value.replace('@@@@@','');

}

input.blur();

Bearbeiten Sie den 10. August 2016

Dies funktioniert nur in Chrome unter Windows und Android. Funktioniert nicht unter OSX. Darüber hinaus wird es im September 2016 aufhören zu arbeiten, laut:

https://www.chromestatus.com/features/5718803933560832

Ich habe auch ein Chromium-Ticket eröffnet.

https://bugs.chromium.org/p/chromium/issues/detail?id=636425

Ab dem 12. August sagte ein Mitglied des Chrome-Teams auf dem obigen Ticket, dass sich das Verhalten nicht ändern wird, da es nicht als Fehler angesehen wird.

Langfristiger Umgehungsvorschlag:

Das aktuelle Verhalten wurde jedoch von der ersten Implementierung an optimiert. Der Benutzer muss nicht mehr mit der Kennworteingabe für den zu meldenden Wert interagieren. Der Benutzer muss nur noch mit einem beliebigen Teil der Seite interagieren (Maus oder Tastaturereignis senden). Das bedeutet, dass die Validierung bei pageload zwar immer noch nicht funktioniert, das Klicken auf die Schaltfläche "Abschicken" bewirkt jedoch, dass Chrome den Kennwortwert korrekt meldet. Um dies zu umgehen, überprüfen Sie alle Eingaben, die möglicherweise automatisch abgeschlossen werden, falls dies beim Senden der Fall ist.


13. Dezember 2016 bearbeiten:

Ein neues Chromium-Ticket wurde eröffnet und wird besser angenommen. Wenn Sie daran interessiert sind, dieses Verhalten von Chrome zu ändern, markieren Sie dieses neue Ticket:

https://bugs.chromium.org/p/chromium/issues/detail?id=669724

23
Andy Mercer

Fortsetzung von dem, was Andy Mercer sagte , hier ist meine Arbeit. Wie viele Leute brauche ich nicht den tatsächlichen Passwortwert. Ich muss nur wissen, dass das Kennwortfeld automatisch ausgefüllt wurde, damit ich die richtigen Überprüfungsmeldungen anzeigen kann.

Persönlich würde ich nicht die vorgeschlagene Lösung verwenden, um die durch die automatische Ausfüllung von Chrome verursachte Änderung der Hintergrundfarbe zu erkennen. Dieser Ansatz scheint spröde zu sein. Es kommt darauf an, dass sich die gelbe Farbe nicht ändert. Dies könnte jedoch durch eine Erweiterung geändert werden und in einem anderen Blink-basierten Browser (z. B. Opera) anders sein. Außerdem gibt es kein Versprechen, dass Google zukünftig keine andere Farbe verwendet. Meine Methode funktioniert unabhängig vom Stil.

Zuerst stelle ich in CSS den Inhalt der INPUT ein, wenn die -webkit-autofil-Pseudoklasse auf sie angewendet wird:

input:-webkit-autofill {
  content: "\feff"
}

Dann erstellte ich eine Routine, um den Inhalt zu überprüfen:

const autofillContent = `"${String.fromCharCode(0xFEFF)}"`;
function checkAutofill(input) {
    if (!input.value) {
        const style = window.getComputedStyle(input);
        if (style.content !== autofillContent)
            return false;
    }

    //the autofill was detected
    input.classList.add('valid'); //replace this. do want you want to the input
    return true;
}

Zum Schluss habe ich die input abgefragt, damit die Zeit für das automatische Ausfüllen abgeschlossen werden kann:

const input = document.querySelector("input[type=password]");

if (!checkAutofill(input)) {
    let interval = 0;
    const intervalId = setInterval(() => {
        if (checkAutofill(input) || interval++ >= 20)
            clearInterval(intervalId);
    }, 100);
}
6
Ben

Eine weitere Option ab dem 16. Dezember/Chrome 54

Ich kann den Wert des Kennwortfeldes nicht abrufen, aber nach "kurzer Zeit" kann ich die Länge des Kennworts ermitteln, indem ich es auswähle.

setTimeout(function() {
  // get the password field
  var pwd = document.getElementById('pwd');
  pwd.focus();
  pwd.select();
  var noChars = pwd.selectionEnd;
  // move focus to username field for first-time visitors
  document.getElementById('username').focus()
  if (noChars > 0) {
    document.getElementById('loginBtn').disabled = false;
  }
}, 100);
4
crsw

Hier ist meine Lösung für dieses Problem:

$(document).ready(function(){
  if ( $("input:-webkit-autofill").length ){
    $(".error").text("Chrome autofill detected. Please click anywhere.");
  }
});

$(document).click(function(){
  $(".error").text("");
});

Im Grunde macht ein Klick die Eingabe für den Benutzer sichtbar, also bitte ich den Benutzer, auf die Schaltfläche zu klicken, und dann blende ich die Nachricht aus.

Nicht die eleganteste Lösung, aber wahrscheinlich die schnellste.

4
SamJakob

Ich habe eine Lösung für dieses Problem gefunden, die zumindest für meine Zwecke funktioniert.

Ich habe ein Anmeldeformular, mit dem ich einfach die Eingabetaste drücken möchte, sobald es geladen wird, aber ich hatte ein Problem mit dem leeren Kennwort in Chrome.

Das Folgende scheint zu funktionieren, der erste Eingabetaste schlägt fehl und es wird erneut versucht, sobald Chrome aufwacht und den Kennwortwert angibt.

$(function(){

    // bind form submit loginOnSubmit
    $('#loginForm').submit(loginOnSubmit);

    // submit form when enter pressed on username or password inputs
    $('#username,#password').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#loginForm').submit(e);
            return false;
        }
    });

});

function loginOnSubmit(e, passwordRetry) {

    // on submit check if password is blank, if so run this again in 100 milliseconds
    // passwordRetry flag prevents an infinite loop
    if(password.value == "" && passwordRetry != true)
    {
        setTimeout(function(){loginOnSubmit(e,true);},100);
        return false;
    }

    // login logic here
}
3
bbeckford

Ich habe gerade eine Winkelrichtlinie dazu geschrieben. Endete mit dem folgenden Code:

if ('password' == $attrs.type) {
      const _interval = $interval(() => { //interval required, chrome takes some time to autofill
          if ($element.is(':-webkit-autofill')) { //jQuery.is()
              //your code
              $interval.cancel(_interval);
          }
      }, 500, 10); //0.5s, 10 times
}

ps: 100% der Zeiten werden nicht erkannt. Chrom benötigt möglicherweise mehr als 5 Sekunden, um die Eingabe zu füllen.

3
Ian Luca

Die von Adam angegebene Problemumgehung:

Erkennen Sie die Hintergrundfarbänderung, die Chrome in Feldern vornimmt, die automatisch ausgefüllt werden. Chrome färbt den Hintergrund der automatisch ausgefüllten Felder gelb, und diese Änderung ist für Javascript immer sichtbar, auch wenn der Wert nicht angegeben ist. Wenn Sie dies in Javascript erkennen, wissen Sie, dass das Feld automatisch mit einem Wert gefüllt wurde, auch wenn der Wert in Javascript leer ist

Das hat mir gefallen: -

getComputedStyle(element).backgroundColor === "rgb(250, 255, 189)"

dabei ist rgb (250, 255, 189) die gelbe Farbe. Chrome gilt für automatisch gefüllte Eingaben.

3
Frozen Crayon

Das beabsichtigte Verhalten von Chrome besteht darin, dass ein automatisch ausgefülltes Kennwort im DOM eine leere value enthält, bis der Benutzer auf irgendeine Weise mit dem Frame interagiert. Zu diesem Zeitpunkt füllt Chrome den Wert tatsächlich auf. Bis zu diesem Zeitpunkt wird bei einer clientseitigen Validierung oder dem Versuch, das Formular zu senden, das Kennwort als leer angezeigt.

Dieses Verhalten zum Auffüllen des Kennwortwerts bei Frame-Interaktionen ist inkonsistent. Ich habe festgestellt, dass das Formular, wenn es in einem Same-Origin-Iframe gehostet wird, nur beim ersten Laden und niemals beim nachfolgenden Laden funktioniert.

Dies ist am deutlichsten bei ajax-Formularen zu erkennen, bei denen das Autocomplete-Kennwort beim ersten Laden ausgefüllt wird. Wenn dieses Kennwort jedoch ungültig ist und die Ajax-Übergabe das Formular-DOM erneut erstellt, erscheint das automatisch vervollständigte Kennwort zwar visuell, die value wird jedoch unabhängig von der Interaktion nie aufgefüllt .

Keine der genannten Problemumgehungen wie das Auslösen von blur- oder input-Ereignissen funktionierte in diesem Szenario. Die einzige Problemumgehung, die ich gefunden habe, ist das Zurücksetzen des Kennwortfeldwerts, nachdem der Ajax-Prozess das Formular erneut rendert, z. B .:

$('input[type="password"]').val("");

Nach dem oben genannten Vorgang führt Chrome das Kennwort zwar automatisch erneut aus, jedoch wird die Variable value tatsächlich ausgefüllt.

In meinem aktuellen Anwendungsfall verwende ich das Ajax.BeginForm von ASP.NET und verwende die obige Problemumgehung im AjaxOptions.OnSuccess-Rückruf.

1
James Martin

Bei Angular tritt das neue Verhalten in Chrome (das das Lesen von automatisch ausgefüllten Werten nur zulässt, nachdem der Benutzer mit der Seite interagiert hat) als Problem auf, wenn Sie die Validierungsfunktion von Angular in bestimmten Szenarien verwenden (z. B. Standardattribute für Methoden/Aktionen) auf dem Formular). Da der Submit-Handler sofort ausgeführt wird, können die Formularprüfer die automatisch ausgefüllten Werte nicht in Chrome erfassen.

Eine Lösung, die ich dazu gefunden habe, um die Formular-Controller-Funktion $commitViewValue im Übergabehandler explizit aufzurufen, löst eine Verlängerung aus, bevor form.$valid oder form.invalid usw. überprüft wird.

Beispiel:

function submit ($event) {
    // Allow model to be updated by Chrome autofill
    // @see http://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password
    $scope.loginModule.$commitViewValue();

    if ($scope.loginModule.$invalid) {
        // Disallow login
        $scope.loginModule.$submitted = true;
        $event.preventDefault();
    } else {
        // Allow login
    }
}

Obwohl dies bisher für uns funktioniert, wäre ich sehr interessiert, wenn jemand eine andere, elegantere Arbeit für das Thema gefunden hat.

1
drewzh

Es ist kein Fehler. Es ist eine Sicherheitsfrage. Stellen Sie sich vor, Sie könnten einfach Javascript verwenden, um automatisch aufgefüllte Kennwörter abzurufen, ohne dass der Benutzer dies bestätigt.

0
Timothy Law
$element.is("*:-webkit-autofill")

funktioniert bei mir

0
harry

Setzen Sie einfach das Attribut "Autocomplete" auf "Benutzername" für das Feld "Benutzername" und "Neues Kennwort" für das Feld "Kennwort".

<input type="text" id="username" autocomplete="username">
<input type="password" id="password" autocomplete="new-password" >
0
Joseph

Die Autovervollständigungsfunktion wurde erfolgreich deaktiviert. .It Works!

[HTML]

<div id="login_screen" style="min-height: 45px;">
   <input id="password_1" type="text" name="password">
</div>

[JQuery]

$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
    let elem = $(this);

    if (elem.val().length > 0 && elem.attr("type") === "text") {
        elem.attr("type", "password");
    } else {
        setTimeout(function () {
            if (elem.val().length === 0) {
                elem.attr("type", "text");
                elem.hide();
                setTimeout(function () {
                    elem.show().focus();
                }, 1);
            }
        }, 1);
    }

    if (elem.val() === "" && e.type === "mousedown") {
        elem.hide();
        setTimeout(function () {
            elem.show().focus();
        }, 1);
    }

});
0
EngineerCoder
var txtInput = $(sTxt);
txtInput.focus();
txtInput.select();

Diese Lösung funktionierte in meinem Fall ... mit jQuery 3.1.1.

0
CornyVanBeck

Für mich schien keine dieser Lösungen zu funktionieren.

Ich denke, dies ist erwähnenswert, wenn Sie es für das CSS-Styling verwenden möchten, sollten Sie die Eigenschaft -webkit-autofill wie folgt verwenden:

input:-webkit-autofill~.label,
input:-webkit-autofill:hover~.label, 
input:-webkit-autofill:focus~.label
input:focus~.label,
input:not(.empty)~.label {
  top: -12px;
  font-size: 12px;
  color: rgba(0, 0, 0, .4);
  font-weight: 600
}

0
Adrian Gołda

Wenn Sie möchten, dass die Eingabe als erfüllt betrachtet wird, versuchen Sie, blur darauf auszulösen: $('input[type="password"]').blur();

0
gregmatys