We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

フォームのオートコンプリートを無効にするには

フォームのオートコンプリートをウェブサイト側から無効にする方法を説明します。

既定では、ウェブサイト上の <input> 欄を通じてユーザーが送信した情報はブラウザーによって記憶されます。これよってブラウザーは、オートコンプリート (入力を受けたフィールドの補完候補をユーザーに提示する機能) や、オートフィル (読み込まれたフィールドをあらかじめブラウザが補完する機能) を実現しています。

これらの機能はユーザーのプライバシーに関わるかもしれないため、ブラウザーはユーザー自身がこの機能を無効にできるようにしています。しかしながら、フォームで送信される情報の中には再利用しないもの (ワンタイムコードなど) や、機微な情報 (公的な識別番号やクレジットカード番号など) があります。ブラウザーのオートコンプリート機能が有効であっても、ウェブサイトによってはフィールドの値をブラウザーに記憶させないほうが適切かもしれません。

フォームにおけるオートコンプリートを無効にするには、autocomplete 属性に "off" を指定することで実現できます。

autocomplete="off"

上記の設定はフォーム全体に適用することも、特定の input 要素に指定することも可能です。

<form method="post" action="/form" autocomplete="off">
[…]
</form>
<form method="post" action="/form">
  […]
  <div>
    <label for="cc">クレジットカード番号:</label>
    <input type="text" id="cc" name="cc" autocomplete="off">
  </div>
</form>

autocomplete="off" を指定すると、以下の 2 つの効果が生じます。

  • 同じようなフォームにおいて、今後ブラウザーがオートコンプリートを行うためにデータを保存しないようにします。しかし、実際の動作はブラウザーによって異なります。
  • ブラウザーがフォームデータをセッション履歴にキャッシュしないようにします。フォームデータがセッション履歴にキャッシュされた場合、フォームの送信後に「戻る」ボタンで元のページに戻った際にユーザーの入力データが表示されます。

autocomplete 属性に off が設定されている場合でも、ブラウザーはオートコンプリートを行うことがあります。この予想外の挙動に開発者は戸惑うかもしれません。オートコンプリートを完全に無効にするには、その属性値に任意の文字列を代入するというトリックを用います。

autocomplete="nope"

任意に指定した文字列は属性値として定義された値に含まれていませんが、ブラウザーのオートコンプリート機能は無効になります。

autocomplete 属性とログインフィールド

現代的なブラウザーでは、パスワードを一括管理する機能が実装されています。ユーザーがウェブサイトでユーザー名とパスワードを入力した際、ブラウザーはその値を記憶するかユーザーに尋ねます。ユーザーがそのウェブサイトを再び訪れた際には、ログインフィールドがブラウザーに保存された値でオートフィルされます。

加えて、ユーザーがマスターパスワードを設定すると、ログイン情報をマスターパスワードで暗号化した状態でブラウザーに保存することができます。

マスターパスワードが用いられない場合でも、ブラウザーのパスワード管理機能は純粋にセキュリティの向上につながります。パスワードをブラウザーが保存すればユーザーは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザーが設定できるようになります。

このような理由から、現代的なブラウザーの多くはログインフィールドにおける autocomplete="off" をサポートしていません。

  • ウェブサイトが <form>autocomplete="off" を設定しており、かつその <form> 内にユーザー名とパスワードの <input> フィールドが含まれていた場合でも、ブラウザーはログイン情報を記憶するか尋ねることになります。そしてユーザーが同意すれば、次回の訪問時にログインフィールドをオートフィルします。
  • ウェブサイトがユーザー名とパスワードの <input> フィールドに autocomplete="off" を設定していた場合でも、ブラウザーはログイン情報を記憶するか尋ねることになります。そしてユーザーが同意すれば、次回の訪問時にログインフィールドをオートフィルします。

この挙動は Firefox 38 以降、Google Chrome 34 以降、Internet Explorer 11 以降で共通です。

他人のパスワードを指定するようなユーザー管理画面において、パスワードフィールドのオートフィルを抑止したい場合、autocomplete="new-password" を指定するべきです。ただし、この機能はどのブラウザーでもまだ実装されていません。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, hashedhyphen
最終更新者: mfuji09,