前言

歡迎來到鐵人賽的第二天！在昨天的環境設定完成後，今天我們要正式揮出第一刀，進攻 CTF 中佔比非常重的 Web Exploitation（網頁安全）。

許多人剛接觸網頁解題時，常會誤以為需要很厲害的開掛工具或複雜的漏洞利用（Exploit）。但事實上，許多初階題目考驗的反而是「你是否懂得觀察網頁的構造」。今天我們就從最基礎、也最不可或缺的技能開始：使用 F12 開發者工具檢視原始碼與 HTTP 標頭！

本日目標

透過 PicoCTF 的兩道經典入門題，掌握以下核心技能：

1. 學會切分並檢查 HTML、CSS 與 JavaScript 檔案中的隱藏註解。
2. 瞭解 HTTP 請求方法（GET vs POST vs HEAD）以及如何利用 curl 彈性發送特定的 HTTP Request。

實戰一：PicoCTF - Insp3ct0r

• 題目分類： Web Exploitation
• 題目敘述： 提示我們這是一個簡單的網頁，Flag 被拆成了好幾份藏在不同地方。
  

1. 解題思維

現代網頁通常由三大要素組成：

• HTML（結構）
• CSS（樣式與排版）
• JavaScript（互動與邏輯）

開發者在撰寫程式碼時，常會留下 <!-- 註解 --> 或 /* 註解 */ 來提醒自己或團隊成員。如果上線前沒有清理乾淨，這些註解就會被直接傳送到使用者的瀏覽器中。

2. 實戰步驟

1. 檢查 HTML 原始碼：

   • 開啟題目給予的網頁連結。
   • 在頁面空白處按右鍵選擇「檢視網頁原始碼」（或按 Ctrl + U）。
   • 滑動到程式碼最下方，即可找到第一部分 Flag：
   • Part 1/3: picoCTF{tru3_d3
     

2. 檢查 CSS 樣式檔：

   • 按 F12 開啟開發者工具（DevTools），切換到 Sources（來源）頁籤，或者在 HTML 原始碼中找到引用的 .css 檔案連結（如 mycss.css）。
   • 開啟該檔案並滑到最底部，發現第二部分 Flag：
   • Part 2/3: t3ct1ve_0r_ju5t
     

3. 檢查 JavaScript 腳本檔：

   • 同樣在 Sources 或原始碼中找到引用的 .js 檔案（如 myjs.js）。
   • 開啟後滑到最下方，成功取得最後一部分 Flag：
   • Part 3/3: _lucky?302945a7}
     

4. 組合 Flag：

   • 將三段拼接起來，得到完整 Flag：picoCTF{tru3_d3t3ct1ve_0r_ju5t_lucky?302945a7}

實戰二：PicoCTF - Get AHEAD

• 題目分類： Web Exploitation
• 題目敘述： 頁面上有兩個按鈕可以切換背景顏色（紅/藍），提示我們能否找出特別的 HTTP Request。
  

1. 解題思維

瀏覽器向伺服器請求網頁時，會使用 HTTP 方法（HTTP Methods）：

• GET：最常見的請求，用來「獲取」網頁內容（伺服器會傳回 Header + Body）。
• POST：常用於表單傳送資料。
• HEAD：與 GET 非常相似，但伺服器只會傳回 HTTP Header（標頭），不會傳回 Body（內文）。

題目名稱取名為 "Get AHEAD"，雙關語提示我們嘗試發送 HTTP 的 HEAD 請求！

2. 實戰步驟

使用 Linux Terminal 指令 curl

我們在 Day 01 安裝的 curl 工具這時候就派上用場了！使用 -I（或 --head）參數可以指定只發送 HEAD 請求並印出回應標頭：

curl -I http://<題目給定的網址:埠號>/
![https://ithelp.ithome.com.tw/upload/images/20260916/20184211kAj8IWF8vc.png](https://ithelp.ithome.com.tw/upload/images/20260916/20184211kAj8IWF8vc.png)

這條指令是 Linux 中用來向伺服器發送 HTTP 請求並觀察回應的核心工具，以下為你拆解每個部分的原理與原因：

核心指令解析

• curl
  是一個在 Terminal 中傳輸資料的命令列工具。它可以發送各種 HTTP 請求（如 GET、POST、HEAD），並將伺服器回傳的結果直接顯示在螢幕上。

• -I（或 --head）
  這是最關鍵的參數！預設情況下，curl 發送的是 GET 請求（會抓取整個網頁 HTML 內文）。加上 -I 參數後，curl 會改為發送 HEAD 請求。

  HEAD 請求的作用： 告訴伺服器：「我只需要 HTTP 標頭（Headers），請不要傳回網頁內文（Body）。」

  在 Get AHEAD 這道題中，Flag 被伺服器藏在了 Response Header 的 flag: 欄位裡，所以加上 -I 能讓你直接拿到完整的 Headers 資訊。

• http://<題目給定的網址:埠號>/
  這是題目伺服器的網路位址：

  • http://：通訊協定名稱。
  • 網址（Host）：題目伺服器的 IP 或網域（例如 mercury.picoctf.net）。
  • :埠號（Port）：伺服器開放該網頁服務的通訊埠（例如 :15931），HTTP 預設是 80，但 CTF 題目常使用自訂的特殊埠號。

💡 一秒看懂 GET 與 HEAD 的差異

• curl http://... (GET 請求)
  伺服器回應：[Header 資訊] + [整個網頁的 HTML 原始碼]
• curl -I http://... (HEAD 請求)
  伺服器回應：[Header 資訊]（乾淨俐落，正好露出藏在 Header 裡的 Flag）

💡 資安觀念總結與筆記

1. 前端沒有秘密： 任何傳送到使用者瀏覽器的內容（HTML、CSS、JS、圖片 Metadata）都是完全公開的。絕對不能將敏感資訊（如密碼、金鑰、未公開的 API 測試網址）以註解或硬編碼（Hardcode）方式留在前端。
2. HTTP 標頭（Headers）也是資訊藏匿處： 除了網頁看得見的內文外，HTTP Response Header 也是傳遞系統資訊（如 Server 版本、Cookie、自訂 Header）的常見管道。