Prevent Chrome and Firefox auto-filling password

by Dillon -

Chrome Browser

Do you have a user management page where users are able to update their account passwords? Do you have form validation that checks a password field against a confirmation password field but the validation fails because the browser has auto-filled the values? In this article, you will learn how to prevent Chrome and Firefox from auto-filling password inputs.

Modern browsers by default remember information that users submit through input fields on websites. By doing this the browser is able to offer the user a better experience by auto-completing tedious forms. However, this can cause a problem when it comes to user management pages. Below I have outlined an example where this can be a problem.

Example scenario

You have built an application where users are able to register, log in and manage their account information. On the account information page, you have a number of fields visible to the user, and a few which are hidden. Name, Email, a button labeled “Change Password”, and a submit button. The hidden fields are Password and Password Confirmation. If the user does not want to change their password, they simply do not click the change password button, however, if they do click the change password button, the Password and Password Confirmation fields are made visible.

Autofill Password

Modern browsers will ignore the hidden password input and auto-fill the value, causing the password value and password confirmation value to no longer match and treat this as the user is updating their password when in reality they are only updating their name.

As you can see, auto-filling the password field in the above example can cause a number of usability issues and may even drive you to re-think the UI of the application.

Prevent Chrome and Firefox auto-filling password

Autocomplete = off !

Autocomplete works for all input fields other than inputs with the type “password”.

Autocomplete = new-password

Using the new-password value for the Autocomplete attribute is the best method to prevent Chrome and Firefox from auto-filling passwords. Most modern browsers support this value however it is up to the browser whether or not to respect this. Below is an example password input that uses the autocompleted=”new-password” attribute.

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

An alternative solution would be to move the password fields away from the main user management form and add the new password form to another page.

Dillon Smart

šŸ‘‹ Hey, I'm Dillon!

Iā€™m a Full-Stack developer in the UK, building websites and applications for around 12 years, landing my first full-time job as a developer in 2015.

Feel free to reach out on Twitter!

Tomas

thanks!

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

šŸ‘‹ Hey, Dillon here!

Every week I give a glimpse into my experiences as a Full Stack Developer.