Webサイト制作におけるJavascriptを用いた簡易パスワード認証（設定）

HTML Javascript

Webサイト制作において、グループのメンバーなど、特定の人たちだけにページを見せたい場合というのは少なからずあると思う。

そんなときに使えるJavascriptでの簡単な（擬似）パスワード認証（設定）の方法をまとめておく。

ページ内のボタンからパスワード入力ウィンドウを立ち上げる場合

フォームのinputタグにクリックイベント（onClick）を用いて、ボタンを押すとパスワード入力ウィンドウが立ち上がるようにする。

そして、入力されたパスワードと同じ名前のHTMLファイルがあった場合に、そのHTMLファイルへ移動するようにする。

以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易パスワード認証</title>
<script>
  function password(){
    var PASS = prompt('パスワードを入力してください。');
    location.href = PASS+'.html';
  }
</script>
</head>
<body>
<form>
  <input type="button" value="メンバーページへ" onClick="password()">
</form>
</body>
</html>
indexページのテキストリンクから認証ページへ飛ばす場合

indexページと認証ページとを別々に用意し、indexページ内に認証ページへのテキストリンクを設定する。そこをクリックすると、認証ページへ移動するとともに入力ウィンドウが立ち上がるようにする。

以下、indexページのコード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メンバーページの入口</title>
</head>
<body>
<p><a href="pswd.html">Web制作科メンバーページへ。</a></p>
</body>
</html>

indexページに必要な機能としては、認証ページへと移動する（普通の）テキストリンクのみとなる。

以下、認証ページのコード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>パスワード認証</title>
<script>
    PASS = prompt('パスワードを入力してください。');
    location.href = PASS + '.html';
</script>
</head>
<body>
</body>
</html>

認証ページには特に関数（function〜）を指定しない状態でscriptタグ内に直にパスワード認証のためのコードを書く。そうすることで、ページへの移動とともに自動で入力ウィンドウが立ち上がるようになる。

両方に共通したポイントとしては、入力されたパスワードを変数PASSに格納することと、
認証後に移動させたいページの名前をパスワードと同じにしておくことである。

こうすることで、ソース内にパスワードを記述することなく、パスワードを知っている人だけをPASSへ格納されている名前のページ（移動させたいページ）へと導くことができる。

いわゆるセキュリティ面などを考慮したパスワード認証にはならないが、簡単に限定した人だけを特定のページへ移動させたい場合に使える方法であると考えられる。

ちなみにソース内にパスワードを書くことを避ける理由は、ソースは誰にでも簡単に見ることができてしまうためである。