JavaScript++かも日記

【Ajax】Basic認証ページから読み込む

XMLHttpRequestオブジェクトのopenメソッド引数には、オプションで、省略可ですが、 ユーザー名とパスワードを入れられるようになっています。

そこで、とりあえず、Basic認証を試してみます。ま、しょせんBasic認証ですから、あまり安全じゃありませんが(^^;そこを理解した上で、便利には使えるかもしれません。

#Ajaxを使えばMD5などで自力で毎回コードを変更し、パスワードもネットワークに流さない、認証やセッションも可能だという気がして、こないだ考えた(頭いたくなりそうな^^;)ロジックがあるんですが、それはまた、閑なときに書いてみます。

【動作ブラウザ】
＊Opera8とSafari1は、入力要求ダイアログがでてしまいました。。。

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1	n7	m1	k3
○	○	○	×	△	○	○	×	△	○	○	○

---

name:「ajax」、password:「test」です(入力済み^^;;;)。
認証ページは、http://jsgt.org/ajax/ref/test/auth/basic2/auth/index.htm

name :
password:

---

---

---

# ちなみに、高度な JavaScript 技集などのbase64エンコードを使わせてもらえば、open()メソッドの引数を使わなくても、自前でリクエストヘッダをセットすることで、認証可能です。

簡単に説明すると、ユーザー名とパスワードをコロン「:」でつないだ文字列をbase64でエンコードしてからsetRequestHeader()でAuthorizationヘッダをセットします。
ヘッダを使って認証サンプル
http://jsgt.org/ajax/ref/test/auth/basic2/test21.htm

#厳密に言うと、サーバーが先に401などを返して、Basicの認証作業は、確か、そこから始まるわけですから、最初からパスワードを送るんではなくて、　statusコードの401や407を拾ってむにゃむにゃする方法があるような気もしています。。。どうでしょう？　←試してみたら、ダミーのsend後、401が返ってきた瞬間にブラウザがダイアログ出します(^^;;。でも、それよりも、passwordをつけて送出した時点で、最初から、リクエストに「Authorization」ヘッダをつけてくれるので、Ajaxの場合、通常のブラウザUIが行っているような無駄なダミーリクエストのやり取りは無いんですね。

参考: RFC2617 HTTP 認証: 基本アクセス認証及びダイジェストアクセス認証
http://www.studyinghttp.net/cgi-bin/rfc.cgi?2617

---

Basic認証ページを用意する

http の認証認定方式にはBASIC 認証がよく利用されています。しかし、通信経路でパケットを盗聴されると簡単にパスワードがばれてしまいます。もう少し、強度の強いものでは、Digest 認証 があります。こちらはMD5でパスワード自体は流れませんので多少安心です。でも、今回は、BASIC 認証です。Digest 認証は、またの機会に、、、。

[ パスワードファイルを作る ]
htpasswd で、たとえば、/home/myhome/というディレクトリへ「.htpasswd」というファイルを自動生成します。 このディレクトリは、安全のため、Webから直接アクセスできない場所にします。 こう打つと、下記のように聞かれますのでパスワードを入れます。 これで、パスワードファイルはできあがりです。試しに、/home/myhome/.htpasswdを開いてみると、 こんなデータが入っています。作成したこのパスワードファイルに、更に追加でユーザを登録したい場合には、 下記のように、-c オプションを付けずに実行します。

[ .htaccessを用意する ]
下記の内容を.htaccessという名前のファイルにして、認証したいディレクトリへ置きます。（httpd.confへ指定する方法もあります） これで、.htaccessを置いたディレクトリ以下へアクセスしようとすると、認証入力を要求するダイアログが開くようになります。

で、Ajaxでは、上記で設定したユーザー名とパスワードを open()メソッドの引数で下記のように指定します。
で、Ajaxで読み込む、このtest.htmに、日本語を使うなら、URIエンコード(encodeURIComponent())しておくのが安全です。今回使っている、URIエンコード済み文字列は、下記のものです。参考:PHPとJavaScriptのURIエンコードを比較
ただ、しょせん、「手軽に盗聴可能なBasic認証」であることを忘れてはいけません
また、上記open()メソッドの引数のように、ユーザー名とパスワードをスクリプトに直接埋め込むなどは、言語道断(^^;;であることも忘れないようにしましょう。

ってことで↓こんなのも試してみました。
【Ajax】SSL+Basic認証ページから読み込む
http://jsgt.org/mt/archives/01/000432.html

---

---

【コメント】(←clickで入力欄open)