パスワードでページを保護したい！～JavaScript編
「パスワードを入れると次のページが出るようにしたい」 という意見をよく聞きます。皆に見てもらうことを前提に公開しているホームページから、パスワードをかけて、仲間だけの秘密のページを作りたい・・・そういう要望が多くなってきているような気がします。これも、ホームページ作りが多様化してきたことをあらわしているんでしょうね。
以前、このような内容を助け合いの掲示板で質問されたのをきっかけに、ここで JavaScript で実現する方法についてまとめてみました。
その前に、パスワードで次のページに移るというやり方はいろいろありますが、どの程度厳密にするかでその強度は変わってきます。
１．サーバーの認証を使ったパスワード制御
２．CGI等を利用したプログラムによる制御
３．JavaScriptを使った簡単な制御
この３つが主なものですね。もっとありますが、自分でサーバーでも立てないと難しいと思うので、とりあえずこの３つです。上から順番にセキュリティーの強度は下がっていきます。
１番の方法は借りているサーバーの設定をある程度変更できる権限がないと難しいので、簡単にとはいきません。サーバーがUnix系でApacheを利用しているなら比較的簡単に実現できますが、Unix とかApache って何？という状態だと難しいです。
２番の方法が現実的です。kent-web と レスキューとか無料の CGI用プログラムを配布しているところで借りてきて自分のサーバーに設置する方法です。これはこのサイトで検索してみてください。（方法によっては、こちらの方が強度が上になることもあります。また、このサイトでもパスワード保護用CGIスクリプトを配布予定です。しばしお待ちをm(__)m）
ですが、この方法も CGI を設置できる知識が最低限必要ですし、CGI を利用できないサーバーだと意味がありません。
そこで、３番の方法はセキュリティーという点では一番低いですが、非常に手軽に実現できます。
↓のソースをページの<head></head>の間に書きます。
<script language="JavaScript" type="text/javascript">
function nextPage(){
pwd=document.form1.pass.value;
location.href=pwd+".html";
}
</script>
その後、本文のパスワードを入力する場所（<body></body>の中です）に下のHTMLを書きます。
<form name="form1">
<input type="password" name="pass">
<input type="button" value="パスワード" onClick="nextPage();">
</form>
これで、ページ上にはパスワード入力画面が現れるはずです。ここで、パスワードで保護したいページのファイル名が「abc.html」だとすると、パスワードは「abc」ということになります。
これは、非常に単純な仕組みで、要するに、どこにもリンクされていないページのファイル名をパスワードにしているだけのことです。普通にURL教えるよりは見た目がかっこいいかなぁ、、、という程度のものですが、非常に手軽でしょ？
サンプルのページがここにあるので、実験してみてください。
|
ここから先はパスワードが必要です。 ENTER!（別窓） |
ちょっとだけ JavaScript 解説
原理は簡単ですし、上のソースをコピーするだけでOKなので、それでもいいのですが、JavaScriptの解説が必要かなぁ、、、とも思うので、一応解説です。（＾＾；
最初に、BODYの中に書いた、パスワード入力フォームからです。
FORM タグについては、HTML等の解説書に任せますが、それ以外の部分で、簡単に説明します。
<form name="form1">
<input type="password" name="pass">
<input type="button" value="パスワード" onClick="nextPage();">
</form>
まず１行目の <form name="form1"> の部分ですが、ここで、name= とすることでFORM全体に名前をつけています。（名前がなくても大丈夫ではありますが・・・後々便利です。）
次の <input type="textbox" name="pass"> がパスワードを入れるテキストボックスですが、ここでも name="pass" という名前をつけています。
次の行はボタンですが、最後の部分に onClick="nextPage();" という場所があります。この「onClick」というのが、イベントハンドラーと言われるもので、簡単に言うなら、クリックされたら””の中を実行する、という命令です。
ここには、クリックされたら「nextPage();」という命令を実行しなさい！と書かれているので、このnextPate();という命令が何かということになります。 そこで、ヘッダー部分に書いたJavaScriptの登場です。
ここに nextPage(); が何をするかが定義されています。
<script language="JavaScript" type="text/javascript">
function nextPage(){
pwd=document.form1.pass.value;
location.href=pwd+".html";
}
</script>
まず、先ほどのフォームで入力されたパスワードを、変数「pwd」に代入する必要があります。それが次の行です。
pwd=document.form1.pass.value;
ここで、さっきフォームに名前をつけたのを思い出してください。フォームには「 form1 」、パスワード入力するボックスには「 pass 」とつけましたよね？つまり、上の式は、
「このページにある（document）.フォーム(form1)の.テキストボックス(pass)にある.値(value)を「pwd」に代入しなさい」、という意味になるのです。
次の行では、「pwd」に「 .html 」をつけて、HTMLファイルのファイル名になるように変形して、「 location.href 」へ代入しています。この「 location.href 」は、そのURLにジャンプするための命令です。「location.href=（ファイル名）;」とすることで、指定のページに飛ばすことが出来ます。
どうでしょう？非常に簡単でしたよね。JavaScript を使った方法では、フォームの見栄えを変えてみたり、プロンプト画面によりパスワードを入力させたりと、いろんな方法がありますが、隠したいファイル名をパスワードに使うという基本は同じだと思います。
ただ、これもセキュリティーということを考えると、ないに等しい方法です。まず、ブラウザの履歴にページが残ってしまうので、パソコンを共有しているとあまり意味がありません。また、ページそのものを保護しているわけではないので、アドレスさえわかると、勝手に他のページからリンクされてしまったときに困ります（＾＾；
ということで、この方法は簡単な「お遊び」程度のために使ってください！
追記：2008/1/7 パスワードでページ保護というのも、BlogやSNSという仕組みが一般化した今では、不要な知識になっているのかもしれません。自分でHTMLでページを作っている人というのは今はどれくらいいるのでしょうね。
