How to prevent Chrome and Firefox auto filling password input
Do you have a user management page where users are able to update their account passwords? Do you have form validation which 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 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 come to user management pages. Below I have outline an example where this can be a problem.
You have built an application where users are able to register, login 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 labelled “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.
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 realty 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 issue and may even drive you to re-think how the application presents itself to the user.
Just use Autocomplete = off !
Autocomplete works for all input fields other than inputs with the type “password”.
Autocomplete = new-password
This is the best solution to prevent the password input value being auto filled. Most modern browsers support this value however it is up to the browser whether or not to respect this.
<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 possibly add the new password form to another page.