前端安全題常把 XSS、CSRF、CORS 混在一起問。
先記住它們解決的問題不同：
- XSS：攻擊者的 script 在你的網站執行
- CSRF：使用者在已登入狀態下，被誘導送出非預期 request
- CORS：瀏覽器限制前端 JavaScript 讀取跨來源 response
- CSP：網站限制哪些來源的 script、style、image 可以執行或載入
XSS 是什麼？
XSS 是 Cross-Site Scripting。
如果網站把未處理的使用者輸入當 HTML 插入頁面，攻擊者可能注入 script。
<div dangerouslySetInnerHTML={{ __html: userContent }} />主要類型：
- Stored XSS：惡意內容被存進資料庫
- Reflected XSS：惡意內容從 URL / request 反射到頁面
- DOM-based XSS：前端程式操作 DOM 時產生漏洞
防護方式：
- 預設使用 React escaping
- 不任意使用
dangerouslySetInnerHTML - 必須顯示 HTML 時使用成熟 sanitizer
- 設定 CSP
- Cookie 使用 HttpOnly，降低 token 被 script 讀取的風險
CSRF 是什麼？
假設使用者已登入銀行網站，瀏覽器裡有 session cookie。攻擊網站誘導瀏覽器對銀行送出轉帳 request，Cookie 可能被自動帶上。
防護方式：
SameSite=Lax或Strict- CSRF token
- 驗證
Origin/Referer - 敏感操作要求重新驗證
- 不使用 GET 修改資料
HttpOnly 不能防 CSRF，它只是不讓 JavaScript 讀 Cookie。
CORS 是什麼？
CORS 是瀏覽器的跨來源讀取政策。
當前端從 https://app.example.com 呼叫 https://api.example.net，API 要回正確 header：
Access-Control-Allow-Origin: https://app.example.com如果帶 cookie，還需要：
Access-Control-Allow-Credentials: true前端不能靠設定 mode: no-cors 解決 CORS。這通常會得到 opaque response，JavaScript 仍無法正常讀取內容。
而且 CORS 不是 API 的身分驗證機制。非瀏覽器 client 仍可以直接呼叫 API，所以後端必須驗證 token 和權限。
Preflight 是什麼？
某些跨來源 request 送出前，瀏覽器會先發 OPTIONS：
OPTIONS /api/users
Access-Control-Request-Method: PATCH
Access-Control-Request-Headers: Authorization, Content-TypeServer 回覆允許的方法、來源與 headers 後，瀏覽器才送真正 request。
常見觸發條件包括自訂 header、某些 Content-Type、PUT/PATCH/DELETE。
CSP 是什麼？
Content Security Policy 透過 response header 限制資源來源：
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.comCSP 可以降低 XSS 成功後執行任意 script 的風險，但不是取代 escaping 和 sanitization。
Cookie 安全屬性
| 屬性 | 用途 |
|---|---|
HttpOnly | JavaScript 無法讀取 Cookie |
Secure | 只透過 HTTPS 傳送 |
SameSite | 限制跨站 request 自動帶 Cookie |
Domain / Path | 限制 Cookie 生效範圍 |
常見追問
React 可以完全防止 XSS 嗎？
不能。React 預設會 escape text，但 dangerouslySetInnerHTML、不安全 URL、第三方 script 和 DOM API 仍可能造成問題。
localStorage 和 Cookie 哪個安全？
localStorage 容易被 XSS 讀取；HttpOnly Cookie 降低 token 被偷的風險，但需要處理 CSRF。要依系統威脅模型設計。
CORS error 是前端還是後端修？
通常要由 API server 或 gateway 回正確 CORS headers。前端不能自行授權自己的 origin。
面試回答模板
XSS 是惡意 script 在網站 origin 下執行，主要靠 escaping、sanitization 和 CSP 防護；CSRF 是利用瀏覽器自動帶 Cookie 發出非預期 request，可用 SameSite、CSRF token 和 Origin 驗證；CORS 是瀏覽器限制 JavaScript 讀取跨來源 response，不是 API authentication。實務上我也會設定 HttpOnly、Secure Cookie，避免把 secret 放到前端 bundle。