【PicoCTF】WebインスペクターとBase64解読で隠し要素を暴く！「WebDecode」攻略アプローチ
今回は、Webアプリケーションの構造調査とクライアント側のデータ隠蔽の仕組みを学ぶWeb Exploitationの入門問題「WebDecode」に挑戦しました！
ブラウザの開発者ツール（Webインスペクター）を駆使してページを構成するファイル群を走査し、HTML内に隠された難読化データを見つけ出して復元するまでのアプローチをまとめました。
1. 開発者ツールによるファイルとソースの調査
Webアプリケーションの構造を理解するため、ブラウザの標準機能である「Webインスペクター（開発者ツール）」を活用します。
・リンクや関連ファイルの走査： トップページだけでなく、サイト内に含まれる別のページ（例:about.htmlなど）のソースコードや、構造を構成するファイルをくまなく確認。
・カスタム属性の発見：about.htmlのソースコード内にあるセクションタグを調査したところ、通常の表示テキストとは別にnotify_true="..."という怪しいカスタム属性が埋め込まれていることが判明。
2. Base64エンコード文字列の識別と特徴
発見した属性値には、英数字と記号で構成された独特の文字列が設定されていました。
エンコード方式の推測
文字列例:cGljb0NURnt3ZWJfc3VjYzNzc2Z1bGx5X2QzYzBkZWRfZjZmNmI3OGF9
・特徴の把握： 大文字・小文字・数字が綺麗に並んでおり、記号の少なさと全体的な雰囲気から「Base64エンコード」であると仮説を立てる。
3. ターミナルを用いたBase64のデコード
特定したBase64文字列を、Linux環境のコマンドラインツールを使ってデコードし、本来の文字列を復元します。
デコードの実行echo "cGljb0NURnt3ZWJfc3VjYzNzc2Z1bGx5X2QzYzBkZWRfZjZmNmI3OGF9" | base64 -dbase64 -dコマンドにより、隠されていた機密情報を正確に抽出し、目的のテキストを取得することに成功。
【実務的な教訓】
Webブラウザに読み込まれるフロントエンドのデータ（HTML、CSS、JSなど）は、ユーザーが開発者ツール等で自由に閲覧・改変できるという前提（"Client-side is not trustable"）があります。実務のセキュリティ診断や開発においても、機密情報をフロントエンドのコードや属性にハードコードしない設計の重要性を再認識する良い機会となりました。
4. まとめ
・Webインスペクターを活用した、HTML・関連ファイル・カスタム属性の体系的な走査
・Base64エンコード特有の文字列フォーマットの識別と切り分け
・Linuxのbase64 -dコマンドによるスムーズな復元手法の確立
フロントエンドの仕組みとクライアント側の検証手法を基礎から学べる素晴らしい問題でした。このアプローチを活かして、次のWeb問題もロジカルに攻略していきたいと思います！
PR