Chrome/Firefox autocomplete=new-password not working

Asked 30/1, 2020 at 17:32 Answered 4/4, 2022 at 8:36

I'm trying to add autocomplete=new-password to some user-editing forms, but it fails to follow the correct behavior in Chrome 79 and Firefox 71. It's supposed to be supported in both browsers.

What's wrong here?
I created two very simple examples to remove any external interference to the issue. They can be served from any HTTP server (e.g. php -S localhost:8999). The first page triggers the "save login" feature, but the second should NOT use that info to autocomplete the password - yet, it does.

<!-- login.htm -->
<html>

<head></head>

<body>
  <form action="edit.htm" method="post">
    <label>Login <input type="text" name="login" /></label></br>
    <label>Password <input type="password" name="pwd" /></label><br />
    <input type="submit">
  </form>
</body>

</html>

<head></head>

<body>
  <form>
    <label>Login <input type="text" name="login" /></label></br>
    <label>New Password <input type="password" name="pwd" autocomplete="new-password" /></label><br />
    <input type="submit">
  </form>
</body>

</html>

This is not exactly a dup from "how to use autocomplete=new-password" as the behavior seems to have changed or is ill-documented.

Pithy answered 30/1, 2020 at 17:32 Comment(2)

I don't have Chrome 79 and Firefox 71. I've tested it on Chrome 85 and FF 80 on Ubuntu. It works as intended. What exactly do you mean by "should NOT use that info to autocomplete the password - yet, it does." Because intended behavior is that they SHOULD NOT fill it in without user's permission, but they SHOULD USE THAT INFO if user wishes so. – Crim 9/9, 2020 at 10:14

And if you're wandering why, then, yes, there is a reason:

Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise. For this reason, many modern browsers do not support autocomplete="off" for login fields

. Does this answer your question? – Crim 9/9, 2020 at 10:19

This seems to be an issue/advantage that browsers force pages to behave this way, and absolutely this is not fixed when setting autocomplete="new-password" or even if you set the value to off. but there seems to be a workaround to fix this issue caused accidentally by the browser.

- HTML way:

You can fix this by adding hidden fields at the top of your form to distract the browser

<!--  fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">

- JS way:

you can just set the password input to readonly the change its state

<html>
<head></head>
<body>
<form>
        <label>Login <input type="text" name="login"/></label></br>
        <label>New Password <input type="password" id="password" name="pwd" readonly autocomplete="new-password"/></label><br/>
        <input type="submit">
</form>
<script>
    document.getElementById('password').onfocus = function() {
        document.getElementById('password').removeAttribute('readonly');
    };
</script>
</html>

Marcmarcano answered 11/9, 2020 at 11:58 Comment(0)

^{As you didn't reply to my comments I suppose that my assumption was correct. So I'll post the comments as the answer:}

I don't have Chrome 79 and Firefox 71. I've tested it on Chrome 85 and FF 80 on Ubuntu.

It works as intended.

I assume that by

should NOT use that info to autocomplete the password - yet, it does.

you mean that:

When the password field gets focus browsers show a drop-down list with an option to fill in the field with previously stored password.

This looks to you as

[browsers] should NOT use that info to autocomplete the password.
[...] the behavior seems to have changed or is ill-documented.

But actually this is exactly the intended behavior.

From this (the previous paragraph on the same page you've linked) you can see the reason:

Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.

For this reason, many modern browsers do not support autocomplete="off" for login fields

If a site sets autocomplete="off" for username and password fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

Of course, it's about autocomplete="off" not about autocomplete="new-password"

Let's read further

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password".

This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling <input> elements with autocomplete="new-password" for this very reason.

From this:

autofilling is not the same thing as suggestions
browser CAN, but not SHOULD prevent autofilling
autocomplete="new-password" prevents autofilling not suggestions

So when you set autocomplete="new-password" browsers stop filling these fields but continue to show drop-downs with suggestions.

There is nothing about autocomplete="new-password" stopping suggestions, and there is a clear reason why suggestions are always available.

Yes, maybe the wording is a little bit confusing, but follows the behavior to the word.

About the history and use-cases behind this feature you can read here

And now about use-cases... why do you need this?

If several users have access to the computer, disabling suggestions won't stop them from logging in to a site as a different user. They can see passwords in the settings and use them. To prevent this, users must have different accounts on the computer.
If you don't want them to use old password in place of a new-password, then, yes, it will complicate things a little (which is actually bad - when things are complicated users tend to use poor passwords), but won't stop them from remembering the old password or, again, from getting it from the settings. For that you need to check if the password is really new in your code.
If you want to prevent suggestions anyway, then you can use hacks from @Moayad.AlMoghrabi's answer (I haven't tested them, but I believe he did). But without knowing your use case, I would strongly recommend against it. It breaks user experience and does not boost security. On the contrary, lessens it.

Crim answered 13/9, 2020 at 4:53 Comment(2)

I can see why this was downvoted, but this is the correct answer. Thanks for the explanation. – Guiltless 11/8, 2021 at 5:31

This is indeed the correct answer. The user using the browser had decided to save the password before so the browser keeps displaying that. It could have caused a problem if the browser didn't because, once the password is saved, the user can voluntarily forget about the password. Correct answer indeed. – Nashua 4/3, 2023 at 14:3

I know what your talking about, and in your case you should leave it. Security is a major issue, obviously, and the answers above are absolutely correct. There are work-arounds though, like using read-only which has been mentioned, I would try to achieve your goal using read-only, however; read-only does not always give disired results. A less favorable, and I feel like someone is going to lecture me hard for answering with this, but I feel as a developer, you need all the information, what you do with that information is your decision.

PSEUDO ELEMENTS

Googles chrome and Safari, imho, are the most annoying when it comes to auto-fill. To get around this, one option is to create HTML pseudo elements for the pwd and login inputs. Hide them using CSS display property set to none. Since google will only auto-fill one password-input element, and one username text-input element, this work around tricks Google into auto-filling elements that are not displayed.
The Problem With This Method

The problem with this method is that you need to make sure that you validate the data on the backend, and even more so, you need to make-sure your using the right elements to pull data from for your database. The worst problem is that as things update this work-around will guaranteed, at some-point, either stop working and the elements will one-day show without you knowing, making not developers using your site very confused, or confuse the browser in ways we cannot predict because the changes have not come. Its somthing you always have to be aware of. I use to use this method alot, but I stopped because people who know a lot more than I do, really did not like me doing it.

End Note: Every browser is programed to present forms differently. Some browsers, especially mobile versions and safari actually change the physical look of your elements, which IMO is uncalled for. At the same time though they do this to try and deliver web standards to boost security and make things easier to use for people like my non tech-savvy 85 year-old Grandma. As noted, browser do things differently, and people can choose different browsers, selecting the one they want. Auto-fill is part of the experience that users get from a browser, and is a major deciding factor on which browser people choose. If you use work around, like the one I explained you change that browser experience, and give the user what you want, but it might not be what they want.
If you do decide to use, or at-least try this method, please let me know how it goes, its a pretty easy hack/work-around, and I have got pretty good at tricking browsers and can help you if my example doesn't work for you. Let me know what backend your using and browsers your experimenting with and I will get you working code, but first think about what you really want. Sometimes we have to settle, especially if it is in the best interest of the clients experience using the sites/apps we build, or to improve the security of, not just the client but, our servers and our self.

body{
  width: 100vw;
  padding: 0;
  margin: 0;
  background-color: #ddb;
  overflow-x: hidden;
}

#login-psuedo{
  display: none;
}

#pwd-psuedo{
  display: none;
}

<html>
<head>
   <style></style>
</head>

<body>
  <form>     
    <input id="login-psuedo" type="text" name="login-psuedo"/>
    
    <input id="pwd-psuedo" type="password" name="pwd-psuedo" autocomplete="new-password"/>
    
    <br />

   <label>Login <input type="text" name="login"/></label></br>
   <label>New Password <input type="password" name="pwd"      autocomplete="new-password"/></label>
   <br>
   <br>
   
    <input type="submit" value="Submit">
  </form>
</html>

Grecize answered 14/9, 2020 at 14:51 Comment(1)

Also if you don't understand something, just ask. – Grecize 14/9, 2020 at 14:52

I know quite an old question. But adding autocomplete="off" in the form tag might help (I know not in all cases - as some fields might require autocomplete fills - Specially when you are testing)

works for firefox now* (*98.0.2 (64-bit))

Thibeault answered 4/4, 2022 at 8:36 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags