ホームページ作成/アクセス制限・認証、サイト内検索

JavaScriptでパスワード認証を設定! 簡単な閲覧制限

JavaScriptでパスワード認証を設定!HTMLに数行のJavaScriptを加えるだけでパスワードによる認証機能を作る方法を解説します。「ウェブサイト上でパスワード付きのアクセス制限を設定したい、でもBasic認証やCGIを使う複雑なことはしたくない」という場合には、JavaScriptを使った手軽なログイン認証機能を使ってはいかがでしょうか。完全な制限にはならない分、とても簡単にホームページの閲覧制限ができます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

JavaScriptでパスワード認証を設定!

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

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

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

しかし、個人サイトなどでは「そこまで強固な認証機能は要らないので、複雑なことはせず、とにかく簡単にアクセス制限を設定したい」という場合もあるでしょう。そのような場合は、JavaScriptでパスワードの入力を求める手軽な認証方法を使ってみてはいかがでしょうか。
 

完全ではない(脆弱な)代わりに、簡単に作れるJavaScriptでの認証機能

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

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

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

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

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

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

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

JavaScriptを利用してパスワードの入力を求めるものの、HTMLソース内にもJavaScriptソース内にもパスワードを記述しておく必要はありません。どこにもパスワードは記述しないため、アクセス者がHTMLやJavaScriptのソースを見たとしてもパスワードは判明しません。
 
ソース内にパスワードを書かずに済むため、ソースを見られてもパスワードがバレることはない

ソース内にパスワードを書かずに済むため、ソースを見られてもパスワードがバレることはない

 

HTML+JavaScriptでの、パスワード付き認証ページのサンプル

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

表示例は下図の通りです。ログインのための認証画面のようなボタンが1つ表示されています。ボタンを押すと、JavaScriptでパスワードの入力が求められます。正しいパスワードを入力すると秘密のページに移動できますが、パスワードの正誤判定をJavaScriptで実行しているわけではないところがポイントです。
 
JavaScriptでパスワード入力を求める簡単認証サンプルページ

JavaScriptでパスワード入力を求める簡単認証サンプルページ


今回は、上記のようなパスワードによる簡単な認証機能をHTML+JavaScriptで作る方法をご紹介いたします。

それでは次のページから、JavaScriptを使ったパスワード認証の記述方法を見ていきましょう。サーバ側の設定などは一切不要で、とても短い記述量で作れます。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます