Security Tip: HTML autocomplete Attribute

The HTML autocomplete attribute is an incredibly useful attribute from a security point of view, as it allows you to help password managers interact with password fields. This makes it easier for users to generate and use secure passwords, keeping their accounts (and your app) more secure. It’s also incredibly easy to add to existing projects, making it easy to implement with minimal, if any, side affects.

<input type="password" ... autocomplete="<VALUE>">

Let’s take a look at the options you want:

autocomplete="new-password"

Instructs the browser to not autofill anything into this field, but instead wait for a new password. This makes it harder to accidently reuse passwords across apps. This should be used on both the New Password and Confirm Password fields.

Some browsers and password managers will prompt to create and store a new secure password in this field, which makes creating accounts with secure passwords super easy.

autocomplete="current-password"

Instructs the browser to autofill the known current password for the site. Making the login process easy.

This works well when used alongside the autocomplete="username" or autocomplete="email" attribute on your username/email field.

autocomplete="one-time-code"

Identifies One-Time-Password (OTP) fields, such as for Multi-Factor Authentication (MFA) via SMS, or App codes.

Some password managers, like 1Password, allow you to store App-based MFA tokens, so they can autofill during the login flow. (I believe SMS OTP tokens can also be autofilled on iOS?)

autocomplete="off"

As a special mention here, this setting is often requested on penetration tests and older compliance standards. However it is ignored by many browsers/password managers on password fields because it goes against modern password recommendations.

There are also a bunch of `cc-*` attributes that relate to collecting credit cards, which allows the browser to safely autofill card detail. I’m not going to cover them here, but if you’re collecting card details manually, you can check those out at the MDN Docs.t