快速上手

教師研習與共用電腦使用，請先看開始、保存與離開。

平台介紹

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 草稿與解題進度保存在本機。儲存警告出現時，先下載可取得的紀錄並另外保存未儲存文字，再依提示處理。
桌機寬度的螢幕	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. 等待執行環境就緒，並先完成沿用／清除的選擇，再貼入旗標並按「送出旗標」。
2. 驗證與保存期間會停用提交，兩個入口共用處理中狀態。
3. 答案判定與儲存結果分開顯示。答對但未完整儲存時，先匯出能取得的內容；重送會算另一次提交。
4. 目前無法驗證不等於答錯，請待執行環境就緒後重試。
5. 攻擊紀錄建立後，未解出也能下載；已解出才提供滲透筆記下載入口。匯出選項與限制見筆記。

收合題目說明後，底部仍有交旗入口。已儲存的解題進度在沿用後顯示；讀取失敗有提示與重試，不會宣稱零完成。

工具面板總覽

面板	位置	提供什麼
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 的流量記錄只活在你目前這個頁面上，換頁或切換語系之後會整份清空。