Passwd ヘルプ

Passwd V0.2, Copyright © 1999-2000 by K.Nakamura. All rights reserved.
2000/11/19

Passwdついて

どんなスクリプト？
サンプルページ
対応ブラウザ
リソース一覧
動作手順について
HTMLへの埋め込み
暗号化されたパスワードを見る・設定するには
関数について
変数の設定
？？な点
作ったのは私です
使用条件・著作権
リリースノート
リンク

どんなスクリプト？

ブラウザ側のJavaScriptだけで、一応パスワードチェックをしてみたい、という時のためのスクリプトです。プライベートな写真を知人にだけ公開したい、といったような場合に便利でしょう。

このAsahi Netの個人ホームページスペースでは、サーバサイドのプログラムが使えません。ブラウザ側の機能だけで認証しようとして何が困るかと言うと、データもロジックもブラウザに送られてしまうために認証データが筒抜けになってしまい、一件パスワードチェックをしてみてもソースを見てしまえばバレバレになってしまうことです。

また、URLが分かってしまえばイメージなどは見てしまうことができます。そこで、URLがわかるようなページを送らずにすむような仕組みを考えておく必要もあります。

プロバイダが提供するホームページスペースでは、所詮はセキュリティーなど保てる環境ではないのですが、一所懸命パスワード破りをした人にはご褒美でデータを見せてあげましょう、とわりきれる程度であれば結構実用になるものが作れていると思います。

認証に使うパスワードは暗号化しておきます。こうしておけば、ブラウザに送るHTMLやJavaScriptに書き込んでおいても大丈夫です。

入力されたパスワードを同じ暗号化のロジックを通して、その結果が一致するかどうかで認証を行います。暗号化されたパスワードを元に戻す必要はありませんので、複合は不要です。暗号化のロジックを公開しても複合がほとんど（実用範囲で）不可能であれば、ロジックを公開してしまっても問題ないということになります。

Passwd.jsに使った暗号化のロジックは、適当に掛けたり足したりしただけのいい加減なものなので、桁数も少ないので、その気になればすぐ解かれてしまうでしょう。少なくとも私は人の写真を見るためにわざわざ時間を割いて暗号を解く気にはなりません。ま、この程度で十分と思う人向けのセキュリティーだと考えてください。こだわる方は、高度な暗号ロジックを持ちこんでください（私にも教えてください）。

Passwd.jsは、まずログインページで認証を行うようにしています。ログインページではFORMのsubmitで次のページへ移るようにしておくところがミソです。こうすれば、認証が通らなかった場合にsubmitをキャンセルすることで、次のページをブラウザに送ることがありません。したがって、ログインページ以外のHTMLやjpgファイルなどのパスを不用意に知らせてしまうことはありません。

また、Passwd.jsはそれ以降のページでも認証を引き継げるようにしています。これはCookieにパスワードを保存しておくことで実現しています。サンプルでは認証が通ったときに表示するok.htmを直接開こうとした場合、メッセージダイアログを表示してsample.htmへ飛ぶようにしています。

写真のページを作るような場合は、更にPhotoGalleryと組み合わせると生のURLは少なくなるため、ますますURLを見つけるのは難しくなるでしょう。

（わざわざバラすことはないんで詳しくは書きませんが、ok.htmを直接開こうすると、いったんはok.htmがブラウザに読みこまれますので、その気になればその先のURLを探すことは可能です）

パスワードはブラウザのセッション限り有効なCookieに保存します。そのため、一旦認証が通ったあとは、そのブラウザを終了させない限り有効になります。ログインページに戻っても、いったん認証が通っていれば再度入力する必要はありません。また、認証が通っていれば、直接ok.htmを呼ぶこともできます。（これが嫌だという場合は、onLoadでCookieをクリアすることで対応可能でしょう）

また、ログインページから次のページへの移動はJavaScriptで行っています。このため、JavaScript1.2に対応していないブラウザでは次のページへ移動することができません。このため、IE、Netscapeとも4.x以降の対応となります。

サンプルページ

ログインページのサンプルです。

認証が通ったあとに移るページ(ok.htm)です。

正しいパスワードが入力されていないと、ok.htmはメッセージダイアログを表示してsample.htmへ移動します。

ブラウザ対応について

IE、Netscapeとも4.x以降の対応となります。

ログインページから次のページへの移動はJavaScriptで行っています。このため、JavaScript1.2に対応していないブラウザでは次のページへ移動することができません。

動作手順について

FORMのsubmitの場合は次の手順で動作します。

ログインページでパスワードを要求します
入力されたパスワードに計算を施し、値を暗号化します
この値が予め設定されている値(passwdKey)と一致しているかチェックします
値が一致した場合、次のように分岐します。

nextPageが設定されていない場合、trueを返しFORMのsubmitを継続させます。HTMLでactionが指定されていれば、そのURLへ、さもなければログインページに戻ります。
nextPageが設定されている場合、document.PW_FORM.actionにnextPage を設定し、ページを移動します。

値が一致していない場合、次のように分岐します。

returnPageが設定されていない場合、falseを返しFORMのsubmitをキャンセルし、ログインページに戻ります。
returnPageが設定されている場合、window.locationにreturnPageを設定し、ページを移動します。

HTMLへの埋め込み

(1)ログインページ(sample.htm)

ヘッダの中で、次のようにJavaScriptの読みこみ、および変数の設定を行います。変数の意味については変数についてを参照してください。


<SCRIPT Language="JavaScript1.2" SRC="Passwd.js"></SCRIPT>
<SCRIPT Language="JavaScript1.2">
<!-- 
	nextPage   = "ok.htm";
	returnPage = "index.htm";
	passwdKey  = "22A323B1";
	//暗号化したパスワードを知りたいときにコメントをはずす
	//showHashedPasswd = true;
-->
</SCRIPT>

BODYタグで、次のようのonLoad、onUnloadでJavaScriptの関数を呼ぶ。


<BODY BGCOLOR="#FFFFFF" onLoad="SetPasswd()" onUnload="ClearPasswd(PutPasswd(false))">

(2)ログイン以降のページ(ok.htm)

ログイン以降のページでも、ほとんど同じ要領で利用することができます。ページ表示時に認証を実行するためにAuthenticate(true);の行があることに注意してください。


<SCRIPT Language="JavaScript1.2" SRC="Passwd.js"></SCRIPT>
<SCRIPT Language="JavaScript1.2">
<!-- 
	passwdKey  = "22A323B1";
	returnPage = "sample.htm";
	//ページ表示時に認証を実行する
	Authenticate(true);
-->
</SCRIPT>

(3)Passwd.jsが無効な場合の対応(sample.htm)

Passwd.jsを利用するログインページでは、onLoad、onUnloadで関数呼び出しをしています。このため、ネットワークが遅いときなどはPasswd.jsがダウンロードされる前に関数が呼ばれ、エラーが発生します。ダミーの関数を用意しておくで、これに対応することができます。Passwd.jsが読み込まれるとそれによって置きかえられるため、ここでは基本的に何も行いません。


<SCRIPT Language="JavaScript">
<!--
    function GetPasswd() {
	return "*";
    }
    function SetPasswd() {
	document.PW_FORM.PW_FIELD.value = "*";
    }
    function ClearPasswd() {
	document.PW_FORM.PW_FIELD.value = "*";
	return false;
    }
    function PutPasswd(needsDialog) {
	alert("Passwd.jsがダウンロードされていません。正常に動作しないかもしれません。");
	return false;
    }
-->
</SCRIPT>

またBODY内でNOSCRIPTタグにより、JavaScript非対応または無効になっている場合への対応のため、メッセージを出すようにしておきます。


<NOSCRIPT>
<FONT COLOR="RED">JavaScriptを使ったページですが、JavaScriptに対応していないブラウザかJavaScriptが無効になっているため、パスワードチェック、イメージ表示が行えません。<BR></FONT>
</NOSCRIPT>

暗号化されたパスワードを見る・設定するには

Passwd011.zipをダウンロードし、展開してください。sample.htmのの中にある

  //showHashedPasswd = true;

の行のコメントをはずし、

  showHashedPasswd = true;

にしてからsample.htmをブラウザでオープンすると、入力したパスワードを暗号化したものがメッセージボックスに表示されます。

この値をPasswd.jsのpasswdKey の値にセットするか（"123456"の場合の例）、

  var passwdKey = "123456";

sample.htmのように、HTMLのJavaScriptの中で設定します。


  <SCRIPT Language="JavaScript1.2">
  <!--
    nextPage   = "ok.htm";
    returnPage = "sample.htm";
    passwdKey  = "123456";
    showHashedPasswd = true;
  //-->
  </SCRIPT>

前者の方法がお勧めで、これだとPasswd.js一ヵ所だけ変更すればOKです。後者の場合は、各々のHTMLにコピーする必要がありますが、パスワードをページ毎に変えたりしたければ、これも便利でしょう。

関数について

Passwd.jsで用意している関数は、次のとおりです。

SetPasswd()	Cookieに保存されたパスワードを読みこみ、passwordフィールドにセットする。直前に入力されたパスワードを復元するために使用する。
ClearPasswd()	FORM内のパスワードフィールドの値を'*'にセットし、falseを返す。FORMの送信をGETで行う場合、URLに入力されたパスワードが表示されてしまうので、これを隠すために使用する。onUnloadで使用する場合は戻り値は無意味。FORMで使用する場合も考え、submitをキャンセルするためにfalseを返す。サンプルでは、onUnloadでClearPasswd(),PutPasswd()を両方実行している。
PutPasswd(needsDialog)	入力されたパスワードをCookieに保存する。Authenticate()で認証を行う。needsDialogはtrueかfalseとする。trueの時は認証が通らなかったときにメッセージダイアログを表示する。falseの場合、通らない場合もメッセージダイアログを表示せずに処理を続行す。
Authenticate(needsDialog)	入力されたパスワードをhashPasswd()で暗号化し、その結果と比較して認証を行う。認証が通ればnextPageの設定にしたがってページを移動する。認証が通らなかった場合はreturnPageの設定にしたがってページを移動する。needsDialogはtrueかfalseとする。trueの場合、認証が通らなかったらメッセージダイアログを表示する。falseの場合、認証が通らない場合もメッセージダイアログを表示せずに処理を続行する。
HashPasswd(passwd)	passwdを暗号化する。サンプルのロジックは適当に掛けたり足したりしたいい加減な暗号化です。

変数について

HTMLへの埋め込みで設定する変数の意味は、次のとおりです。これらの変数はPasswd.jsで宣言され、初期化されています。通常はソース中の初期化部分で値を設定した方がよいでしょう。そうすれば、個々のページではPasswd.jsを読みこみ、Authenticate()を実行するだけです。個々のページでも変数を設定できるようになっており、その場合にはページ毎にパスワードを変えることができます。

nextPage	パスワードフィールドがあるFORMがsubmitされ、認証が通ったときにリンクするURL。省略したときはonSubmit()にfalseを返し、submitをキャンセルする。
returnPage	パスワードフィールドがあるFORMがsubmitされ、認証が通らなかったきにリンクするURL。省略されたときはonSubmit()にfalseを返し、submitをキャンセルする。
passwdKey	Authenticate()の中で比較するパスワード。入力されたパスワードをhashPasswd()で暗号化し、その結果と比較して同じであれば認証される。
showHashedPasswd	trueの時、暗号化したパスワードをメッセージボックスに表示する。この値をpasswdKeyとする。