8946 Take#２ - フルスタックエンジニアへの道

今回は「http://www.hackerschool.jp/hack/」の正答率が2番目に高い(2019/07/28現在)「Take#２」を解いていきたいと思います。

http://www.hackerschool.jp/hack/www.hackerschool.jp

環境

Windows10
Google Chrome

Take#２

Take#２にアクセスすると、下図のような「id」と「パスワード」を入力するフォームがあるページが出てくると思います。Take#１同様、このidとパスワードを入手しなければならないようですね。

今回も手始めに、「突破する！」を押すとどのような動作をするのかを確認していこうと思います。
「[F12]」(もしくは、右クリックをして「検証」)を押して、デベロッパーツールを開き、「突破する！」のボタンの箇所を特定します。
デベロッパーツールが出たら、突破する！のタグがどこにあるかを確認します。上図左上にある赤枠のマウスのカーソルのようなマークをクリックして、「突破する！」をクリックします。すると、「突破する！」の箇所がハイライトされるはずです。

ここで、onclick属性に注目してみると「fnFormSubmit()」という関数が指定されていて、ボタンが押されるとこの関数を実行するようになっているようです。この関数がどのようなものなのか、確認していきましょう。

このHTML内で関数を検索するために、「fnFormSubmit()」をダブルクリックして選択した状態にし、「[Ctrl]+[F]」を押します。すると、自動的に検索バーに文字が入力されます。

この状態で「Enter」を押下すると、、、

何やらif文で、「入力したid(input_id)と『login_id』が等しいかつ、入力したパスワード(input_pass)と『login_pass』が等しいか」という条件が設定されています。ですが、この「login_id」と「login_pass」の宣言が同じscript要素内には、見当たりません。
どこかに記述されていないかと、少し上にスクロールしてみると、、、

ありました！
script要素のsrc属性で「/hack/js/password.js」というパスで外部参照しています。おそらく、このpassword.jsファイルにlogin_idとlogin_passが書いてあるに違いありません！(名前がもう怪しい)
ここで、ファイルにアクセスするために、ファイルのパスを使うのもいいのですが、ブラウザにダウンロードされているはずなので、今回はそれを見たいと思います。
ダウンロードされたものをみるためには、デベロッパツール上部にある別のタブを開きます。今みているHTMLは「Elements」というタブを開くと表示されるもので、ダウンロードしたものを開くには「Sources」タブを開きます。(下図赤枠部分をクリック)