自分用メモのようなもの。「こうすれば突破できちゃうよ！」みたいなのがあればコメントをください。
使用用途
このパスワード認証はあくまで簡易的なものです。そのため、使用用途はクイズや、ただ単にURLを入力しただけでアクセスされたくないようなページに使うのがいいと思われます。ユーザー認証などには使わないでください。しっかりとしたパスワード認証を作るなら、( https://www.websec-room.com/2015/03/15/2153 )などのページを参考にしてください。
このパスワード認証のメリット
- コード内にパスワードを記述しない(コードを見てもパスワードがわからない)
- もちろん毎回認証することが可能
このパスワード認証のデメリット
- パスワードが不正解だった場合、コンソールに ERR_FILE_NOT_FOUNDエラーが出力される。
方法
まずはパスワード認証ページを作ります。適当に「index.html」として以下のようなHTMLを書きます。
<input id="pass" type="passsword"></input>
<button id="enter">決定</button>
パスワード認証に成功した場合のHTMLファイルをbodyの中身だけで作成します。また、このファイル名をパスワードにするところがポイントです。[パスワード].htmlという名前にしましょう。abcdというパスワードなら、「abcd.html」といった具合です。
パスワードとなるファイル名はハッシュ化した方が安全だというコメントを頂きました。JavaScriptにはハッシュ関数がないので、ライブラリを入れるなどして対応してください。そこまでの安全性は求めずに利用するのであればそのままでもよいかと思われます。
続いてスクリプトを書きます。jQueryを使います。
$(() => {
const $pass = $("#pass");
const $enter = $("#enter");
$enter.on("click", () => {
$.ajax({
url: $pass.val() + ".html"
}).then(html => {
$("body").html(html);
}).catch(() => {
alert("パスワード認証に失敗しました");
$pass.val("");
});
})
$pass.on("keydown", e => {
if(e.keyCode === 13) $enter.trigger("click");
});
});
見ての通り、スクリプト内にパスワードは記述していません。また後半はEnterキーを押した場合の動作で、パスワード認証には直接関係のないおまけみたいなものです。alert("パスワード認証に失敗しました");のところは各自書き換えてください。
ES6の解説
ES6をガンガン使って書いています。一応軽く説明しておきます。
() => {}とhtml => {}
アロー関数というものです。名前の通り関数です。引数が一つの時はカッコが省略できるのでhtml => {}という記述になっています。
const
変数宣言です。varと似たようなものですが、関数スコープからブロックスコープになっています。また、constは定数を宣言し、書き換えられなくなります。似たようなものでletがあります。こちらは書き換え可能ですが、今回は必要なかったので使っていません。
jQueryの解説
続いてjQueryの解説です。
$().on()
これはイベントを追加します。第一引数にイベントの種類(この場合は"click"と"keydown")を、第二引数に関数を渡します。また、この関数には引数は渡されます。キー関係のイベントの場合、keyCodeプロパティでキーコードが取得できます。またEnterキーのキーコードは13です。
$.ajax
ajax通信をします、引数に渡すオブジェクトにurl: XXXXXを渡して、そのURLのファイルを取得し、メソッドチェーンで.done()で成功した場合の関数を渡します。また、その関数の第一引数でファイルの内容を取得できます。メソッドチェーンで.fail()に失敗した場合の関数を渡します。