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

2015/4/28 01:19

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

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

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

セキュリティコードのところは 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 は言いたいのだなと解釈しました。