How to Disable Autofill for Real

Gerald — Thu, 25 Jul 2024 11:05:57 +0000

As you may have noticed, browsers provide autocompletion and autofill for inputs.

But sometimes we don't need it. For example, we know that the input is for a different value every time.

Let's explore how autofill works and whether there is a reliable way to disable it.

Autocomplete vs Autofill

Autocomplete works as suggestions, so if we input something like a username, the browser saves it and suggests the same value the next time we open this website.

Autofill works differently. It tries to prepopulate fields that the browser recognizes, such as usernames, passwords, and other form fields. This is usually done by the browser's built-in password manager.

Password managers also use autocomplete to detect which value should be filled in.

The `autocomplete` attribute

Browsers offer an autocomplete attribute for us to control this behavior. See MDN for more details.

With this attribute, we can tell browsers how to fill the input. For example:

<input autocomplete="off"> - Turn off autocomplete
<input autocomplete="email"> - Autofill with the user's email
<input autocomplete="one-time-code"> - A one-time password

The browser recognizes autocomplete="one-time-code" so it won't try to fill it with an obviously invalid value.

The password manager

The password manager has a different story.

It respects the autocomplete attribute to some extent. For example, it knows <input autocomplete="new-password"> is for a new password, so it shouldn't be populated with the current password. But that's it.

Allegedly, there was a story between the password managers and the banks.

When banks realized that browsers remember passwords and autofill the inputs, they worried that the passwords could be easily breached. So they always add autocomplete="off" and forced the users to input passwords by hand. As a result, users tended to set simpler passwords that they could remember.

Password manager authors could not agree with the banks. They thought password managers could provide different and more complicated passwords for each service, so they are much more secure. And even if one password is hacked, the others remain safe. So they decided to ignore the autocomplete="off" attribute for password-related fields, particularly username and password.

Besides that, password managers always try to be smart. So if there is no autocomplete attribute for inputs, they try to figure it out themselves.

It's easy to tell if there is an input for a password. We just need to find an <input type="password">. Once a password input is found, the browser will try to find an input for the username. If no <input autocomplete="username"> is found, it simply treats the closest input before the password input as the username input.

Here are some examples:

<!-- `input[autocomplete="username"]` is considered the username input -->
<div>Input 1: <input></div>
<div>Input 2: <input type="password"></div>          <!-- Password -->
<div>Input 3: <input autocomplete="username"></div>  <!-- Username -->

<!-- The only other input is considered the username input -->
<div>Input 1: <input type="password"></div>  <!-- Password -->
<div>Input 2: <input></div>                  <!-- Username -->

<!-- The input right before the password input is considered the username input -->
<div>Input 1: <input></div>                  <!-- Username -->
<div>Input 2: <input type="password"></div>  <!-- Password -->
<div>Input 3: <input></div>