F.Ko-Jiの「一秒後は未来」

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

たとえばクレジットカード決済で、カードのセキュリティコードを入力する欄が <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 の決済フォームを調べてみたらセキュリティコード入力欄は伏せ字になっていなかった。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など