問題概要
picoCTFの「WebDecode」という問題の解説記事です。
- カテゴリ: Web Exploitation
- 難易度: Easy
問題文
解説
ステップ1: 問題の理解
問題文で、以下のように指示されていることから、ブラウザの開発者ツール（Web Inspector / DevTools）を使って、与えられたWebサイトを調査する必要があることがわかります。
Do you know how to use the web inspector?
Additional details will be available after launching your challenge instance.
ステップ2: Webサイトの調査
問題文のリンクからWebサイトにアクセスし、開発者ツール（DevTools）を使って調査を行います。 Webサイトは「HOME」「ABOUT」「CONTACT」の3つのセクションで構成されているようです。
HOMEセクションの調査
まず、HOMEセクションを調査します。
見た目上は特に問題なさそうです。
開発者ツール（Elementsタブ）を開き、HTMLコードを確認します。
特に怪しいコメントや属性は見当たりませんでした。
ABOUTセクションの調査
次に、ABOUTセクションを調査します。
こちらも見た目上は特に問題なさそうです。
開発者ツール（Elementsタブ）を開き、HTMLコードを確認します。
notify_true のような不自然なキーがあり、値として次の文字列が設定されていました。
問題名が「WebDecode」であることから、この値が何らかのエンコード文字列である可能性が高いです。
CONTACTセクションの調査
最後に、CONTACTセクションも確認します。
このセクション内には追加のヒント（コメント/隠し属性/埋め込みデータなど）は見当たりませんでした。
ステップ3: エンコードの判定とデコード
見つけた文字列がBase64エンコードされている可能性が高いため、デコードを試みます。
ステップ3-1: Base64デコード（CLI）
$ echo -n 'cGljb0NURnt3ZWJfc3VjYzNzc2Z1bGx5X2QzYzBkZWRfMDdiOTFjNzl9' | base64 -d
picoCTF{xxxxx}
※フラグはマスクしています。
フラグを取得できました。
ステップ3-2: Base64デコード（Python）
base64 -d が使いづらいこともあるので、Pythonでも同様にデコードできます。$ python3 - <<'PY'
import base64
s = 'cGljb0NURnt3ZWJfc3VjYzNzc2Z1bGx5X2QzYzBkZWRfMDdiOTFjNzl9'
print(base64.b64decode(s).decode())
PY
出力例
picoCTF{xxxxx}
※フラグはマスクしています。
使用したコマンドの軽い解説
base64
$ echo -n '<Base64文字列>' | base64 -d
echo -n は末尾の改行を出さないためのオプションです（改行があっても多くの場合は動きますが、癖として付けておくと安全です）。python3（Base64デコード）
python3 - <<'PY'
import base64
s = '...'
print(base64.b64decode(s).decode())
PY
base64 を使ってデコードします。まとめ
picoCTFの「WebDecode」では、ページ（ABOUTセクション）のHTMLに埋め込まれていたBase64文字列をデコードすることでフラグを取得できました。
▼ポイントは以下の通りです。
- まず開発者ツール（Elements）で、コメント/属性/スクリプト内の怪しい文字列を探す
- 見つけた文字列が英数字中心ならBase64を疑う（パディング
=がなくてもBase64の場合はあります） - CLIでもPythonでもよいので、素早くデコードして中身を確認する
体系的に学びたい人へ（おすすめ書籍）
今回のような「開発者ツールで情報が見える」系は、CTFの定番です。 実務でも、HTML/JSに不用意に情報を埋め込むと漏えいにつながるので、基礎をまとめて整理したい場合は次の本が参考になります。
▼体系的に学ぶWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践
閲覧ありがとうございました！