Chrome Autofill/Autocomplete no value for password

Question

When you have saved username and password for some site Chrome will autofill that username and password, but if you try to get the value for the password input field it is e

Answer 1

Chrome's intended behavior is that an auto-filled password has an empty value in the DOM until the user interacts with the frame in some way, at which point chrome actually populates the value. Until this point any client side validation or attempt to ajax submit the form will see the password as empty.

This 'populate password value on frame interaction' behavior is inconsistent. I've found when the form is hosted in a same-origin iframe it only operates on the first load, and never on subsequent loads.

This is most evident on ajax forms where the autocomplete password populates on first load, however if that password is invalid and the ajax submission re-renders the form DOM, the autocompleted password re-appears visually but the value is never populated, irrespective of interaction.

None of the workarounds mentioned such as triggering blur or input events worked in this scenario. The only workaround I've found is to reset the password field value after the ajax process re-renders the form, e.g.:

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

After the above, Chrome actually autocompletes the password again but with the value actually populated.

In my current use case I'm using ASP.NET's Ajax.BeginForm and use the above workaround in the AjaxOptions.OnSuccess callback.

Answer 2

The autocomplete feature has successfully disabled. 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);
    }

});

Answer 3

With Angular, the new behaviour in Chrome (only allowing autofilled values to be read after the user has interaction with the page) manifests itself as an issue when you're using Angular's validation functionality in certain scenarios (for e.g using standard method/action attributes on the form). As the submit handler is executed immediately, it does not allow the form validators to capture the autofilled values from Chrome.

A solution I found for this to explicitly call the form controllers $commitViewValue function in the submit handler to trigger a revalidation before checking form.$valid or form.invalid etc.

Example:

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

Although this is working for us so far, I would be very interested if someone has found another, more elegant work around for the issue.

Answer 4

To me none of this solutions seemed to work.

I think this is worth mentioning that if you want to use it for CSS styling you sould use -webkit-autofill property like this:

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
}

Answer 5

This seems to be a bug in Chrome. When Chrome auto-fills a password on an initial page load (but not a refresh), the value appears in the form field on-screen, but querying passwordField.value in Javascript returns an empty string. If you depend on seeing that value in Javascript, this prevents you from doing so. Once the user does any other action on the page, such as clicking anywhere on the page, the value suddenly becomes visible to Javascript.

I'm not actually 100% sure if this is a bug, or if there is a security reason for doing this such as preventing a hidden frame from stealing your password by tricking the browser into filling it in.

A workaround that we have used is to detect the background color change that Chrome makes to fields that it has auto-filled. Chrome colors the background of auto-filled fields yellow, and this change is always visible to Javascript even when the value is not. Detecting this in Javascript lets us know that the field was auto-filled with a value, even though we see the value as blank in Javascript. In our case, we have a login form where the submit button is not enabled until you fill in something in the password field, and detecting either a value or the auto-fill background-color is good enough to determine that something is in the field. We can then enable the submit button, and clicking the button (or pressing enter) instantly makes the password field value visible to Javascript because interacting with the page fixes the problem, so we can proceed normally from there.

Answer 6

If you want make input to be seen as fulfilled, try to trigger blur on it: $('input[type="password"]').blur();