よく「javascriptで会員ページへのログインをコントロールできないでしょうか？」
という質問を見かけます。
これに対する回答は大体以下のようなものであり、
こんなものはプロテクトのうちに入りません。
htmlはソースを見れるんですから、javascriptでどんなプロテクトを掛けているかなんて
ちょっと詳しい人ならだれでもわかってしまいます。
-------------ダメな例------------------
<html>
<head><title>パスワード入力</title>
</head>
<script type="text/javascript">
function enter(pass)
{
location.href="./member/"+pass+"member.html";
}
</SCRIPT>
<body>
<h1>パスワードを入力してください</h1>
<h3>ここから先はメンバー専用です<br>パスワードを入力してください</h3>
<form>
<input type="password" name="Pass">
<input type="button" value="Enter"
onClick="enter(this.form.Pass.value)">
</form>
<a href="./index.html">
memberではないので退室する
</a>
</body>
</html>
-------------ここまでダメな例-------------
この例ですとパスワードと同じディレクトリ名を見つければ、完全に誰でもOKのページになってしまいます。
これじゃプロテクト掛ける意味なんて全くありません。
→どうせならブックマーク不可能で、
→どこでログインコントロールしてるか分からなくて、
→仮にコントロール部分を発見されてもそのファイルをダウンロードできなくて
→さらにログインIDとPassを無限に作れるページ
というのを作ってみたいですね。
管理人の環境では.netが使えるのでわざわざjavascriptで強固なセキュリティなんて
作る必要はないんですけれど、
クライアント先で社内サーバーはwindowsでphpも.netもなし、
の環境で社内専用の仕事用webページ（つまりwwwではなくてローカル環境）があり、
しかも管理者のみログインできるページが必要…
という時に考えたのがこのシステム。
これなら、無料のHPなどでphpやcgi不可の環境でも
そこそこセキュリティの確保されたページが作れます。
-----------以下がログイン部分-----------
<html>
<head>
<!-- saved from url=(0013)about:internet -->
<script type="text/javascript">
var LoginPage;
LoginPage="login_INI.htm"; //ここにログインをコントロールするページを指定
function LoginScript() {
var IDText = document.form1.IdBox.value;
var PassText = document.form1.PassBox.value;
location.href=LoginPage+"?"+IDText+"."+PassText;
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="IdBox" id="IdBox" size="22" value="IDを打ち込んでください" /><input type="password" name="PassBox" id="PassBox" size="16" /><br />
<input type="button" value="Login" onClick="LoginScript()">
</form>
</body>
</html>
--------ここまでログイン部分-------------------
--------以下がログインコントロールページ-----------
<html>
<head>
<!-- saved from url=(0013)about:internet -->
</head>
<body>
<script type="text/javascript">
var LoginOK = "LoginOK.htm"; //ここにログイン後のページを指定
var NGPage = "LoginNG.htm"; //ここはログイン失敗時のリダイレクト先を指定
var LoginString=location.search;
LoginString=LoginString.substring(1,str.length);
switch (LoginString) {
case "guest.guest": //ここにIDとPassの組み合わせを（ドットでつなぐ）を設定。以下いくらでも追加できる
location.href=LoginOK;
break;
case "guest1._guest1": //ここにIDとPassの組み合わせを（ドットでつなぐ）を設定。以下いくらでも追加できる
location.href=LoginOK;
break;
case "guest2.guest2": //ここにIDとPassの組み合わせを（ドットでつなぐ）を設定。以下いくらでも追加できる
location.href=LoginOK;
break;
default:
location.href=NGPage;
}
</script>
</body>
</html>
--------ここまでログインコントロールページ-----------
--------以下がログインOKの時のページ-------------
<html>
<head>
<!-- saved from url=(0013)about:internet -->
<script type="text/javascript">
var NGPage = "LoginNG.htm"; //直に入ってきた人への対策でリダイレクト先を指定
//この作りではブックマークされるのは防げるが、リンクされるとチェックを通ってしまう
//もっとセキュリティ強度を高めるにはリンク元ページのURLを設定してそのURLと同一かどうかを調べれば
//直接このページを開くことができなくなる。
function checkURL(){
if (document.referrer.length ==0 )
location.href=NGPage;
}
</script>
</head>
<body onload="checkURL()">
ログインしました
</body>
</html>
--------ここまでログインOKの時のページ-------------
--------以下がログインNGの時のページ-------------
<html>
<head>
<!-- saved from url=(0013)about:internet -->
<script type="text/javascript">
function settext() {
var RedirectPage="logintes.htm"; //ここはNGの時どこへ戻るかのリンク先を指定
document.getElementById("str0").innerHTML = "あなたのリクエストは認証されませんでした<br /><a href='"+RedirectPage+"'>リンク</a>をクリックし元のページへ戻ってください"
}
</script>
</head>
<body onload="settext();">
<span id="str0"></span>
</body>
</html>
--------ここまでログインNGの時のページ-------------
なんだかあまり見かけない呪文がheadに入っていますが、
<!-- saved from url=(0013)about:internet -->
これはローカルの環境でも動作させるおまじないです。
これがないとローカル環境ではいちいちセキュリティでひっかかるので、実に面倒です。
これの動作見本は下です
【以下見本】
いい忘れましたが、IDとPassは上のソースを見て判ると思いますが、
ID=guest、Pass=guestです。
