ブラウザのパスワード自動補完を無効にしたい
例えばログインフォームなどで、ユーザー名やパスワードを行ってデータを送信する際に、ブラウザがパスワードを保存するか聞いてくることがあります。ここで保存する設定を行うことで、次回以降の訪問時には、ユーザー名とパスワードが自動入力(オートコンプリート)されるようになります。あるいはユーザー名を入力するとパスワードが自動入力されます。
もろもろの事情がありこの機能を無効する必要が出てきたので、いろいろと調べてみました。
方法としては3つあるようで、それぞれ「ブラウザの設定を変更する」「HTMLのautocomplete属性で設定」「ダミーのパスワード欄を用意する(無理やり)」です。
ブラウザの設定を変更
そもそもオートコンプリート機能はHTMLの内容に基づき、ブラウザが実行しています。パスワードやクレジットカードなどの情報はブラウザに保存されています。したがってブラウザの設定変更を行えば、この機能は無効にできます。ただしユーザー環境個別に設定が必要になります。
Chromeだと、メニュー -> 設定 -> 詳細設定を表示… -> パスワードとフォームから設定が可能です。IEだと、設定 -> インターネットオプション -> コンテンツ -> オートコンプリート[設定]から設定が可能です。ただし不特定多数の人間が利用するWebサイトなどでは現実的な方法ではありません。あとはJavascriptでごにょごにょすることも可能ですが、これは手間なので方法として除外しています。
HTMLのautocomplete属性で設定
HTMLのinput要素には、autocomplete属性が用意されているのでここで設定が可能です。
autocomplete="off"autocomplete=”off”という設定がありこれを適用すると自動補完を無効にしてくれそうですが、うまくいかないようです。そもそも自動補完機能はセキュリティ的によくないかと思えばそうでもなく、
マスターパスワードが用いられない場合でも、ブラウザのパスワード管理機能は純粋にセキュリティの向上につながります。パスワードをブラウザが保存すればユーザは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザが設定できるようになります。
だそうです。したがってモダンブラウザではこれをoffにはできないようです。
属性値に任意の文字列を代入する
「属性値に任意の文字列を代入する」という謎トリックがあるみたいです。autocomplete属性に無効な値を設定することでautocomplete機能を無効になるということらしいです。ただし検証したところうまくいきませんでした。
autocomplete="nope"詳しくは以下のページでどうぞ。
ダミーのパスワード欄を用意する
ということで最終手段です。ダミーのパスワード欄を用意し、display: none;で非表示にしておきます。ただし非表示欄はいないものとして無視されるので2つ用意します。
<form name="sample1">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="password" name="dummy1" value="" style="display:none;" disabled>
<input type="password" name="dummy2" value="" style="display:none;" disabled>
<input type="submit" value="ログイン" />
</form>
これでようやく無効になりました。IE11, Chromeで動作を確認しました。
