フリーBGM(音楽素材) popup→

パスワード保護

限定公開のページをつくる方法はいくつかある。いちばん簡単なのは、HTTPサーバ認証の仕組みを利用してディレクトリ全体を保護することだろう。サーバのファイル保護機能で設定するか、テキストエディタで.htaccessを作成してアップすればよい。PHPスクリプトで保護することもできる。一度認証するとブラウザを閉じるまで有効なので利便性がよい。ただし共用パソコンのときは閲覧後ブラウザを閉じないと、保護しているページ(ディレクトリ)を第三者に見られる。

Web制作を勉強し始めたころは、買ったパソコンに添付されていた無料版のIBMホームページビルダー(以下HPB)のパスワード保護機能を使った。その後、Perl/PHP/Javascriptをつかってパスワード保護するようになった。HPBではJavascriptを使ってパスワードを暗号化しているので安全だと思っていたが、認証後のURLが分かるとパスワードなしに開けるという落とし穴があった。

IBMホームページビルダー

パスワード付きリンク をクリックすると、パスワードの入力を促す画面が表示される。この例ではパスワードが正しいとOK.html、間違っているときはNG.htmlに移動する。

ページソースを見ても、パスワードはもちろん正しいときの移動先URLも分からない。
※どんなブラウザでもページソースをかんたんに見ることができるので、CheckPassword80.jsを組み込んで暗号化している。

しかし、移動先URLをを知っていれば誰でもアクセスできる。パスワードを知っている人は認証後は、OK.htmlをブラウザで開けばよい。パスワードを知らなくても良い。

これは、URLがパスワードそのものだというのと結果的に同じである。つまり、パスワード保護したいページの名前を、たとえば bc310$9bwG5sn7.html  にして、「パスワードは bc310$9bwG5sn7 ですよ」と限定公開する相手に教えるのと同じになる。

※ファイル名に使えない文字があるので、これらを擬似パスワード(URL名)に使ってはいけない。"400 Bad Request"になってしまう。
 使えない文字 \ / : * ?" < > | %
 %はWindowsでは使えるが、Unix系ではBad Requestになる。

URLをパスワードにする

ブラウザのアドレス欄に入力して開くか、つぎのようなフォームで入力すれば開くようにすればよい。このほうがシンプルで、200行以上もあるCheckPassword80.jsを使う必要はない。余計なポップアップも表示されないのでユーザに分かりやすいのではないか。

パスワードを入力して[認証]ボタンを押してださい。

これを実装するコードは下記の通り。

<div class="box">パスワードを入力して[認証]ボタンを押してださい。
<form action="javascript:password()" name="passF">
<input type="password" size="15" name="pass">
<input type="button" onclick="password()" value="認証">
</form>
</div>
<script>
function password() { 
  key = document.passF.pass.value; 
  if(key == "") alert("パスワードを入力して下さい"); 
else document.location = key + ".html";
}</script>

パスワードが間違っているとき、HTTPエラー"404 Not Found"になる。ユーザに分かりやすく指示したいときは .htaccess を使って HTTP404 ページを用意すればよい。