[HTML] Chromeブラウザの自動入力補完機能を除外する方法

今どきのWEBサービスは、殆どがアカウント登録を行って、ID（またはメールアドレス）とパスワードを登録するパターンが一般的ですが、Chromeブラウザを使っていると、ログイン画面でページを開いた時に、IDとパスワードが自動的に入力された状態になっていてくれて、ありがたいことがあります。 MACなどはキーチェーンアプリで、ドメインと入力項目の個人情報を保持する機能があるけれど、Chromeブラウザも独自でキャッシュデータとして保持しています。 ログイン時には、こうした保管機能は非常に便利に使えますが、仕事でとあるWEBサイトのアカウント登録ページを構築していた時に、この機能が不具合になる事象が発生したので、その対応方法まで検証できたので、やり方をメモしておきます。

不具合に成りえるChromeブラウザの機能

ログイン画面でのIDとパスワードが自動で入力されているのは、PCを別の人に使わない環境であれば、非常に便利ですが・・・ ※上記のようなログイン画面で入力箇所に自動登録されるのは便利です。 新規アカウント登録の項目にも自動で入力がされてしまいます。 新規に登録する内容での自動入力補完は、誤登録などの可能性もあり、不具合のもとになります。 ユーザーとしては気をつければいいのですが、サービス提供側やシステム構築者の側で考えると、いらない機能でもあります。

自動入力補完が行われる原因

Chromeブラウザしか検証していませんが、ページ内に input type="password" という入力項目がある場合に、Googleの自動入力保管機能が動作することが分かりました。 もう少し調べてみると、password項目の直前にある入力フォームは、アカウントIDが自動補完されるようです。 この時点で、ログイン画面におけるIDとパスワードを自動補完させる機能であることがわかります。 そもそも、この機能、ログイン時の入力項目として考えると、新規アカウント登録や、入力項目の多い入力ページなどでは発動してほしくないのに、passwordという項目があるだけで、発動してしまうから厄介扱いされているらしい。

HTMLのautocomplete機能を使ってみる

HTML5には、こうしたブラウザのオートコンプリートを除外するために、autocomplete="off"という属性セットができますが、Chromeブラウザにおいては、現時点でこの属性は全く意味を成しません。 以前に入力したことのある一覧リストが、プルダウンメニューで表示するのを非表示にする程度の機能で、勝手に入力される場合の対応にはなっていないようです。

対応方法の検討

対策案1. password項目を使わない

まず思いつく対応方法としては、passwordという入力項目typeを画面内に表示しないという方法が考えられますが、セキュリティのお作法として、パスワードが丸見えになるtype="text"状態でパスワードを丸さらしにしておくのもいかがなものかと思うので、やりたいけど出来ないケースのほうが多いでしょうね。 でも、テキストパスワード項目でも許されるのであれば、この時点で解決できるでしょう。

対策案2.

次に思いついた対策としては、入力項目でパスワードだけを別ページやモーダルウィンドウなどとして分離する。 password項目１つだけでは、この自動補完機能は発動しないようなので、パスワードのみを単一で登録する方式にすれば、自動補完はされないようにできます・・・ ・・・が、ただでさえ、入力項目数が多いページなどでこうした方法を取ってしまうと、遷移ページ数が増えて、登録するのが面倒くさいというUX的に不利になってしまう可能性も高いですね。 スマホなどでの入力フォームで限定されているのであれば、ID、パスワード、その他の項目を都度、遷移しながら入力する方法は悪くないかもしれませんね。

対策案3.ダミーのID,Pass項目を作る

最も有力な方法として、ダミー項目を作って、見えないようにしてあげればいいのです。 <!--元のHTML--> <input type="text" name="id"> <input type="password" name="pass"> <!--ダミー追加したのHTML--> <input type="text" name="dammy_id" style="position:absolute;top:-200px;"> <input type="password" name="dammy_pass" style="position:absolute;top:-100px;"> <input type="text" name="id"> <input type="password" name="pass"> 上記のようにダミー項目を追加して、座標でブラウザ画面外に追いやってしまえば、ダミー項目には自動補完されている状態ですが、ユーザーにそれらが見えなくて、POSTする側のサーバー処理でダミーデータは排除するだけで、簡単に対応が完了できます。 この場合のデメリットは、ダミーとはいえ、無駄な項目やPOSTデータを増やしてはいけないシステム開発などでは使えない技です。 お気をつけて・・・

対策案4.Gmailのアカウント登録に答えあり

色々工夫していたのですが、Gmailのアカウント登録などはどうやっているのか調べてみたところ、そこに答えが書かれていました。 Gmailのアカウント登録画面では、password項目があるのに、自動補完されていなかったので、ソースコードを調査してみたところ、autocomplete="new-password"とすることで、自動補完が機能しなくなるようでした。 <input type="text" name="id"> <input type="password" name="pass" autocomplete="new-password"> なんとあっけないやり方ですが、この方法もどうやらGoogleChromeブラウザ専用機能であるという記述も見かけたので、今後ブラウザの仕様変更によって、対応できなくなる可能性もありますので、自己責任にて使ってみてください。