前言

在前幾天的文章中，我們學會了觀察 HTTP 標頭與修改 Cookie。今天我們要探討一個許多初學者（甚至部分開發者）常犯的經典錯誤——把密碼驗證邏輯放在前端（Client-Side）。

許多人以為只要網頁上的輸入框有密碼檢查、不符合就不讓你登入，網站就是安全的。但事實上，傳送到使用者瀏覽器的所有 JavaScript 程式碼都是完全公開且可被分析的。今天我們就透過 PicoCTF 的經典題目 dont-use-client-side，看看攻擊者如何破解前端驗證！

本日目標

透過 PicoCTF 實戰，掌握以下核心技能：

1. 瞭解客戶端驗證（Client-Side Validation）與伺服器端驗證（Server-Side Validation）的本質差異。
2. 學會分析前端 JavaScript 程式碼邏輯，將被拆解切碎的 Flag 重新拼湊復原。

實戰題目：PicoCTF - dont-use-client-side

• 題目分類： Web Exploitation
• 題目敘述： 題目提供了一個登入頁面，要求我們輸入正確的密碼以驗證身分並取得 Flag。
  

1. 解題思維

當我們造訪題目網頁時，會看到一個密碼輸入框與一個「Verify」按鈕。

點擊按鈕時，網頁並沒有向後端伺服器發送 GET 或 POST 請求，而是直接在瀏覽器內部跳出警告視窗。這意味著：密碼的比對邏輯 100% 是在瀏覽器端發生的！

既然是在客戶端驗證，那麼正確密碼（或 Flag）一定就藏在網頁的 JavaScript 程式碼中。

2. 實戰步驟

步驟一：開啟 DevTools 檢視原始碼

1. 按 F12 開啟開發者工具（或按 Ctrl + U 檢視網頁原始碼）。
2. 在 HTML 中找到 <script> 標籤，會看到一個名為 verify() 的 JavaScript 函式：
   

步驟二：拆解與拼湊 Flag

觀察程式碼，可以發現作者將我們輸入的密碼checkpass使用substring(start, end)切成好幾段進行字串比對，其中變數split = 4（代表每段長度為 4 個字元）。

注意： 題目為了干擾我們，if條件判斷的順序是亂序的！我們需要依照substring的索引範圍從0開始從小到大排序：

(0, split) (0 ~ 4): 'pico'

(split, split*2) (4 ~ 8): 'CTF{'

(split*2, split*3) (8 ~ 12): 'no_c'

(split*3, split*4) (12 ~ 16): 'lien'

(split*4, split*5) (16 ~ 20): 'ts_p'

(split*5, split*6) (20 ~ 24): 'lz_2'

(split*6, split*7) (24 ~ 28): 'eb02'

(split*7, split*8) (28 ~ 32): 'b45}'

將這些子字串按索引順序組合起來，即可順利取得 Flag！

Flag: picoCTF{no_clients_plz_2eb02b45}