フルスタックエンジニアへの道

「フルスタックエンジニアになりたい。。。いや、なってやる!」という備忘録

8946 Take#23

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

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

環境

Take#23

Take#23にアクセスすると、下図のような「パスワード」を入力するフォームがあるページが出てくると思います。今回は、パスワードを入手しなければならないようですね。
また、今回はいつもとは違って最初からヒントが出ています!
そのヒントは「Hint:右クリックは利用できません。」です。

f:id:ryasshi:20190807130425p:plain

手始めに、「突破する!」を押すとどのような動作をするのかを確認していこうと思います。
[F12]」(もしくは、右クリックをして「検証」)を押して、デベロッパーツールを開き、「突破する!」のボタンの箇所を特定します。
と、普段のように「(もしくは、右クリックをして「検証」)」と記載しましたが、どうやら「Hint:右クリックは利用できません。」は、ここで右クリックができないことを指しているようです。

f:id:ryasshi:20190807131226p:plain

ということで、今回は右クリックを使用せずに、「[F12]」でデベロッパーツールを開いて「突破する!」のボタンの箇所を特定しましょう。
デベロッパーツールが出たら、突破する!のタグがどこにあるかを確認します。上図左上にある赤枠のマウスのカーソルのようなマークをクリックして、「突破する!」をクリックします。すると、「突破する!」の箇所がハイライトされるはずです。

f:id:ryasshi:20190807132156p:plain

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

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

f:id:ryasshi:20190807132811p:plain

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

f:id:ryasshi:20190807133055p:plain

if文で、「入力した文字列」と「pass」変数に代入した文字列を比較して正しければ正解になっています。 つまり、もう答えが分かってしまいましたね笑
ではこれを入力して

f:id:ryasshi:20190807133436p:plain

突破できました!

f:id:ryasshi:20190807133528p:plain

あとは解説を読んで終わりです、と思いましたが、今回の問題は単純にデベロッパーツールを右クリックなしで開けるかという問題でした。

f:id:ryasshi:20190807133708p:plain


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