When developing web applications, you may encounter situations where you want to disable auto-fill and save suggestions from password managers for specific fields. For example, this applies to input fields for API Keys or Personal Access Tokens.

The standard autocomplete="off" alone doesn’t work as intended with many password managers. This article introduces HTML attributes to disable auto-fill and save for major password managers.

Conclusion: Handling Multiple Cases

To handle multiple password managers at once, it’s effective to specify the following attributes together on the target input element.

<input
  type="password"
  name="api_key"
  autocomplete="off"
  data-1p-ignore
  data-lpignore="true"
  data-bwignore="true"
/>

Below, I’ll explain the configuration method for each password manager.

1Password

By adding the custom data attribute data-1p-ignore to the input element, you can make 1Password ignore auto-fill and save suggestions.

<input type="text" name="api_key" data-1p-ignore />

• Reference: 1Password Developer Documentation: Ignore offers to save or fill specific fields

LastPass

By adding the attribute data-lpignore="true" to the input element, you can disable LastPass’s auto-fill feature.

<input type="password" name="api_key" data-lpignore="true" />

• Reference: LastPass Support: How do I prevent fields from being filled automatically?

Bitwarden

By adding the attribute data-bwignore="true" to the input element, you can make Bitwarden ignore that field.

<input type="text" name="api_key" data-bwignore="true" />

• Reference: Bitwarden Release Notes (2021-06-29)

Summary

Password managers are very convenient tools for users, but sometimes they provide unwanted auto-fill and save suggestions. By considering the balance between user experience and security and appropriately using the custom data attributes introduced in this article in suitable situations, you can provide more user-friendly web forms.

That’s all from the Gemba about wanting to work well with password managers.