CTFのWeb問題においてElementsタブは欠かせないツールです。display:noneでCSSレベルで隠されている要素の中にフラグが入っていたり、ボタンにdisabled属性がついていてそれを外すと先へ進めたりと、「Elementsタブで書き換えるだけ」で解けてしまう問題が実際に多く出題されています。

Ctrl+U（または右クリック→「ページのソースを表示」）でHTMLを確認する方法を覚えます。しかし、Elementsタブとは根本的に異なるものを表示しています。この違いを理解することがWeb CTFの第一歩です。

Ctrl+Uは「生のHTML」を読むだけで属性の変更はできません。ElementsタブはJS実行後の現在のDom状態を表示し、属性やスタイルをその場で書き換えられるためCTFで真価を発揮します。

属性値を変更するには、対象の属性（例：style="display:none"）をダブルクリックします。編集モードになり、キーボードで新しい値を入力してEnterを押すだけで変更が確定します。

このページには「VIPメンバー専用」と書かれた非表示エリアが存在します。CSSで隠されているだけで、HTMLの中にはすでに存在しています。Elementsタブを使ってその要素を表示させ、中に書かれたフラグを見つけてください。

第5話では、Elementsタブを使ってHTMLをリアルタイムで書き換える方法を学びました。Ctrl+Uのソース表示との違い、基本的な操作手順、そdCTFで顛出のテクニック5選を通じて、フロントエンドだけのアクセス制御がいかに脆弱かを体感できたはずです。