トップへ > きまぐれ実験 > JavaScriptでパスワード保護
気まぐれ実験
● パスワードでページを保護したい!〜JavaScript編

パスワードを入れると次のページが出るようにしたい」という意見をよく聞きます。皆に見てもらうことを前提に公開しているホームページから、パスワードをかけて、仲間だけの秘密のページを作りたい・・・そういう要望が多くなってきているような気がします。これも、ホームページ作りが多様化してきたことをあらわしているんでしょうね。

以前、このような内容を助け合いの掲示板で質問されたのをきっかけに、ここでJavaScriptで実現する方法についてまとめてみました。

その前に、パスワードで次のページに移るというやり方はいろいろありますが、どの程度厳密にするかでその強度は変わってきます。

1.サーバーの認証を使ったパスワード制御
2.CGI等を利用したプログラムによる制御
3.JavaScriptを使った簡単な制御

この3つが主なものですね。もっとありますが、自分でサーバーでも立てないと難しいと思うので、とりあえずこの3つです。上から順番にセキュリティーの強度は下がっていきます。

1番の方法は借りているサーバーの設定をある程度変更できる権限がないと難しいので、簡単にとはいきません。サーバーがUnix系でApacheを利用しているなら比較的簡単に実現できますが、UnixとかApacheって何?という状態だと難しいです。

2番の方法が現実的です。kent-webとレスキューとか無料のCGI用プログラムを配布しているところで借りてきて自分のサーバーに設置する方法です。これはこのサイトで検索してみてください。(方法によっては、こちらの方が強度が上になることもあります。また、このサイトでもパスワード保護用CGIスクリプトを配布予定です。しばしお待ちをm(__)m)

ですが、この方法もCGIを設置できる知識が最低限必要ですし、CGIを利用できないサーバーだと意味がありません。

そこで、3番の方法はセキュリティーという点では一番低いですが、非常に手軽に実現できます。


↓のソースをページの<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>


まず1行目の <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を使った方法では、フォームの見栄えを変えてみたり、プロンプト画面によりパスワードを入力させたりと、いろんな方法がありますが、隠したいファイル名をパスワードに使うという基本は同じだと思います。

ただ、これもセキュリティーということを考えると、ないに等しい方法です。まず、ブラウザの履歴にページが残ってしまうので、パソコンを共有しているとあまり意味がありません。また、ページそのものを保護しているわけではないので、アドレスさえわかると、勝手に他のページからリンクされてしまったときに困ります(^^;

ということで、この方法は簡単な「お遊び」程度のために使ってください!





(2003/9/15 by あいまい)

トップへ > きまぐれ実験 > JavaScriptでパスワード保護
copyright(C) 2001-2003 all rights reserved
『ウェブ・プログラムの実験場!』

by あいまいモード・コム(www.iMYmode.com)