3.1 · 客户端 vs 服務器端

目標： 決定什麼在瀏覽器跑、什麼在服務器跑。

代碼在哪跑

邊	跑在	語言
客户端	用户瀏覽器	HTML、CSS、JavaScript
服務器端	Web 伺服器	PHP（Python、Node.js、Ruby、Java…）

各自擅長

工作	客户端	服務器端
UI 互動（點擊、動畫）	✓	✗
提交前實時表單反饋	✓	✗
認證、密碼哈希	✗	✓
資料庫訪問（帶憑證）	✗	✓
上載到儲存	✗	✓
必須可信的業務邏輯	✗	✓
搜索引擎優化（渲染頁面）	部分	✓（服務器渲染）

黃金安全規則

永不信任客户。 任何到服務器的東西都可被改或偽造。服務器端再校驗一切。

客户端校驗 ：用户便利
服務器端校驗：你最後的防線

簡單流程

瀏覽器 (JS)                   服務器 (PHP)                  DB (MySQL)
   │                              │                              │
   │ ── 點擊「註冊」 ─────────▶  │                              │
   │                              │ 檢輸入、哈希密碼              │
   │                              │ ──── INSERT INTO users ────▶ │
   │                              │  ◀── ok ─────────────────────│
   │ ◀── 「歡迎」響應 ────────── │                              │

實例 · 計算器

客户端瞬間算 2 + 3 = 5 —— 無需服務器往返。許多小 UI 任務（切深色模式、排序表、快校驗表單）屬客户端。

一旦需保存結果以便下次（或他人）取，必須談服務器。

學生常見錯誤

• 關鍵校驗只放客户端（任何人都能禁 JS）。
• 在 JavaScript 裏存憑證。
• 因 UI 沒篩把巨 JSON 送服務器。
• 在 JS 跑服務器能更快做的重算。

考試式題目

題（4 分）： 區分客户端與服務器端腳本。識別下列各由哪邊處理：

(a) 輸入時顯示「密碼太弱」提示。 (b) 儲存前驗證同密碼是否符合策略。 (c) 查產品當前庫存。 (d) 給下拉菜單做動畫。

參考答案：

• 客户端在瀏覽器用 JavaScript 跑；能瞬時響應用户動作，但不可信（用户可改）。
• 服務器端在 web 服務器用 PHP/Python/… 跑；有資料庫與可信秘密的訪問。

(a) 客户端 —— 輸入時即時 UI 反饋。 (b) 服務器端 —— 不論客户做什麼都要強制；客户校驗只為便利。 (c) 服務器端 —— 須查資料庫，客户直接訪問不了。 (d) 客户端 —— 純視覺動畫；無需服務器參與。

關鍵要點

• 客户端給 UI / 便利；服務器端給信任 / 資料。
• 總要服務器端校驗。

➡️ 下一節：3.2 JavaScript 基礎