パスワードでページを保護したい!~JavaScript編

トップ > 気まぐれ実験 > 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 あいまい)

追記:2008/1/7 パスワードでページ保護というのも、BlogやSNSという仕組みが一般化した今では、不要な知識になっているのかもしれません。自分でHTMLでページを作っている人というのは今はどれくらいいるのでしょうね。


トップ > 気まぐれ実験 > JavaScriptでパスワード保護

日時: 2008年01月07日 01:39
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク
トップに戻る
このエントリーの所属カテゴリ: 気まぐれ実験の小部屋
このエントリーのタイトル:パスワードでページを保護したい!~JavaScript編



copyright © 2000-2008 all rights reserved
あいまいモード・コム - rss2.0 atom
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク