Ajaxでパスワード認証の続き-公開スクリプト

2011/05/28 2015/11/05

この記事は過去のセキュリティ的に低い観点で書かれたものです。
こちらが万全というわけではないですが、Ajaxのパスワード認証についてよりセキュアな視点で書いた記事をアップロードしました(2015/11/05)ので、こちらを参考にされますようお願いします。
⇒セキュアなAjaxパスワード認証とアプリケーションの構築方法

前回のAjax認証サンプルはコード分量が多いので、この記事で公開することにしました。制作環境は以下の通りでJavaScriptとPHP、MySQLになります。 利用環境 クライアントサイド： JavaScript jQuery jQuery UI サーバーサイド： PHP5 PEAR MySQL

ajax_auth/
　　　　｜
　―――――――――――――
　｜　　　　　　｜　　　　｜
index.php　　　php　　　js

phpフォルダは以下の通り
php
　｜
　―――――――――――――――――――――――――――――――――――――――
｜　　　　　｜　　｜　　｜　　　　　｜　　　　　　　｜　　　　　　｜　　　　　｜
auth-init　auth　regi　logout　member-auth　member-main　member-regi　pager

jsフォルダは以下の通り
js
　｜
　―――――――
｜　　　　　｜
member　sha1

メイン画面

index.php（PHP部分）

 
<?php

header('Content-Type: text/html; charset=utf-8');

/* ログイン認証済みかどうか */
$unauthorized = false;

/* 現在時刻をチャレンジIDとして取得 */
$salt = time();

/* ログイン期間を5分間に設定 */
$expire = $salt + (60 * 5);

/* クッキーにチャレンジIDを期限付きで保存 */
setcookie("expire", $salt, $expire, "/");

/* 認証済みかどうかで特定の要素を入れ替える */
session_name("member");
session_start();
if (isset($_SESSION["user"]))
{
	/* 認証済みならセッションを再開 */
	$user = $_SESSION["user"];
	session_regenerate_id();
	
	require_once "php/member-main.php";
}
else
{
	$unauthorized = true;
	require_once "php/member-auth.php";
}
?>

index.php（続くHTML部分）

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>メンバー専用ページ - ウィザード・コード | WIZARD-CODE</title>
<link rel="shortcut icon" href="http://wiz-code.digick.jp/image/icon/favicon.ico" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" media="screen" />
</head>
<body>
<!-- 認証がまだなら認証画面を、済んでいればユーザー画面のHTMLをコンテナ要素に挿入する -->
<div id="container"><?= $unauthorized === true ? $auth_html : $main_html ?></div>
<!-- ダイアログ用の要素 -->
<div id="dialog"> </div>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// <![CDATA[
google.load('jquery', '1.5');
google.load('jqueryui', '1.8');
google.setOnLoadCallback(function () {
	/* 認証済みかどうかで初期化する関数を変更 */
	<?= $unauthorized === true ? "authorize();" : "logout();\r\n" ?>
});
// ]]>
</script>
<script type="text/javascript" src="js/member.js" charset="utf-8"></script>
<script type="text/javascript" src="js/sha1.js"></script>
</body>
</html>

PHPファイル データベース接続設定

auth-init.php

 
<?php

require_once "DB.php";

$dsn = array(
	'phptype'  => 'mysql',
	'dbsyntax' => false,
	'username' => 'wizard-code',
	'password' => '12345678',
	'protocol' => false,
	'hostspec' => 'localhost',
	'port'     => false,
	'socket'   => false,
	'database' => 'my_database'
);

$db = DB::connect(
	"${dsn['phptype']}://${dsn['username']}:${dsn['password']}@${dsn['protocol']}${dsn['hostspec']}/${dsn['database']}"
);
if (DB::isError($db))
{
	die($db->getMessage());
}
$db->query("SET NAMES SJIS");

?>

パスワード認証処理

auth.php

 
<?php

/* HTML出力フォーマット */
header('Content-Type: text/html; charset=utf-8');

/* データベース接続 */
require_once "auth-init.php";

$user = $_GET["username"];
$pass = $_GET["password"];
$salt = $_GET["salt"];
$user = htmlSpecialChars($user);

/* メインページのHTML断片 */
require_once "member-main.php";

/* データベースのエンコードに変換 */
mb_convert_variables("SJIS", "UTF-8", $user);
mb_convert_variables("SJIS", "UTF-8", $pass);
mb_convert_variables("SJIS", "UTF-8", $salt);

/* 結果を入れる変数 */
$result = "failed";

/* ログイン画面(index.php)からのみアクセス可に */
if ($referer = $_SERVER["HTTP_REFERER"])
{
	if ($referer != "http://localhost/ajax_auth/" && $referer != "http://localhost/ajax_auth/index.php")
	{
		die("不正なアクセスです。");
	}
}
else
{
	die("リファラーが取得できませんでした。");
}

/* クッキーが期限切れかどうかチェック */
if (!isset($_COOKIE["expire"]))
{
	die("expired");
}

/* パスワード照合 */
$data = $db->query("SELECT username, password FROM user_auth");
if (!empty($user))
{
	while ($row = $data->fetchRow())
	{
		$sha1 = sha1($salt . $row[1]);
		if ($row[0] === $user && $sha1 === $pass)
		{
			$result = "successful";
			break;
		}
	}
}
else
{
	die($result);
}

/* 認証が成功したらユーザー画面のHTMLを返す */
if ($result === "successful")
{
	session_name("member");
	session_start();
	session_regenerate_id();
	
	$_SESSION = array();
	$_SESSION["user"] = mb_convert_encoding($user, "UTF-8", "SJIS");
	
	setCookie("expire", "", time() - (60 * 60 * 24), "/");
	
	echo $main_html;
}
else
{
	die($result);
}

?>

ユーザー登録処理

regi.php

 
<?php

header('Content-Type: text/html; charset=utf-8');

require_once "auth-init.php";

$user = $_GET["username"];
$pass = $_GET["password"];
$user = htmlSpecialChars($user);
require_once "member-main.php";

$result = "failed";

/* ログイン画面(regi.php)からのみアクセス可に */
if ($referer = $_SERVER["HTTP_REFERER"])
{
	if ($referer != "http://localhost/ajax_auth/" && $referer != "http://localhost/ajax_auth/index.php")
	{
		die("不正なアクセスです。");
	}
}
else
{
	die("リファラーが取得できませんでした。");
}

mb_convert_variables("SJIS", "UTF-8", $user);
mb_convert_variables("SJIS", "UTF-8", $pass);

/* ユーザー名の重複確認 */
$duplicated = false;
$data = $db->query("SELECT username FROM user_auth");
if (!empty($user))
{
	while ($row = $data->fetchRow())
	{
		if ($row[0] === $user)
		{
			$duplicated = true;
			break;
		}
	}
}
else
{
	die($result);
}

/* 認証が成功したらユーザー画面のHTMLを返す */
if (!$duplicated)
{
	$sql = "INSERT INTO user_auth (username, password) VALUES (?, ?)";
	$sth = $db->prepare($sql);
	if (PEAR::isError($sth))
	{
		die($sth->getMessage());
		
	}
	$res = $db->execute($sth, array(${user}, ${pass}));
	if (PEAR::isError($res))
	{
		die($res->getMessage());
		
	}
	
	session_name("member");
	session_start();
	session_regenerate_id();
	
	$_SESSION = array();
	$_SESSION["user"] = mb_convert_encoding($user, "UTF-8");
	
	setCookie("expire", "", time() - (60 * 60 * 24), "/");
	
	echo $main_html;
}
else
{
	$result = "duplicated";
	die($result);
}

?>

ログアウト処理

logout.php

 
<?php

header('Content-Type: text/html; charset=utf-8');

$param = $_GET["param"];

/* 現在時刻をチャレンジIDとして取得 */
$salt = time();

/* ログイン期間を5分間に設定 */
$expire = $salt + (60 * 5);

/* クッキーにチャレンジIDを期限付きで保存 */
setcookie("expire", $salt, $expire, "/");

/* 認証ページのHTMLを読み込む */
require_once "member-auth.php";

/* ログアウト送信が行われたときの処理 */
if (isSet($param) && $param == "logout")
{
	session_name("member");
	session_start();
	if (isSet($_COOKIE[session_name()]))
	{
		setcookie(session_name(), "", time() - (60 * 60 * 24), "/");
	}
	session_destroy();
	
	echo $auth_html;
}

?>

メイン画面（入口ページ）HTML

member-auth.php

 
<?php
$auth_html = <<<AUTH
Ajaxで認証

	

 



	
	ID:
	PASSWORD：

	

AUTH;
?>

メンバー専用画面HTML

member-main.php

 
<?php
$main_html = <<<MAIN
ホームページ
こんにちは${user}さん
メニュー
コンテンツ

	
	

MAIN;
?>

メンバー登録画面

member-regi.php

 
<?php
$regi_html = <<<REGI
メンバー登録

ＩＤ入力：



パスワード入力：



パスワード確認：





REGI;
?>

ページ管理

pager.php

 
<?php

header('Content-Type: text/html; charset=utf-8');

$page = $_GET["page"];
$page = htmlSpecialChars($page);
mb_convert_variables("SJIS", "UTF-8", $page);

$result = "failed";

switch($page) {
	case "register":
		require_once "member-regi.php";
		$result = $regi_html;
		echo $result;
		break;
}

function isAuth($name) {
	$authorized = false;
	
	session_name($name);
	session_start();
	if (isset($_SESSION["user"]))
	{
		$authorized = true;
	}
	
	return $authorized;
}

?>

JavaScriptファイル Ajax処理

member.js

 
if (typeof jQuery !== 'undefined') {
	/* ダイアログ（jQuery UI）初期化 */
	var dialog = jQuery('#dialog');
	dialog.dialog({
		autoOpen: false,
		modal: true,
		title: 'メッセージ確認',
		position: 'center',
		minWidth: 400,
		width: 200
	});
	/* 認証開始メソッド初期化 */
	function authorize() {
		var form = jQuery('#ajax_auth'),
			user = form.find('input[type=text]'),
			salt = form.find('input[type=hidden]'),
			pass = form.find('input[type=password]'),
			regi = jQuery('#ajax_regi'),
			url = 'http://localhost/ajax_auth/php/auth.php';
		/* 認証フォーム */
		form.submit(function (event) {
			var query;
			event.preventDefault();
			if (user.val() === '' || pass.val() === '') {
				dialog.dialog('open').html('ユーザー名かパスワードが入力されていません。');
				pass.val('');
				return;
			}
			
			pass.val(CybozuLabs.SHA1.calc(salt.val() + pass.val()));
			
			query = url + '?' + jQuery(this).serialize();
			pass.val('');
			jQuery.get(
				query,
				null,
				function (data) {
					if (/^failed$/.test(data)) {
						dialog.dialog('open').html('IDかパスワードが間違っています。');
					} else if (/^expired$/.test(data)) {
						dialog.dialog('open').html('ログイン有効期限が過ぎました。リロードしてやり直してください。');
					} else if (/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi.test(data)) {
						dialog.dialog('open').html('ログインに成功しました。');
						/* イベントハンドラを削除して要素を入れ替える */
						form.unbind('submit');
						jQuery('#container').html(data);
						logout();
					}
				},
				'html'
			);
		});
		/* 登録ボタン */
		regi.submit(function (event) {
			var url = 'http://localhost/ajax_auth/php/pager.php';
			event.preventDefault();
			
			jQuery.get(
				url,
				{
					page: 'register'
				},
				function (data) {
					if (/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi.test(data)) {
						regi.unbind('submit');
						jQuery('#container').html(data);
						register();
					}
				},
				'html'
			);
		});
	}
	/* ログアウト開始メソッド初期化 */
	function logout() {
		var form = jQuery('#member'),
			url = 'http://localhost/ajax_auth/php/logout.php';
		
		form.submit(function (event) {
			var query = url + '?' + jQuery(this).serialize();
			event.preventDefault();
			
			jQuery.get(
				query,
				null,
				function (data) {
					dialog.dialog('open').html('ログアウトしました。');
					form.unbind('submit');
					jQuery('#container').html(data);
					authorize();
				},
				'html'
			);
		});
	}
	/* 登録開始メソッド初期化 */
	function register() {
		var form = jQuery('#register'),
			user = form.find('input[type=text]'),
			pass = form.find('input#password'),
			conf = form.find('input#confirm'),
			url = 'http://localhost/ajax_auth/php/regi.php';
		
		form.submit(function (event) {
			var query;
			event.preventDefault();
			
			if (user.val() === '') {
				dialog.dialog('open').html('ユーザー名を入力してください。');
				return;
			} else if (pass.val() !== conf.val()) {
				dialog.dialog('open').html('パスワードが一致しません。再入力をお願いします。');
				pass.val('');
				conf.val('');
				return;
			}
			
			query = url + '?' + jQuery(this).serialize();
			pass.val('');
			conf.val('');
			jQuery.get(
				query,
				null,
				function (data) {
					if (/^failed$/.test(data)) {
						dialog.dialog('open').html('登録に失敗しました。');
					} else if (/^duplicated$/.test(data)) {
						dialog.dialog('open').html('そのユーザーIDはすでに使用されています。');
					} else if (/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi.test(data)) {
						dialog.dialog('open').html('登録が完了しました。ユーザーIDとパスワードを忘れないようにしてください。');
						form.unbind('submit');
						jQuery('#container').html(data);
						logout();
					}
				},
				'html'
			);
		});
	}
}

暗号化処理

sha1.js こちらのサイトで配布されています。 mitsunari@cybozu labs

- JavaScript/Ajax Ajax, JavaScript, jQuery, jQuery UI, PHP, チャレンジ-レスポンス認証, パスワード認証

Comment

jucchie より:

2011年6月21日 10:27 PM

ブログ管理者さま

はじめまして。
当方、さくらインターネットのレンタルサーバーを利用しております。

サイト内にはログインページがあり、平文でのパスワード送信に抵抗を覚え（万が一の通信経路上の
傍受を恐れたため）、SSLの利用を検討しましたが、スタンダードプランのため独自SSLが利用できず、
共有SSLしか選択肢がありません。しかしながら、共有SSLを選択した場合、SSLと非SSLではドメイン
が異なるため、ログイン後に（SSLを抜けた後に非SSLに遷移させる際に）、セッション情報を引き継げ
ないというデメリットがあります。こうなると、サイト全体を共有SSL領域で管理するしかありません。

暗号化したいのはログインページ（パスワード）だけなのに、サイト全体をSSLに入れて、クライアント・
サーバー双方に徒らに負荷をかけてよいものやらと途方に暮れていましたが、Javascriptによる暗号化に
思い至り、偶然、貴ブログを拝見致しました。

一つ、質問させて下さい。

>４、そしていよいよパスワードの照合に入ります。サーバー側はチャレンジ値とデータベースに保
>管していたパスワードを引っ張り出して両者を組み合わせ、クライアント側で行ったのと同じ暗号
>化を施し、送られてきた（暗号化された）パスワードと突き合わせます。ここでセキュリティ上、
>注意するところは、クライアント側と同じようにそのまま（平文）のパスワードを暗号化しないと
>両者の暗号が合わないという点です。つまり、サーバー側ではユーザーのパスワードを、暗号化せ
>ずにそのまま保管する必要があるということです。これには何らかの対策が打てるかもしれません
>が、ここでは扱いません。

上記の一節に次の一文がありますが、

>サーバー側ではユーザーのパスワードを、暗号化せずにそのまま保管する必要がある

私は、パスワードはデータベースで管理する予定で、万が一の事態を想定し、テーブルには平文で保存
したくありません。そこで、やはりテーブルにはパスワードをハッシュ化した文字列を保存しておき、
クライアント側のJavasciptで（member.js 31行目）、

>pass.val(CybozuLabs.SHA1.calc(salt.val() + pass.val()));

のところを、

>pass.val(CybozuLabs.SHA1.calc(salt.val() + CybozuLabs.SHA1.calc(pass.val())));

と、ハッシュ化を2回行うようにし、サーバー側でのPHP処理で、

$pw_hashed = $connection->fetchHashedPasswordByUserId($userId);
if ($response === sha1($salt . $pw_hashed)) {

とすれば、解決するのではないかと考えましたが、ぜひともご意見をお聞かせ頂きたく思います。
私はあまりハッシュ関数についてあまり詳しくないので、もしかしたらハッシュ化を2回かけては
いけないという決まりがあるのではないかと考えてしまったりしてしまいます。

お忙しいところ、本当に恐縮ですが、ご回答どうぞよろしくお願い致します。
admin より:

2011年6月22日 9:36 AM

jucchieさん、コメントありがとうございます。

ご質問につきましてコメント欄にて回答させていただきます。
>サーバー側ではユーザーのパスワードを、暗号化せずにそのまま保管する必要がある

このように書いてしまってはいますが、ご指摘された通り必ずしもパスワードを平文で保管する必要はありません（考えてみれば暗号化で保管が常識ですね）。
jucchieさんがコメントで書かれている解決策、つまりユーザーが入力したパスワードを事前にハッシュ化する方法もこちらで検証してみましたがまったく問題がありませんでした。また、データベースにすでにハッシュ化されたパスワードが入っているならば、特にサーバー側のスクリプトをいじる必要もなさそうです。ハッシュ化された文字列は40文字になるそうなのでデータベースのデータ型に注意する程度でしょうか（varchar(40)にするなど）。

ちなみにmember.jsのユーザー登録用のスクリプトをその仕様に変える場合、
member.js 97行目付近の関数registerの……

function register() {
……..
……..
query = url + ‘?’ + jQuery(this).serialize();
pass.val(”);
conf.val(”);

このquery = url + ‘?’ + jQuery(this).serialize();という行の直前に次の2行を入れれば、データベースに暗号化されたパスワードが保管されます。

pass.val(CybozuLabs.SHA1.calc(pass.val()));
conf.val(CybozuLabs.SHA1.calc(conf.val())); //パスワード確認用フォームの内容もまとめて送信されてしまうので安全のため暗号化しておきます

貴重なご意見ありがとうございました。今後もお気兼ねなくどしどしご質問ください。

Message

: GoogleMaps APIとGeoHexを使ったスゴロクゲームのようなもの

地図サービスAPIのGoogleMapsと、マップ上に六角形（ヘックス）をしきつ …

: jQueryプラグインのClickableCanvasをバージョンアップ

jQueryプラグインとして公開している図形作成プラグインClickableCa …

: jPrimライブラリのマイナーチェンジ

JavaScriptライブラリjPrim（ジェイプリム）に少々機能を追加しました …

: ClickableCanvasのパフォーマンスを改善する

これは以前から気になっていたことなんですが、ClickableCanvasのデモ …

: jQueryプラグインClickableCanvasをアップデートしました

HTML5のCanvas図形をクリック可にするjQueryプラグイン、Click …

: アドベンチャーゲーム用ライブラリの導入方法（その１）

JS ADV.jsの機能全般はこちらで確認できます。 ⇒JS ADV.jsで何が …

: 特攻シューティングゲーム　Circulator

おそらく二年ぶりくらいになるゲームの投稿です。ジャンルはシューティングで、ゲーム …

: enchant.jsライブラリに着手

HTML5の普及とともに、それに特化したライブラリの開発があちこちで加速していま …

: UizeとThickBoxでサムネイルの画像ギャラリーを作る

JavaScriptフレームワークのUizeは高機能ながら独自の設計思想のためや …

: HTML5 Canvasでテキスト表示するライブラリ（続き）

前回紹介したライブラリを作るにあたって、パクった参考にした先行ライブラリがありま …

PREV: チャレンジ-レスポンス認証にチャレンジ！
NEXT: そして再びRPG制作へ……