ネットサービスとかGoogleとか豆知識とか。

Index > 豆知識 > パスワード用途以外にinput要素のtype="password"を使うのはどうやら間違っている
豆知識
2015年04月28日 01:19

パスワード用途以外にinput要素のtype="password"を使うのはどうやら間違っている

  • このエントリーをはてなブックマークに追加
  • ... PV
スポンサード リンク

たとえばクレジットカード決済で、カードのセキュリティコードを入力する欄が <input type="password" > 要素で用意されているといった場合です。

Chrome を使って調べていたのですが、ログイン ID とパスワードの組み合わせを Chrome に保存していた場合、同じサイトの別ページに type="text" の入力欄と type="password" の入力欄があったら、問答無用でそのサイトの保存済みのログイン情報がオートコンプリートされてしまいます。

chrome-autocomplete-01.jpg

↑ こんな感じでオートコンプリートされる。

セキュリティコードのところは maxlength="4" を指定しているがそれも無視。

ブラウザのオートコンプリートは感覚的に name 属性やら id 属性が同じだったらオートコンプリートされるのかなぁというイメージだったので問題ないだろうと思っていたのですが、違いました。

Chrome はバージョン 34 から autocomplete="off" をつけても無視するようになっています。また x-autocompletetype という属性もサポートしているようですが、ログインフォームとクレジットカード入力フォームに異なる x-autocompletetype の値をセットしても特に挙動は変わらず、やはり type="password" があるというだけでログイン情報をオートコンプリートしました。

色々と試してみましたが、このオートコンプリートを防止するには type="password" の input 要素を 2 個以上置く(1個は hidden にする)か、type="password" を使わないようにするくらいしか方法はなさそう。

ただ、クレジットカードのセキュリティコードはそもそもパスワードではないので、セキュリティコードの入力欄に type="password" を使うというのが意味的にも間違っていると Chrome は言いたいのだなと解釈しました。

google-card-form.jpg

Google Developers Console の決済フォームを調べてみたらセキュリティコード入力欄は伏せ字になっていなかった。