身為前端工程師，我們每天都在處理使用者輸入——搜尋框、留言板、富文本編輯器。這些「信任邊界」正是駭客最愛下手的地方。你可能寫過一段看似無害的 v-html，或在表單裡塞了個 img onerror，卻不知道自己已經幫攻擊者開了一扇門。這一篇，我們用實戰的方式，把前端最常見的兩個漏洞——XSS 與 CSRF——從原理到防禦一次講清楚。
一、XSS 是什麼：當使用者的輸入變成你的程式碼
XSS（Cross-Site Scripting，跨站腳本）的本質是：攻擊者把惡意腳本注入到頁面中，讓瀏覽器以「你網站的身分」執行。想像你開了一家餐廳，卻讓客人自己往菜裡加料，結果有人加了瀉藥——其他客人吃了就出事。常見三種類型：
- 儲存型（Stored）：惡意腳本存在資料庫，每個訪客都中招，危害最大。
- 反射型（Reflected）：腳本藏在網址參數裡，誘騙點擊才觸發。
- DOM 型（DOM-based）：純前端渲染漏洞，伺服器完全沒參與。
二、實戰步驟：用 Vue 3 避免 XSS
重點：Vue 的插值 {{ }} 預設會做 HTML 跳脫，千萬不要用 v-html 渲染使用者內容。
步驟 1：永遠優先用文字插值，不要直接插入 HTML。
步驟 2：若真的必須渲染富文本（如編輯器內容），使用經過審核的消毒函式庫。
// ❌ 危險：直接插入使用者內容
const html = `<div>${userInput}</div>`;
el.innerHTML = html;
// ✅ 安全：使用 DOMPurify 消毒
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(userInput);
el.innerHTML = clean;
// ✅ 更安全的預設：Vue 插值自動跳脫
<template>
<p>{{ userComment }}</p> <!-- 自動跳脫，不會執行腳本 -->
</template>三、CSRF 是什麼：冒用你的身分發出請求
CSRF（Cross-Site Request Forgery，跨站請求偽造）像是一張「偷來的工牌」：攻擊者誘你點連結，趁著你已登入的 cookie 還有效，以你的身分送出轉帳、改密碼等請求。瀏覽器會自動帶上 cookie，網站一時難辨真偽。
四、實戰步驟：用 CSRF Token 與 SameSite 防禦
步驟 1：在前端表單或請求頭帶上伺服器簽發的 CSRF Token。
步驟 2：為 cookie 設定 SameSite 屬性，從源頭阻止跨站攜帶。
// 前端：Axios 自動帶上 Token
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;
// 後端設定 cookie（示意）
Set-Cookie: sessionid=abc; SameSite=Lax; HttpOnly; Secure
// SameSite 三種模式
// Strict：完全不跨站帶 cookie
// Lax：安全方法（GET）可帶，預設推薦
// None：跨站也帶，需搭配 Secure五、前端工程師的安全清單
- 輸出跳脫：所有使用者資料渲染前先消毒。
- CSP 內容安全策略：用 meta 或回應頭限制腳本來源。
- 不使用 innerHTML：除非經過 DOMPurify 消毒。
- SameSite Cookie：為登入態加上 Lax 或 Strict。
- 驗證碼與二次確認：敏感操作多一道關卡。
重點：安全不是後端一個人的事，前端的每一處渲染都是防線。
互動話題：你在專案中遇過最驚險的一次安全漏洞是什麼？又是怎麼修補的？歡迎在留言區分享你的排雷經驗。