JavaScriptで簡易パスワード認証サイトを作る

以前から『ハッシュ関数を用いパスワードを平文で保存しない』ということをいまさらながら説明した訳ですが、今回は簡単な例を挙げ直に触ってもらおうと思います。言語はJavaScriptを使用し、htmlファイルを開くと入力ダイアログが表示され、パスワードを入力するとページの内容が表示されるという簡単なものです。

【test.html 】

パスワードを平文で保存します。ソースコードを表示するとパスワードが分かります。
【hashtest.html 】

パスワードをハッシュ値として保存します。ソースコードを表示しても分かるのはハッシュアルゴリズムとハッシュ値のみです。

JavaScriptには単方向ハッシュ関数が用意されていません。そこでJohnston氏のサイトからJavaScriptで書かれたMD5のスクリプトファイルをお借りしてきます。他にもSHA-1,SHA-256,SHA-512などが公開されているようです。
http://pajhome.org.uk/crypt/md5/
※テスト時はhashtest.htmlとmd5.jsを同じディレクトリに保存してください。

---

test.html
while(true) {

	password = "password";

	password_1 = prompt("passwordの入力");

		

	if(password_1 == null) {

		alert("キャンセルが選択されました");

		location.href="http://d.hatena.ne.jp/dooluka/";

		break;

	}

		

	if(password == password_1) {

		alert("パスワードが正しいです");

		break;

	}

	alert("Passwordが違います");

}

test.htmlは【password】にそのまま平文のパスワードを代入しているので、ソースコードの表示が行われるとパスワードが第三者に渡ることになります。入力ダイアログでの入力が【password_1】に代入され、【password】と【password_1】の比較によってパスワードの正誤を行います。入力ダイアログでキャンセルボタンが押されると『null』が返されます。この処理を書いてあげないとパスワードが合わない限りwhile処理が永遠と繰り返されます。

hashtest.html	
while(true) {

	password = "5f4dcc3b5aa765d61d8327deb882cf99";

	password_1 = prompt("passwordの入力");

		

	if(password_1 == null) {

		alert("キャンセルが選択されました");

		location.href="http://d.hatena.ne.jp/dooluka/";

		break;

	}

		

	password_2 = hex_md5(password_1);

		

	if(password == password_2) {

		alert("パスワードが正しいです");

		break;

	}

	alert("passwordが違います");

}

hashtest.htmlは【password】に生成されたハッシュ値が代入されているので、ソースコードの表示が行われてもハッシュ値とハッシュアルゴリズムが分かる程度です。ですが使用したアルゴリズムによっては致命的な欠点に成り得ます。パスワード認証用のハッシュ値が攻撃者に渡ってしまうと、辞書攻撃などにより簡単に解析されてしまう可能性もあります。入力ダイアログでキャンセルボタンが押された場合の処理ですが、【password_2 = hex_md5(password_1);】より後ろに書くと『null』が返らないようなので、【password_1 = prompt("passwordの入力");】のすぐ下に書いてみました(謎ですが、とりあえず動いてるので良しとしよう)。

MD5

hash1 = hex_md5('password');
SHA-1

hash2 = hex_sha1('password');

人によってはJavaScriptを無効にしているユーザもいるので、今回のようなパスワード認証サイトを作ってもまったくの意味をなさないものになります。パスワード認証においては、クライアント側でプログラムを動作させるのではなく、サーバ側で認証プログラム実行させます。言語としてはPerl, PHP, Pythonなどが扱い易いです。

次の記事では辞書攻撃のスクリプトを紹介しようと思います。
ハッシュアルゴリズムとハッシュ値が分かっているので、辞書リストから順番に一致するのを探す感じですね。