點閱： 36
在現代網頁應用中，資安早已成為網頁開發不可分割的一部分，不再只是後端工程師的責任，而是前端、後端、甚至 UI/UX 設計都必須共同考量的一環。其中一個最常見、也最容易被忽略的攻擊手法，就是 CSRF（Cross-Site Request Forgery，跨站請求偽造）。本篇文章將以「網頁設計與實務開發」的角度，帶你認識什麼是 CSRF Token、它為什麼重要，以及在實際網站中該如何使用。
CSRF 是一種利用「使用者已登入狀態」進行的攻擊方式。
簡單來說：
使用者已登入 A 網站（例如銀行、後台管理系統）
A 網站透過 Cookie 維持登入狀態
使用者在未登出情況下，造訪了惡意網站 B
惡意網站 B 偷偷對 A 網站送出請求
A 網站誤以為是使用者本人操作，而執行了該請求
⚠️ 重點在於：瀏覽器會自動帶上 Cookie，攻擊者不需要知道使用者帳密。
很多人會以為 CSRF 是「後端的事」，但實際上：
表單（Form）結構是前端產生的
AJAX / Fetch 請求多半由前端撰寫
Token 通常需要嵌入 HTML 或 JavaScript
也就是說：
CSRF 防護是一種前後端協作的設計，而不是單一層面的問題。
CSRF Token 是一段由伺服器產生、用來驗證請求合法性的隨機字串。
它具備幾個特性：
每位使用者不同
通常每個 Session 或每次請求都不同
攻擊者無法從其他網站取得
伺服器只會接受「帶有正確 Token」的請求。
以下是一個典型流程：
使用者登入網站
伺服器產生一組 CSRF Token
Token 被嵌入在頁面中（HTML 或 JavaScript）
使用者送出表單或 AJAX 請求
請求中一併送出 CSRF Token
伺服器驗證 Token 是否正確
驗證通過才執行動作
只要 Token 不正確或不存在，請求就會被拒絕。
在傳統表單中，CSRF Token 通常是一個隱藏欄位：
<form method="post" action="/profile/update">
<input type="hidden" name="csrf_token" value="伺服器產生的隨機字串">
<input type="text" name="username">
<button type="submit">儲存</button>
</form>
✔ 使用者看不到
✔ 攻擊者無法從外部網站取得
現代網站大量使用 AJAX，CSRF Token 常見放在：
HTTP Header
JavaScript 變數（由後端注入）
概念上會是：
fetch('/api/update', {
method: 'POST',
headers: {
'X-CSRF-TOKEN': csrfToken
},
body: JSON.stringify(data)
});
伺服器只要驗證 Header 中的 Token 即可。
很多初學者會問：
「Cookie 不是已經有 Session 驗證了嗎？」
問題就在於：
Cookie 會被瀏覽器自動送出
攻擊者可以誘導瀏覽器發送請求
CSRF Token 的目的，就是多加一層「使用者主動性驗證」。
從設計角度來看，好的 CSRF 防護應該是：
✅ 對使用者無感
✅ 不影響操作流程
❌ 不要求使用者額外輸入驗證碼
CSRF Token 正是符合這個條件的解法，安全卻不干擾體驗。
建議至少保護以下請求：
修改資料（POST / PUT / PATCH）
刪除資料（DELETE）
任何會改變系統狀態的行為
❗ 不建議只用 GET 來做資料修改。
從網頁設計與開發的角度來看：
CSRF 是一種「利用瀏覽器特性」的攻擊
CSRF Token 是目前最主流、有效的防禦方式
前端負責「正確送出 Token」
後端負責「嚴格驗證 Token」
如果你正在打造一個可公開使用的網站，那麼 CSRF Token 並不是進階選項，而是基本配備。
希望這篇文章能幫助你在網頁開發的過程中，更清楚理解 CSRF 是什麼、為什麼它是不可或缺的安全機制，以及 CSRF Token 在其中扮演的關鍵角色。
台南網頁設計推薦頂控網頁設計團隊