Prevent Chrome and Firefox auto-filling password
By Dillon Smart · · · 1 Comments
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.
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.
1 Comment
Tomas
thanks!