前端安全防護實戰(zhàn)中，主要涉及三個方面：XSS (Cross-Site Scripting) 攻擊的防御、CSRF (Cross-Site Request Forgery) 攻擊的防御，以及瀏覽器的同源策略。以下是這三個方面的詳細說明：

XSS 防御詳解

XSS 概述

XSS攻擊是一種讓攻擊者能夠在受害者的瀏覽器中注入惡意腳本的攻擊方式，這些腳本通常會竊取用戶的敏感信息，如Cookie、session token等，甚至控制用戶的賬戶權限。

防御措施

1. 輸入過濾與轉(zhuǎn)義：對用戶提交的所有數(shù)據(jù)進行嚴格的檢查與轉(zhuǎn)義，確保在HTML、JavaScript、CSS上下文中不會被執(zhí)行。例如，使用textContent代替innerHTML，或者使用相應的轉(zhuǎn)義函數(shù)如encodeURIComponent()、encodeURI()以及專門為HTML、JS、CSS設計的安全函數(shù)進行輸出編碼。

2. Content Security Policy (CSP)：設置響應頭中的Content-Security-Policy，限制頁面只能加載指定來源的腳本、樣式和圖片，有效防止外部注入的惡意內(nèi)容被執(zhí)行。

3. HttpOnly Cookie：對于包含敏感信息的Cookie，設置HttpOnly屬性，使其不能通過JavaScript被訪問，這樣即使存在XSS漏洞，攻擊者也無法直接盜取這類Cookie。

4. 框架提供的安全API：利用現(xiàn)代框架提供的安全API，如在Vue、React等框架中，可以通過它們的安全DOM操作方法來避免XSS風險。

CSRF 防御詳解

CSRF 概述

CSRF攻擊是指攻擊者通過誘使用戶在其已登錄的可信網(wǎng)站上執(zhí)行惡意操作，利用用戶的認證狀態(tài)發(fā)起非授權請求。

防御措施

1. Token驗證：在重要請求中加入CSRF Token，服務器端在渲染表單時生成一個隨機Token，并將其存儲在服務器端或客戶端（如Cookie中）。當接收到請求時，服務器驗證Token的一致性。

2. 雙重Cookie驗證：服務器在接收POST請求時，不僅驗證CSRF Token，還要求另一個只有瀏覽器才能自動附帶的Cookie（如Session ID），由于瀏覽器同源策略，攻擊者無法在第三方站點偽造這個Cookie。

3. SameSite Cookie屬性：設置Cookie的SameSite屬性為strict或lax，這可以防止第三方網(wǎng)站在跨域請求中攜帶該Cookie。

同源策略詳解

同源策略概述

同源策略是瀏覽器的一個核心安全模型，它規(guī)定了來自不同源（協(xié)議、域名、端口任一不同即視為不同源）的文檔或腳本之間不能相互讀寫數(shù)據(jù)，以此隔離潛在的安全風險。

同源策略的應用與例外

• 應用：瀏覽器默認阻止非同源資源之間的交互，如不同源的腳本不能讀取對方的DOM、Cookie等。
• 例外：現(xiàn)代瀏覽器允許通過CORS（Cross-Origin Resource Sharing）機制實現(xiàn)跨域資源共享，通過設置特定的HTTP頭部，允許服務器明確聲明哪些其他源可以訪問資源。

綜上所述，全面的前端安全防護需要綜合運用多種手段，包括但不限于上述的XSS防御、CSRF防御策略以及對同源策略的合理利用和管理。同時，持續(xù)關注并遵循最新的安全最佳實踐也至關重要。

在React中實現(xiàn)XSS和CSRF防御的例子：

XSS防御實例 - 使用 dangerouslySetInnerHTML 時轉(zhuǎn)義用戶輸入

import React from 'react';function escapeHtml(text) {const map = {'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;'};return text.replace(/[&<>"'/]/g, (char) => map[char]);
}class UserComment extends React.Component {render() {const { comment } = this.props;// 對用戶評論內(nèi)容進行轉(zhuǎn)義const safeComment = {__html: escapeHtml(comment)};return (<div dangerouslySetInnerHTML={safeComment} />);}
}// 使用組件
<UserComment comment={`User's untrusted input...`} />

CSRF防御實例 - 使用CSRF Token

假設后端已經(jīng)提供了CSRF Token，我們將其存放在localStorage或Cookie中，并在每個非GET請求中帶上這個Token。

import axios from 'axios';
import { useEffect, useState } from 'react';function useCsrfToken() {const [csrfToken, setCsrfToken] = useState(null);useEffect(() => {// 假設從localStorage獲取Tokenconst storedToken = localStorage.getItem('csrfToken');if (storedToken) {setCsrfToken(storedToken);}// 在實際應用中，可能需要在登錄成功后由后端提供并保存到localStorage}, []);function sendSafeRequest(method, url, data = null) {// 添加CSRF Token到請求頭const headers = {'X-CSRF-Token': csrfToken,};return axios.request({method,url,data,headers,});}return { csrfToken, sendSafeRequest };
}function MyComponentThatMakesRequests() {const { csrfToken, sendSafeRequest } = useCsrfToken();async function handleSubmit(data) {try {const response = await sendSafeRequest('POST', '/api/protected-endpoint', data);// 處理響應...} catch (error) {// 處理錯誤...}}// ...
}

以上代碼僅為示例，實際應用中需要根據(jù)項目的實際情況調(diào)整。比如CSRF Token的獲取途徑可能是從Cookie中帶有HttpOnly標志的Token派生出來的，或者是通過初始接口請求獲得并緩存起來的。另外，上面的sendSafeRequest只是一個簡單的封裝，真實場景下可能還需要處理更多復雜的網(wǎng)絡交互邏輯。