Javascript

【Javascript】Ajax　Ajaxで基本認証+SSL

Javascript関連情報

更新日：2005年07月31日

Ajax　Ajaxで基本認証+SSL

高橋登史朗

ユーザーを限定する場合などに利用する基本認証(Basic Authentication)は、HTTP上のもっとも普及した認証方式ですが、今回は、その基本認証ページをAjaxで利用してみます。

Ajaxで基本認証+SSL

前回は、Ajax+PHPでの動的なテーブル書き換えを行いました。つまり、Ajaxを利用したページ構築と動的書き換えについての話題でした。今回は、ページに入る前の話題です。ユーザーを限定した基本認証ページをAjaxで利用してみます。

AjaxをいじっていてXMLHttpRquestのopen()メソッドに「ユーザー名」「パスワード」という引数があることに気づかれた方も多いと思います。これで、基本認証ページを利用することができます。

Webサービスなどの実際の業務の中で生まれてきたAjaxにとって、ユーザー限定のサービスは大切です。XMLHttpRquestオブジェクトに仕込まれたこの機能は、そのようなインターフェイスを実装するときの役に立つでしょう。

基本認証(Basic Authentication)は、HTTP上のもっとも普及した一般的な認証方式で、認証制限されたページにアクセスしようとすると、たとえば、次のようなダイアログが出て、ユーザー名とパスワードの入力を求められます。

　そして、入力された「ユーザー名」「パスワード」が許可されたものと一致すれば閲覧でき、違えば閲覧できません。

open()メソッドの引数は、この認証動作に対して「ユーザー名」「パスワード」を提出するもので、これによって、Ajaxからの基本認証ページ利用が可能になります。

基本認証のメリットは、実装してないブラウザがほとんどないほど普及していることですが、デメリットは、Base64のエンコードしかされない(つまり、盗聴してBase64デコードすれば、簡単に解読される)状態のパスワードがネットワーク上を流れてしまうことです。

そこで、今回の記事では、最後に基本認証+SSL(Secure Sockets Layer)による安全な接続についても試してみます。

基本認証の設定方法などは、ここでは扱いません。基本認証でアクセス制限　などをご参照ください。

5: [ソース]今回利用した暫定Ajax用ライブラリ

1: 基本認証の流れ

　通常のBasic認証の流れは、つぎのようになっています。

(1)最初のリクエスト　クライアントブラウザが、HTTPリクエストを送ります。
(2)最初のレスポンス　サーバーは、そのページが認証の必要なページであることを、レスポンスヘッダへ「401 Authorization Required」や「WWW-Authenticate: Basic ...」を渡すことでブラウザに教えます。
(3)ユーザー名パスワード入力　そこでブラウザは、ダイアログなどを出して「ユーザー名パスワード入力」を求めます。ユーザーが入力し、OKボタンなどを押すと、ユーザー名とパスワードを「:」でつないだ文字列をBase64でエンコードしたものを、リクエストヘッダで「Authorization: Basic 」の後ろにつなげて送出します。
(4)認証成功なら　サーバーは、送られてきたヘッダを分解し、base64デコードしてから、MD5などでエンコードして、あらかじめ「htpasswdコマンド」などでエンコードしてあった文字列と比較します。これが、同じなら、認証成功となります。
(4')認証失敗なら　(4)の比較が一致しなければ、認証失敗となり、再度レスポンスヘッダへ「WWW-Authenticate: ...」を書いて送り、認証入力を要求します。

クライアント	ネットワーク	サーバー
(1)最初のリクエスト	POST｜GET→	受信
受信し、ダイアログを出す	←HTTP1.1 401 Authorization Required ... WWW-Authenticate: Basic .....	(2)最初のレスポンス
(3)ユーザー名パスワード入力	Authorization: Basic Base64でエンコードされたユーザー名:パスワード →	受信し、判定

認証ページデータを閲覧	←HTTP1.1 200 OK .....	(4)認証成功なら
受信	←HTTP1.1 401 WWW-Authenticate: Basic .....	(4')認証失敗なら

このように、通常はクライアントとサーバーの間で、HTTPヘッダを使って認証のやりとりをするわけですが、 Ajaxで利用するXMLHttpRequestは、その名の通りHTTPクライアントとして、サーバーとの認証のやりとりを行います。

したがって、今回は取り上げませんが、open()の引数を使った基本認証だけではなく、JavaScriptによる Base64エンコードを行ってから setRequestHeader()メソッドでAuthorizationヘッダを設定することでサーバーと認証のやり取りをするという方法も可能です。

2: Ajaxの場合の流れ

　上記の一般的な基本認証の流れと、Ajaxでの基本認証の流れの違いを確認しておきます。

とは言っても、今のところ(2005.07現在)、SafariとOpera8は、一般的な流れと同じです。しかし、それ以外のブラウザ(WinIE、Mozilla系Firefoxなど、Konqueror)では Ajaxでの基本認証工程は、一般的な基本認証の流れと異なっています。

なぜかというと、Ajaxから認証ページを利用するときには、相手が認証ページであることが、あらかじめわかっていて、しかも、最初からいきなり認証判定を要求できるからです。Authorizationヘッダを自力で送出できるAjaxな方法では、 (1)と(2)のネゴシエーション工程は不要なのです。

つまり、こうなります。

クライアント	ネットワーク	サーバー
(1)最初のリクエスト　 (ユーザー名パスワード入力)	Authorization: Basic Base64でエンコードされたユーザー名:パスワード →	受信し、判定

認証ページデータ閲覧	←HTTP1.1 200 OK .....	(4)認証成功なら
受信	←HTTP1.1 401 WWW-Authenticate: Basic .....	(4')認証失敗なら

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！