この記事では、フォーム入力欄の自動補完をウェブサイト側から無効にする方法を説明します。

既定では、ウェブサイト上の <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 属性とログイン欄

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

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

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

このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。

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

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

他人のパスワードを指定するようなユーザー管理ページを定義していて、パスワード欄のオートフィルを抑止したい場合は、 autocomplete="new-password" を使用することができます。ただし、この機能はまだ Firefox に実装されていません。

jQuery disableAutoFill プラグインの利用

このプラグインは既定で input name 属性をランダム化します。フォームを送信する際に、元のフィールド名に戻します。これによって、 Google Chrome のみでなくすべてのブラウザー (第三者の自動補完拡張機能を含む) で自動補完を防ぐことができます。

URL: https://terrylinooo.github.io/jquery.disableAutoFill/

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

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