Index

HOME > プログラムTOP > JavaScript


パスワード制限

　JavaScript の実用的なTips集です。ここでは、パスワードによるページ保護を扱います。ただし、JavaScriptではソースからファイル名をたどってダウンロードすることが可能ですので、厳密なパスワード認証は困難です。その場合は、サーバー側のプログラム（PHP, Perl, Ruby など）で対応する必要があります。
[INDEX] ダイアログ認証: 入力ダイアログボックスを使ってパスワードを確認
フォーム認証: フォームの PassWord要素を使ってパスワードを確認
パスワードの保護: ファイル名を利用してパスワードを設定

sasaraan programming

Exposition

■ダイアログ認証

入力ダイアログ 　入力ダイアログを開いて、ユーザーにパスワードの入力を求める方法です。入力ダイアログを開くには、window オブジェクトの prompt メソッドを使います。このメソッドは、キャンセル時は null を、OK時はユーザーの入力文字列を返します。この時、パスワードは、別ファイルに記述して、HTML側で取り込むようにします。ただし、外部ファイルは、拡張子が .js のテキスト形式である必要があります。
prompt(str1, str2)... 入力ダイアログを開く　（str1 : 説明文, str2 : 初期値）
location.href ... 移動先の取得・設定　
　実際の処理では、パスワードが正しければ、location オブジェクトの href プロパティ を使ってページを移動させ、間違いの時は、警告ダイアログを表示して元のページに戻ります。なお、下記の例では、キャンセル時は何も起こらないようにしています。
... ダイアログに "guest" と入力するとページを移動します 
// password.js JavaScriptソース
var strPW = "guest";

function CheckPrompt() {
    var strRes = prompt("パスワードを入力してください", "");
    if (strRes != null) {
        // キャンセル(null)でないときのみ処理
        if (strRes == strPW) {
            // パスワード確認
            location.href = "jssamp/menu_pg1.html";
        } else {
            // パスワード否認
            alert("パスワードが違います！");
        }
    }
}
<!-- HTMLソース -->
<head>
    ...
    <script type="text/javascript" src="password.js"></script>
    ...
</head>
<body>
    ...
    <form name="Form2" style="margin:1ex">
    <input type='button' value='パスワード確認' onclick='CheckPrompt()'>
    </form>
    ...
</body>

■フォーム認証

パスワード・オブジェクト 　ダイアログを使わず、入力用フォームを利用することもできます。この時、別に入力用のHTMLファイルをつくって対応することが多いようです。また、入力用には Password オブジェクトを利用すると、入力文字を隠蔽することができます。下記の例では、パスワードやチェック用のスクリプトは、やはり別ファイルにしています。
パスワード : .... "guest" と入力するとページが移動します。 
// password.js JavaScriptソース
var strPW = "guest";

function CheckPW(pw) {
    if (pw == strPW) {
        location.href = "Page1.html";
    } else {
        alert("パスワードが違います！");
    }
}
<!-- HTMLソース -->
<head>
    ...
    <script type="text/javascript" src="password.js"></script>
    ...
</head>
<body>
    ...
    <form name="Form2" style="margin:1ex">
    パスワード : <input type="password" name="PW2" size="12"> 
    <input type="button" value="確認" onclick="CheckPW(document.Form2.PW2.value)">
    </form>
    ...
</body>

■パスワードの保護

　JavaScript では、ユーザーがソースを調べ、パスワードを見ることができます。ファイルを別にしてもダウンロードして見ることができてしまいます。一般に、JavaScript でパスワードを完全に保護するには、パスワードにリンク先のパスの一部（主にファイル名）をそのまま使用します。例えば、移動先のファイル名が "Page1.html" だとすれば、"Page1" がパスワードとなります。
　下記のサンプルでは、ファイル名をパスワードにしています。ただし、パスワードが間違いの場合は、既定のエラーページ（「ページを表示できません」）に移動してしまいます。

パスワード :
（'menu_pg1' と入力するとページが移動します）
// password.js JavaScriptソース
function PWCheck(pw) {
    location.href = "jssamp/" + pw + ".html";
}
<!-- HTMLソース -->
<head>
    ...
    <script type="text/javascript" src="password.js"></script>
    ...
</head>
<body>
    ...
    <form name='Form3' style='margin:1ex'>
    パスワード : <input type='password' name='PW3' size='12' >
    <input type='button' value='確認' onclick='CheckWord(document.Form3.PW3.value)'> 
    .... 'menu_pg1' と入力するとページが移動します。
    </form>
    ...
</body>
　なお、この方法だと、ユーザーごとに中継用のHTMLファイル（本命のページに移動させるだけのページ）を用意すれば、ユーザー別パスワードにも対応することができます。しかし、ファイル数がかさむと管理が大変ですので、この場合もサーバー側のプログラムで対応した方が良いでしょう。

www.sasaraan.net

(c) morijoh