input type="password"でパスワードマネージャーの自動入力・保存を無効にする方法

Webアプリケーションを開発していると、パスワードマネージャーによる自動入力や保存の提案を特定のフィールドで無効にしたい場面に遭遇することがあります。例えば、API KeyやPersonal Access Tokenの入力欄などが該当します。

標準のautocomplete="off"だけでは、多くのパスワードマネージャーは意図通りに動作してくれません。この記事では、主要なパスワードマネージャーに対して、自動入力・保存を無効化するためのHTML属性を紹介します。

複数のパスワードマネージャーに一度に対応するには、対象のinput要素に以下の属性をまとめて指定するのが効果的です。

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

以下に、各パスワードマネージャーごとの設定方法を解説します。

data-1p-ignoreというカスタムデータ属性をinput要素に追加することで、1Passwordによる自動入力や保存の提案を無視させることができます。

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

参考情報: 1Password Developer Documentation: Ignore offers to save or fill specific fields

data-lpignore="true"という属性をinput要素に追加することで、LastPassの自動入力機能を無効化できます。

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

参考情報: LastPass Support: How do I prevent fields from being filled automatically?

data-bwignore="true"という属性をinput要素に追加することで、Bitwardenにそのフィールドを無視させることができます。

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

パスワードマネージャーはユーザーにとって非常に便利なツールですが、時として余計な自動入力や保存の提案を行うことがあります。ユーザー体験とセキュリティのバランスを考慮し、今回紹介したカスタムデータ属性を適切な場面で活用することで、より使いやすいWebフォームを提供することができます。

以上、パスワードマネージャーと上手く付き合っていきたい、現場からお送りしました。