クレジットカード情報の入力フォームを作る際、
クレジットカード番号と有効期限、セキュリティコード(CVV/CVC)の入力欄が必要になります。
これらの情報はどうマスクすればいいのでしょうか。
ちなみにCVVやCVCといくつかの表記パターンを見かけると思いますが
VisaではCVV:Card Verification Value と呼び、MastercardではCVC:Card Validation Code と呼びます。
なおアメックスではCID:Card Identification Numberと呼びます。
クレジット会社によりバラバラなので"セキュリティコード"と書くのが無難です。
セキュリティコードのマスクは必要か
さて、結論から書くとセキュリティコードのマスクは必要ではありません。
嘘でしょ、と思う方もいるかと思いますがそもそも入力不要のECサイトもあるように実は必須のものではなくあくまでリスクを減らすもの程度です。
そのためか、PCI DSSというクレジットカード会社5社が共同で策定した基準でも特にマスクするようには要求していません。
なお現在セキュリティ目的として使われる中心のものは3Dセキュアという仕組みで、
クレジットの登録をした会社のページにリダイレクトされて別途設定したコードを入力するものです。
とはいえ...
3Dセキュアの対応する工数は割けなかったり
何か不安だったりクライアントからの指示だったりでマスクしなければならないことは多々あるでしょう。
その場合は
input type="password"
を設定することで実現できます。
ただ、前述の通り"ルール"ではありません。
そのためこの設定を行うと、ブラウザによっては「typeパスワード?わかった!」といわんばかりにパスワードのオートコンプリートに干渉したりと、UXは悪くなります。
なお、よくわからないブラウザの話などではなくChromeでもそうなります。
HTML的には間違っていませんがブラウザの認識としては正しくもないといったところでしょうか。
参考:
パスワード用途以外にinput要素のtype="password"を使うのはどうやら間違っている
パスワード用途以外にinput要素のtype="password"を使うのは間違っていない
まとめ
セキュリティコードのマスクは不要。
マスクしたければinput type="password"にすると実装できるけれど、ブラウザによってはむしろUXが悪くなる場合がある。