feb19.jp

Nobuhiro Takahashi
Designer / Engineer

会員登録フォームにセキュリティ脆弱性を産む UI デザイン美人局

UI デザインのベストプラクティス集に時々「会員登録フォームを記入している時、メールアドレスがすでに登録されているかどうか示したほうが、何度も入力操作を行わないようにできるので良い」と書かれていることがあるのですが、これセキュリティの考え方的には間違っています。甘い物には毒がある・・美人局のようです。


この UI デザインプラクティスの主張

ある人がメールアドレスとパスワードでログインするサービスを再度利用するとします。登録したかどうかを覚えていない場合、大抵会員登録をしようとします。
この時サービス側は、このユーザーのデータがデータベースに残っているので「ログインとして扱うことができるよ」「後はパスワードだけですね」と親切な振る舞いができますよね、という主張です。(おそらくコンバージョンも高まるでしょう)




サインアップでなくログインとしてボタンを変化させる甘美な設計例(右)


利用規約の合意、プロフィールやアカウントの作成など、面倒な会員登録の手順を踏む必要がないことを暗示できます。

このデザイン提案の前提としてあった Bad UI は、下図のような開発都合で作られた UI です。




めんどくさいフォームを入力できたと思ったらなんじゃそりゃ例


データベースへの重複登録を防ぐため、会員情報を入力し送信した後「このメールアドレスは使用されています」としてエラーをはく設計で、ユーザーが感じる「せっかく苦労して入力した会員情報無駄だった」という負の感情の解決として、この UI デザインプラクティスが提案されていました。

これは愛のある UI デザインプラクティスの主張です。しかし、そもそもセキュリティ脆弱性があることは見逃してしまっていました。

 

脆弱性を産む UI の理由

メールアドレスが登録されていることが確認できるということは、①メールアドレス所有者がそのサービスを使っていることが類推できてしまう=個人情報の抜き取りが(やや)成立、②攻撃者はメールアドレスの関門は突破できたのでパスワードの関門を突破するのみになり攻撃が簡単になる、と脆弱性リスクを高めています。

なおメールアドレスが、個人情報に該当するかどうかは以下を参考にしてください。
総務省|行政機関・独立行政法人等における個人情報の保護|<3 個人情報の該当性>

 

正しい対策

入力中や送信後に関わらず「メールアドレスがそのサービスに登録されていることを類推できないようにする」が大事なようです。詳細は下記リンクセキュリティガイドラインの中の「エラー出力ガイド」が参考になります。
セキュリティガイドライン

利用者的には復帰時に「何をログインメールアドレスにしていたか」忘れることもあるので、「ログインできない時」的なページを正しく用意してあげれば良さそうです。

良い文言例

ログインエラー メールアドレスまたはパスワードが間違っています。
ログインできない時 パスワードを送信しました。もしメールが届かない場合は、入力されたメールアドレスが間違っているか登録されていません。

加えて可能なデザイン例

・アカウントの作成と細かな個人情報の入力のフォームは別ページにするなどしてトライエラー時の手戻りが少ないようにする
・連絡帳からメールアドレスをインポートできるようにしてメールアドレスの入力失敗を防ぐ
・SNS ログインを使用してメールアドレスを取得しないようにする
・ログインを試行した時間やクライアント端末情報を登録されているメールアドレスに通知し、攻撃されている可能性がないか通知する

過剰な対策は開発の重荷になるだけなので要精査。

 

事例

近年だと Pinterest と MR_DESIGN の件のようなことがありました。
【佐野研二郎】事務所広報、Pinterestに登録していたことを認める - NAVER まとめ

メールアドレスは他人に明かすものだったりするので、前出の総務省の見解とは異なりますがこのようなリスクは織り込み済みとする考え方もあります。
ちなみに蛇足ですがこの件、逆説的に言うと、まとめでは「使用されている」ことを示しているだけで「メールアドレスを得た誰かが仮登録で成りすまし、事務所側が確認メールを無視または見逃している」可能性は否定できていないので「本当に本人が使っているかどうかはわからない」とも言えなくはありません。
(本件についてはまとめにも記載がありますが、後日事務所側が「登録をしていた」と伝えているので情報としては正しかったようです。)

メールアプリでリンクをクリックする本登録が完了する前に、仮登録の段階でメールアドレスが存在することを教えてしまうアプリも世の中には数多くあったりします。

 

というわけで

サービス提供者的に瞬間的な利便性を高めるための UI デザインが、不用意な炎上=ビジネスリスクにもなってしまい「登録すると何かヤバイサービス」と思われないよう、UI 操作性の向上だけでない視点も長期的な UI のデザインには必要そうです。SE 界隈のノウハウが相互展開できる気がします。自分も足りない理解があると思うので、この周りは適宜知識をアップデートしておきたいです。にゃ〜ん

Navigation

prev: UI デザインのための Sketch Plugin「Font Size Checker」を作りました
next: Mac OS X 用のスクリーンセーバー「Stacking Dots Clock」を制作しました

Recently Entries