快速上手

平台介紹

Web eXploitation Laboratory（WXL）是給學習者使用的 Web 資安挑戰平台。題目本身、你用來攻擊它的工具、以及對答案的比對，全部都在你自己的瀏覽器分頁裡執行。

• 開啟題目頁時會下載該題專屬的 runtime.wasm，題目應用程式的程式碼與檔案都封裝在裡面。
• 你送出的 flag 是在瀏覽器內的那個 WASM 模組裡比對的，不會送到任何伺服器。
• 你的筆記、攻擊紀錄與 Code 草稿只寫進這台瀏覽器的 IndexedDB 資料庫 challenge-tools，不會上傳；把這個網站的瀏覽器資料清掉，這些內容就一起消失且無法救回。
• 進站時網站會註冊一支名為 challenge-sw.js 的 Service Worker，它是題目網址能被瀏覽器攔下來的前提。它只接管 challenge-<題目 slug>.localhost 形式的主機名稱，其餘請求一律直接放行，也不做任何離線快取。

系統需求

需求項目	為什麼需要
能執行 WebAssembly 的瀏覽器	每個題目頁都會抓取一份 runtime.wasm 並在分頁內執行。
允許本站註冊 Service Worker	進站時會註冊 challenge-sw.js。沒有它，送往 challenge-<題目 slug>.localhost 的請求不會被攔截。
解題全程都要有網路連線	Python 執行環境是從外部 CDN 的 https://cdn.jsdelivr.net/pyodide/v0.29.3/full/pyodide.js 載入的。完全離線時 Python 題目跑不起來。首次載入需要下載數十 MB。
瀏覽器儲存空間（IndexedDB）可用	筆記、攻擊紀錄與 Code 草稿都住在 challenge-tools 資料庫。開不起來時，題目頁最上方會出現一條無法關閉的警告條，寫著這次作業沒有被記錄；答對之後「下載攻擊紀錄」那顆按鈕完全不會出現，只剩「下載滲透筆記」，而它下載到的是一份只有標題、沒有任何筆記的 Markdown。
桌機寬度的螢幕	Browser 面板的上一頁、下一頁、重新載入三顆鈕只在桌機寬度才會出現；手機寬度整組隱藏，只留下網址列與 Go。

Service Worker 註冊與 Pyodide 下載是最常讓面板卡住的兩件事。面板按不動、輸出遲遲不出現、筆記存不起來時，請看疑難排解。

快速開始步驟

步驟一：選題

1. 打開題目清單。每一列會顯示補到三位數的編號（例如 #003）、標題、難度徽章、類別徽章與日期，第二行是描述與標籤。
2. 用工具列篩選。搜尋框只比對標題、描述與標籤三個欄位，打進難度或日期文字不會有結果。停止打字 300 毫秒後清單才會更新。
3. 難度下拉選單是固定的四個英文選項：Easy、Medium、Hard、Mystery。類別下拉選單則由清單裡實際出現過的類別動態產生。難度徽章直接印出 frontmatter 的原始字串，中英文介面底下都是英文小寫。
4. 工具列右側的數字是目前篩選後剩下幾道題。右上角的按鈕可在預設的列表模式與格線模式之間切換。
5. 點一列即可進入該題。

#NNN 這個編號是檔案載入順序的序號，不是出題者指定的。新增或改名題目資料夾會讓編號整批位移，中英文兩份清單也各自獨立編號——不要用編號來指稱一道題目。

步驟二：在面板裡解題

1. 題目頁開啟時停在 Browser 分頁。分頁列預設有四個：Browser、Network、Repeater、Code，這些名稱在中英文介面底下都是寫死的英文。
2. 出題者可以限制提供哪些工具分頁，但 Browser 分頁一定保留，永遠不會消失。
3. Browser 面板的網址列預先填好該題專屬的 https://challenge-<題目 slug>.localhost/。它是一個可自由編輯的文字輸入框，按 Enter 或點 Go 就會導覽。
4. 注意導覽列右上角的狀態燈：閃動的黃點表示執行環境還在載入，綠點表示就緒，紅點表示失敗——把滑鼠移到紅點上可以看到實際的錯誤訊息。
5. Code 分頁的 Python 執行環境要等你第一次點開該分頁才開始下載，不是進題目頁就下載，所以第一次切過去會等一段時間。

步驟三：提交 flag

1. 把 flag 貼進提交欄位。它的提示文字是 CTF{...}，旁邊的按鈕寫著 Submit Flag，兩者都是寫死的英文。
2. 答對只會出現一行寫死的英文 Correct! Challenge solved.，旁邊才長出兩顆下載按鈕，一顆下載攻擊紀錄、一顆下載滲透筆記。這兩顆按鈕的文字有翻譯，旁邊那句話沒有。
3. 答錯也只有一行寫死的英文 Incorrect flag. Try again.。它不會告訴你哪裡錯，而且提交次數沒有上限。
4. 執行環境已就緒、且攻擊紀錄建立成功時，每一次提交（含答錯的）都會連同你輸入的原文被寫進該題的攻擊紀錄；答對時再多寫一筆 challenge_solved 事件並蓋上解出時間。

這一步有兩件事容易誤讀：

• Submit Flag 按鈕從來不會停用，也沒有處理中狀態。狀態燈還是黃點時就按下去，畫面一樣回一句 Incorrect flag. Try again.——那次提交被判為錯誤的真正原因是題目的 WASM 執行環境還沒載完，而且這一次提交也不會被寫進攻擊紀錄。看到失敗訊息之前，先確認狀態燈已經是綠點。
• 如果 challenge-tools 資料庫開不起來，攻擊紀錄根本沒有建立，於是答對之後那句英文賀詞旁邊只剩一顆下載按鈕。「下載攻擊紀錄」不是變灰，是整個不存在；「下載滲透筆記」仍然會出現，但按下去下載到的是一份沒有任何筆記的檔案。

把左側的題目說明收合之後，畫面底部會出現一條常駐的 flag 提交列，不必展開說明就能交答案。

工具面板總覽

面板	位置	提供什麼
Code Editor	Code 分頁	上方是 Python 編輯器、下方是輸出區，一開啟時高度比例為 65 / 35，中間有一條可拖曳的分隔線。含 Run 與 Stop 按鈕、每題各自的執行歷史紀錄，以及可調整自動完成、括號自動閉合與字型大小的設定浮層。見 Python Code Editor。
Browser	Browser 分頁	預先填好、可自由改寫的網址列，底下是渲染出來的回應；桌機寬度另有上一頁、下一頁與重新載入三顆鈕。上一頁與下一頁只是把先前存下來的畫面搬回來，不會重新發出請求。見 Browser 面板。
Network Traffic	Network 分頁	標題固定寫著 Network Traffic，旁邊顯示目前記錄筆數；表格有五欄 #、Method、URL、Status、Time，工具列右側有一顆 Clear。Browser 面板、Repeater 與 Code Editor 發出的請求都會進同一份記錄，沒有任何一個面板被排除。見 Network 與 Repeater。
Repeater	Repeater 分頁	一整塊可自由改寫的 Raw HTTP Request 純文字編輯區，預先填好一份 Host 為 challenge-<題目 slug>.localhost 的 GET / 請求，右側是已存 snapshot 的側欄，另有 Send 按鈕。在 Network 記錄展開某一列時會出現 Send to Repeater，按下會切到這個分頁並覆蓋編輯區原本的內容。見 Network 與 Repeater。
Pentest Notes	導覽列按鈕，點了才開啟面板	每題各自獨立的筆記，含 Markdown 預覽、搜尋框，以及新→舊／舊→新的排序切換。該題至少有一篇筆記時，按鈕上才會出現數字徽章。編輯區的文字只有在按下「儲存」的那一刻才會被存下來。見 滲透筆記。

Network 的流量記錄只活在你目前這個頁面上，換頁或切換語系之後會整份清空。