水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > パスワードをマスクしない実装

パスワードをマスクしない実装

2012年6月26日(火曜日)

パスワードをマスクしない実装

公開: 2012年7月9日3時5分頃

こんなお話が……「COOKPADの「伏せ字にせず入力」ボタンは素晴らしい (blog.tokumaru.org)」。

通常、パスワード入力欄では、入力中のパスワードがマスクされて読めないようになっています。しかし、マスクしない方が良いのではないかという説もあります。ずっと前に「パスワードを隠すのをやめよう?」という話でも触れましたが、ヤコブ・ニールセンが「パスワードを隠すのをやめよう (www.usability.gr.jp)」という主張をしています。

パスワード入力が難しくなると、ユーザーはより入力しやすいパスワードを利用しようとするでしょう。実際、ケータイでは複雑なパスワードを入れるのが大変面倒なため、ユーザーは数字のみの短いパスワードを好む傾向があります。パスワード入力がやりにくいと、ユーザーは弱いパスワードを使うようになり、逆に安全性が損なわれる可能性があるわけです。入力中のパスワードがマスクされるという実装も、パスワード入力のミスを増やし、入力しにくくしますから、弱いパスワードにつながる可能性があります。

ということで、入力欄のパスワードをマスクしないほうが良いのではないか、という議論になるわけです。

それをCOOKPADのスマートフォン用サイトが実装した、というのが今回のお話になります。

話としては興味深いと思うのですが、気になるのはその実装の方法。もし、この実装がパスワード入力欄 (<input type="password">) を通常のテキスト入力欄 (<input type="text">) に変更するような実装だとすると、問題がある可能性があります。パスワード入力欄に入力されたデータと、通常のテキスト入力欄で入力されたデータとでは扱いが異なるからです。

たとえば、多くのブラウザは、テキスト入力欄で入力されたデータを補完する機能を持っています。同名の入力欄があれば、他のサイトでも入力を補完してくれるのが一般的です。以下の入力欄には "q" という名前がついていますが、これは検索エンジンで一般的に使われている名前です。フォーカスして下カーソルキーを押すと、過去に検索エンジンで検索した内容が補完されるかもしれません (ブラウザの種類や設定によっては操作が違ったり、そもそも補完されないかもしれませんが)。

このような補完機能は便利ですが、パスワードでこういうことが起きると、ちょっとまずいかもしれません。

また、アクセシビリティやユーザビリティの観点でも問題があります。既にkotarokさんが以下のようにコメントされていますね。

パスワードフィールドというのは見た目や振る舞いだけで区別されているわけではなく、HTML上で type="password" という風に通常のインプットフィールドとは違う type 属性値を与えられて区別されている。UA はこの属性値の違いによって振る舞いを変えることが出来る。伏字マスクもこの一種だ。しかし非伏字にするために通常の type="input" にしてしまうと本来ユーザーが享受できるはずだった UA による補助を受けられなくなってしまう可能性がある。

以上、Kotaro Kokubo - Google+ - 日記書いた(パスワードの話) より

この具体的な例として、パスワードを記憶する機能が挙げられます。多くのブラウザは、パスワード入力欄が使われると「パスワードを記憶しますか?」とユーザーに質問し、ユーザーが望めばパスワードを記憶して、次からは入力しなくて済むようにしてくれます。これは、ユーザビリティの面で大きな意味があります。障碍があってパスワードの入力が困難な人にとっては、アクセシビリティ上の恩恵にもなり得るでしょう。

パスワードをマスクしない方が良いのではないか……という話自体は賛成なのですが、深く考えずに <input type="text"> で実装するようなことをしてしまうと、いろいろと問題があります。その実装はサイト側ではなく、ブラウザ側で行われるべきでしょう。サイト側は今まで通り <input type="password"> で提供し、マスクするかしないかはブラウザ側で設定できるようになっていることが望ましいと思います。

COOKPADの例はスマートフォン版限定のようですし、初期状態は通常のパスワード入力欄で、ユーザーが明示的に選択してはじめて表示されるようになります。これは、問題点も踏まえて慎重に検討した上でこうなったのではないかと思います。うわべだけ見て安易に真似すると危険な可能性があるので注意したいところです。

※ところで、「パスワード入力がやりにくいと、逆に安全性が損なわれる」という話で個人的に連想するのは、ネットバンクのログインフォームでよく見られる「ソフトウェアキーボード」です。機会があれば詳しい方と情報交換してみたいところです。

関連する話題: Web / セキュリティ / ユーザビリティ / アクセシビリティ

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト