問題概要
picoCTFの「Unminify」という問題の解説記事です。
- カテゴリ: Web Exploitation
- 難易度: Easy
問題文
解説
ステップ1: 問題の理解
I don't like scrolling down to read the code of my website, so I've squished it. As a bonus, my pages load faster! Browse here, and find the flag!
問題文で、コードが圧縮（minify）されていることが示唆されています。 ブラウザでWebサイトを閲覧し、圧縮されたコードを展開（unminify）してフラグを見つける必要がありそうです。
ステップ2: Webサイトの調査
問題文のリンクからWebサイトにアクセスします。
見た目上は特に手がかりはありません。
検証ツールを開き、HTMLコードを確認します。
改行がなく、非常に読みづらいコードになっていますね。問題文でも言及されていた通り、コードが圧縮（minify）されていることがわかります。
手がかりはこのソースコード内にありそうなので、コードを展開（unminify）して読みやすくしましょう。
コードの展開（Unminify）
コードの展開には、オンラインのUnminifyツールを使用します。
- ソースコード全体をコピーします。
- unminify.com にアクセスします。
- コピーしたコードをペーストし、「Unminify」ボタンをクリックします。
以下のように、コードが展開されて読みやすくなりました。
ステップ3: フラグの発見
<p> タグ内のclass名としてフラグが含まれていることがわかります。
※フラグはマスクしています。
まとめ
picoCTFの「Unminify」では、minifyされて読みにくくなっているHTMLを整形（unminify）し、ソース中のフラグを見つけることでクリアできます。
▼ポイントは以下の通りです。
- 見た目に何もなくても、まずは開発者ツールでHTML/JS/CSSを確認する
- 1行に圧縮されていたら「minifyされている」と判断し、整形して読む
- “表示”ではなく“ソース”にヒントが埋まっている問題はWeb系CTFの定番
補足：開発者ツール(DevTools)を使えば簡単
開発者ツール(DevTools)を使えば、ブラウザ上で簡単にコードの整形が可能です。 今回は、問題の意図を理解するために外部ツールを使用しましたが、開発者ツール(DevTools)なら初めから整形されたコードを確認できます。
閲覧ありがとうございました！