webど素人が鍵付きページを作ってみた

はじめに

個人間で書類共有するためのページを作る必要があった。
webど素人の自分が簡単な鍵付きページを実装したメモ。

やりたいこと

• パスワードを入力して、正しければページを開く
  • ファイル名を入力して遷移する方法を使用
• 直接リンクを叩かれた場合にパスワード入力ページへリダイレクト
• 検索に引っかからないようにする

やったこと

0.事前準備

以下のファイルを作成。

├── index.html
├── goal.html
└── js_dir
    ├── password.js
    └── redirect.js

1.パスワード入力の実装

password.jsを実装。

password.js

let pass = prompt('パスワードを入力してください');
location.href = "./" + pass + ".html";

index.htmlのbodyに以下を追加。

index.html

<script src="./js/password.js"></script>

パスワードで入力してもらった値がそのまま遷移先になるという実装。
ここではユーザーがgoalと入力すればgoal.htmlに遷移できる。
goal以外が入力された場合は404になる。

2.直接リンクを叩かれた時のリダイレクトを実装

redirect.jsを実装。

redirect.js

var ref = document.referrer;

if (ref.match(/index/) != null) {
    // index.htmlから来た場合
} else {
    // index.html以外から来た場合
    location.href = "./index.html";
}

goal.htmlのbodyに以下を追加。

goal.html

<script src="./js/redirect.js"></script>

document.referrerを使うと遷移元の情報が取れるらしい。
これを使って、遷移元のurlにindexが入っている場合はそのまま表示し、
入っていない場合はindex.htmlに飛ばすように実装した。

3.検索に引っかからないようにする

goal.htmlのheadに以下を追加した。

goal.html

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

これで検索に引っかからないらしい。
（検証しようがないから信じてるだけ...）

結果

（スクショ貼れませんが）

• index.htmlを参照するとパスワードが聞かれる
  • goalを入力するとgoal.htmlが開く
  • goal以外を入力すると404になる
• goal.htmlを直接参照するとindex.htmlに自動で飛ぶ

webど素人でも1時間くらいで作成できたので、個人で使う分にはこのレベルでちょうどいいのかなと感じました。
大したことはしてませんが、ちょっと「web作った！」感があって楽しかったです。笑