パスワード認証によるアクセス制限を手軽に使いたい!

JavaScriptを使ってパスワードの入力を求める簡単認証機能

JavaScriptを使ってパスワードの入力を求める簡単認証機能

パスワードを入力しないとアクセスできない秘密のページを作りたい場合、いくつかの方法があります。例えば、ウェブサーバの基本認証(Basic認証)機能を利用したり、認証用のCGIを作成して使うなどの方法があります。

しかし、「そこまで強固な認証は要らないので、複雑なことはせず、とにかく簡単にアクセス制限を実現したい」という場合もあるでしょう。そのような場合は、JavaScriptを使った手軽なパスワード認証方法を使ってみてはいかがでしょうか。

完全ではない(脆弱な)代わりに、手軽に使えるJavaScript認証

強固ではない分、手軽な認証

強固ではない分、手軽な認証機能

JavaScriptを使ったパスワード認証は、「なんちゃって認証」とでも言えばよいか、完全なアクセス制限にはなりません。認証後のURLが第三者にバレるだけで、(URLを直接指定すれば誰でも閲覧可能なため)認証を経ずにアクセスできてしまいます。つまり、「認証」と呼べるほどの機能ではありません。

しかし、その分、とても簡単に作れるメリットがあります。

  1. 数行のスクリプトを記述するだけで作れる
    HTMLソース内に、ほんの数行のJavaScriptソースを記述するだけで実現できます。
  2. 特殊な機能は不要
    認証部分はJavaScriptだけで作るため、ウェブサーバ側に特殊な機能は必要ありません。どんなウェブスペース上でも使えますし、ローカル上でも動きます。

「第三者に見られても困るわけではないけれど、おおっぴらに公開したいわけではない」というような、軽いアクセス制限を施したい場合に活用すると良いでしょう。

JavaScriptソースを見られても、パスワードはバレない

ソースを見られても大丈夫 (ソース内にパスワードは書かない)

ソースを見られても大丈夫 (ソース内にパスワードは書かない)

「なんちゃって認証」とでも言うべき、「ないよりはマシ」という程度のアクセス制限方法とは言っても、ソースを閲覧するだけでパスワードがバレるほど簡素なわけではありません。

JavaScriptを利用しますが、ソース内にパスワードを記述しなくて済む方法があります。どこにもパスワードは記述しないため、アクセス者がHTMLやJavaScriptのソースを見たとしても、パスワードはバレません。

JavaScriptを使ったパスワード認証ページのサンプル

JavaScriptを使った簡単パスワード認証サンプルページ

JavaScriptを使った簡単パスワード認証サンプルページ

今回ご紹介する方法で作成したパスワード認証機能を使ったサンプルページを用意しています。実際にブラウザでアクセスして、パスワードの入力を試してみて下さい。

JavaScriptを使った簡単パスワード認証サンプルページ


 
今回は、このような、JavaScriptによる簡単なパスワード認証機能を作る方法をご紹介いたします。なお、もっとしっかりした認証機能が必要な場合は、基本認証(Basic認証)機能などを使うと良いでしょう。詳しくは、記事「基本認証でアクセス制限をかける方法」で解説していますのでご参照下さい。

それでは、次のページから、JavaScriptを使ったパスワード認証の記述方法を見ていきましょう。とても短い記述量で実現できます。