WEBデザイナーのあやおり子です。

WEBデザイナーは転職するときにポートフォリオを作りますが、仕事で作った作品はさすがに一般公開できません。

その時に鍵をかける必要がありますが、DBを使ってパスワードを管理する器用なプログラミングは無理です。

そんな時に使われる主なやり方がBasic認証(基本認証)です。
https://allabout.co.jp/gm/gc/23780/

しかし、私はWEBデザイナー。
アプリのログイン画面のようにHTMLでデザインしたい！！

そう思い、今回はBasic認証(基本認証)を使わずに鍵をかけられる方法を探しました。

Javasctiptなのにバレずに鍵をかける方法

RSA公開鍵などの方法もありますが、ライブラリを使わずになるべくシンプルに鍵をかけたいです。

検索したなかで、私がいいなと思った方法がこちらのサイトに書いてありました。
https://allabout.co.jp/gm/gc/23839/

ボタンを押すとパスワードを入力するアラートが表示され、
文字を入力すると、入力した文字+.htmlファイルが表示されるという仕組みです。

私はこの機能を使って、入力フォームのようにパスワードを入力することに挑戦しました。

※かなり厳重に鍵をかけていますが、絶対大丈夫かは定かではありません。自己責任でお願いします

ログインページの作り方

ログインするページをlogin.htmlとします。
見た目としては、このようなイメージになります。

また、パスワードを入力した後のパスワードページをpassword.htmlとします。

HTML

ログインする部分のHTMLです。

formタグの onsubmit="return false;"が重要ポイントです。
これを指定しないでEnterボタンを押すとPOST送信されてしまい、きちんとページ遷移ができない場合があります。


<body>
  <h1>パスワードを入力してください</h1>
  <form name="pwform" onsubmit="return false;">

    <!--　パスワードを入力する -->
    <input type="password" name="txtb" value="">

    <!--　送信したらjavascriptのtbox()の中身が動く -->
    <input type="button" value="送信" onclick="tbox()">

　　　　　　　　<!--　送信したらjavascriptのclr()の中身が動く -->
    <input type="button" value="リセット" onclick="clr()">

  </form>
<body>

また、パスワードページには、検索ロボットを弾く設定を書きます。

※.htaccessファイルにも同様に弾く設定を書きますが、100%弾く保証が無いので、念には念をいれて重複させて書いています。

password.html

<meta name="robots" content="noindex">

.htaccessファイル

次に、.htaccessファイルを編集します。
.htaccessを設置すると、認証・転送・制限などの見るときの機能を設定することができます。

こちらでは、検索ボットを弾くことと、ログインページの外部アクセス禁止の設定をしていきます。

.htaccess


<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>

order deny,allow

# パスワードページ(password.html)の場合
<Files password.html>

# 検索ボットの巡回を弾く設定
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Slurp" shutout

# ログインページ(hogehoge.comは、自分のサイトのURLに設定する)
SetEnvIf Referer "^https://hogehoge\.com/login.html" ref_ok
SetEnvIf Referer "^http://hogehoge\.com/login.html" ref_ok

order Deny,Allow
Deny from all
allow from env=ref_ok

</Files>

Javascript

最後に、javascriptを書いていきます。

    // onclick="tbox()" が押されたら
    function tbox(){

       // <form name="pwform">内の <input name="txtb">　の値を取得
       var str = document.pwform.txtb.value;

       // もし　<input name="txtb">　の値が半角英数字以外だったら、アラートを出す
       if( /\W+/g.test(str) ) {
          alert("半角英数字のみを入力して下さい。");
       }

       // もし　<input name="txtb">　の値に何かしら入っていたら、入力値.htmlに移動する
       else if( str != null ) {
            location.href = str + ".html";
       }

    }

    // onclick="clr()" が押されたら、フォームの値を消す
    function clr(){
      document.pwform.txtb.value="";
    }

完成

Javascriptなのにバレない、かつデザイン出来るログインページを作ることができました！！！

Basic認証(基本認証)はダサかったので、他の方法を考えてみた。

Javasctiptなのにバレずに鍵をかける方法

ログインページの作り方

HTML

.htaccessファイル

Javascript

完成