Help us understand the problem. What is going on with this article?

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

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とします。
見た目としては、このようなイメージになります。
login.htmlイメージ

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

HTML

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

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

login.html
<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を書いていきます。

login.html
    // 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なのにバレない、かつデザイン出来るログインページを作ることができました!!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away