前端安全防护实战：XSS、CSRF防御与同源策略详解（react 案例）

前端安全防护实战中，主要涉及三个方面：XSS (Cross-Site Scripting) 攻击的防御、CSRF (Cross-Site Request Forgery) 攻击的防御，以及浏览器的同源策略。以下是这三个方面的详细说明：

XSS 防御详解

XSS 概述

XSS攻击是一种让攻击者能够在受害者的浏览器中注入恶意脚本的攻击方式，这些脚本通常会窃取用户的敏感信息，如Cookie、session token等，甚至控制用户的账户权限。

防御措施

1. 输入过滤与转义：对用户提交的所有数据进行严格的检查与转义，确保在HTML、JavaScript、CSS上下文中不会被执行。例如，使用textContent代替innerHTML，或者使用相应的转义函数如encodeURIComponent()、encodeURI()以及专门为HTML、JS、CSS设计的安全函数进行输出编码。

2. Content Security Policy (CSP)：设置响应头中的Content-Security-Policy，限制页面只能加载指定来源的脚本、样式和图片，有效防止外部注入的恶意内容被执行。

3. HttpOnly Cookie：对于包含敏感信息的Cookie，设置HttpOnly属性，使其不能通过JavaScript被访问，这样即使存在XSS漏洞，攻击者也无法直接盗取这类Cookie。

4. 框架提供的安全API：利用现代框架提供的安全API，如在Vue、React等框架中，可以通过它们的安全DOM操作方法来避免XSS风险。

CSRF 防御详解

CSRF 概述

CSRF攻击是指攻击者通过诱使用户在其已登录的可信网站上执行恶意操作，利用用户的认证状态发起非授权请求。

防御措施

1. Token验证：在重要请求中加入CSRF Token，服务器端在渲染表单时生成一个随机Token，并将其存储在服务器端或客户端（如Cookie中）。当接收到请求时，服务器验证Token的一致性。

2. 双重Cookie验证：服务器在接收POST请求时，不仅验证CSRF Token，还要求另一个只有浏览器才能自动附带的Cookie（如Session ID），由于浏览器同源策略，攻击者无法在第三方站点伪造这个Cookie。

3. SameSite Cookie属性：设置Cookie的SameSite属性为strict或lax，这可以防止第三方网站在跨域请求中携带该Cookie。

同源策略详解

同源策略概述

同源策略是浏览器的一个核心安全模型，它规定了来自不同源（协议、域名、端口任一不同即视为不同源）的文档或脚本之间不能相互读写数据，以此隔离潜在的安全风险。

同源策略的应用与例外

• 应用：浏览器默认阻止非同源资源之间的交互，如不同源的脚本不能读取对方的DOM、Cookie等。
• 例外：现代浏览器允许通过CORS（Cross-Origin Resource Sharing）机制实现跨域资源共享，通过设置特定的HTTP头部，允许服务器明确声明哪些其他源可以访问资源。

综上所述，全面的前端安全防护需要综合运用多种手段，包括但不限于上述的XSS防御、CSRF防御策略以及对同源策略的合理利用和管理。同时，持续关注并遵循最新的安全最佳实践也至关重要。

在React中实现XSS和CSRF防御的例子：

XSS防御实例 - 使用 dangerouslySetInnerHTML 时转义用户输入

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;// 对用户评论内容进行转义const safeComment = {__html: escapeHtml(comment)};return (<div dangerouslySetInnerHTML={safeComment} />);}
}// 使用组件
<UserComment comment={`User's untrusted input...`} />

CSRF防御实例 - 使用CSRF Token

假设后端已经提供了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) {// 处理错误...}}// ...
}

以上代码仅为示例，实际应用中需要根据项目的实际情况调整。比如CSRF Token的获取途径可能是从Cookie中带有HttpOnly标志的Token派生出来的，或者是通过初始接口请求获得并缓存起来的。另外，上面的sendSafeRequest只是一个简单的封装，真实场景下可能还需要处理更多复杂的网络交互逻辑。