鷹の島

2006-07-07 (Fri)

結構簡単にニーモニックガード導入出来そう

ニーモニックガードってなんぞやって人は 漫画の説明があるんで 見てみて下さい。

パスワードの入力フォームに入力する代わりに画像で代替するのってそんなに難しくなさそうじゃんって思ったので、作ってみた次第。

画像をいくつか選択してから send を押すとパスワードチェック用の CGI にジャンプします。一回選択した画像はもう一回選択しようとしても反応しません。clear を押すと選択状態を解除します。画像の配置は毎回ランダムです。

コアラ、トラ、カメの順に選択してから send を押すと正しいパスワードとなります。

見て分かる通り、「画像」と「アルファベットの一文字」が一対になっていまして、CGI 側ではアルファベットの内容のチェックを行なっているので、機械側では画像の存在はあんまり重要ではありません。いわゆる「ソフトウェアキーボード」の各キーのボタンを画像にしただけと考えるとわかりやすいと思います。

なので、既存のフォームの「パスワードを設定する画面」と「ログイン用の画面」の両方にこの js を読み込むようにするだけで簡単に導入する事が出来ます。

サンプルはわかりやすくするためにパスワードのフォームを表示していますが、実際使う場合はここを hidden にして、画像ももっと増やす必要があるでしょう。ていうか、ここが難しい所で画像をいくら増やした所で手入力のパスワードの強度と比べると大分弱いんですけどね…。

あんまり重要で無い場所へお遊びで導入しておくとインパクトがあっておもしろいかもしれません。

蛇足ですが、画像と対応するアルファベットの配列は外部から読み込んだデータをそのまま使えるので、ちょっと頑張るとチャレンジ&レスポンス方式も実現可能です。この場合サーバ側でセッション情報を持ったりとややこしいのでサンプルは作りませんでしたが。

2006-07-09 追記: IE でちゃんと動いていなかったので直した。

Posted by Kyosuke Takayama at 2006-07-07 (Fri) 22:17