跨站脚本攻击（XSS）和跨站请求伪造（CSRF）是威胁用户数据安全和网站稳定性的两大主要风险。在本文中，我将深入剖析这两种攻击方式的特点与危害，介绍针对性的防御策略，并通过代码示例演示如何在实际开发中有效实施这些防护措施。
一、理解XSS与CSRF攻击
1. XSS（Cross-Site Scripting）
XSS攻击允许恶意用户将恶意脚本注入到网站页面中，当其他用户访问该页面时，恶意脚本得以执行，可能导致信息窃取、账户劫持甚至进一步传播恶意内容。根据攻击途径，XSS可分为存储型、反射型和DOM型三种。
2. CSRF（Cross-Site Request Forgery）
CSRF攻击利用用户的已登录状态，在用户不知情的情况下，诱使其浏览器发起对目标站点的恶意请求。攻击者通常通过电子邮件、论坛帖子、恶意网站等渠道诱导用户点击包含恶意请求的链接或表单。一旦成功，攻击可能导致用户账户状态更改、数据泄露或资金转移等严重后果。
二、XSS与CSRF防御策略及代码示例
1. 针对XSS的防御
a. 输入验证与净化
对用户提交的所有数据进行严格的输入验证，拒绝或过滤掉含有潜在危险字符（如<, >, &, ', ", /等）的输入。可以使用正则表达式、第三方库（如DOMPurify）或服务端提供的API进行净化。
b. 输出编码
在向HTML、JavaScript、CSS或URL中插入动态数据时，务必对其进行适当的编码：
- HTML：使用
textContent代替innerHTML，或使用encodeURICompontent对特殊字符进行编码。 - JavaScript：使用
JSON.stringify处理对象，然后用\u转义特殊字符。 - CSS：使用CSS.escape函数或自定义函数对特殊字符进行转义。
- URL：使用
encodeURIComponent对查询参数进行编码。
javascript
// HTML输出编码示例element.textContent = userInput; // JavaScript输出编码示例const data = { message: userInput };script.innerHTML = `var data = {JSON.stringify(data)};`; // URL输出编码示例const url = `https://example.com/search?query={encodeURIComponent(userInput)}`;
c. 启用Content Security Policy (CSP)
CSP是一种强大的安全策略，它限制了浏览器可以加载哪些资源（如脚本、样式、图片等），从而有效防止XSS攻击。在服务器端设置响应头或在HTML中添加``标签来启用CSP。
http
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
2. 针对CSRF的防御
a. 使用Anti-CSRF Tokens
为所有重要操作（如修改密码、转账、删除等）添加一次性、不可预测的Token（通常称为CSRF Token）。服务器在渲染表单或接口响应时发送Token，客户端在提交请求时必须携带此Token。服务器端验证Token的有效性以防止伪造请求。
javascript
// 在服务器端生成并返回Tokenres.cookie('csrfToken', generateRandomToken(), { httpOnly: true }); // 客户端在请求中携带Tokenconst csrftoken = getCookie('csrfToken');fetch('/api/important-action', { method: 'POST', headers: { 'X-CSRF-Token': csrftoken, }, // ... });
b. 使用SameSite Cookie属性
设置SameSite属性为Lax或Strict，防止浏览器在跨站请求中携带相关Cookie，从而降低CSRF攻击的可能性。
http
Set-Cookie: session=abc123; SameSite=Lax; Secure; HttpOnly
c. 启用HTTPS
强制使用HTTPS可以防止中间人攻击，确保CSRF Token和其他敏感信息在传输过程中不被篡改或窃取。
结语
前端安全防护是每一位开发者不容忽视的责任。通过深入理解XSS与CSRF攻击原理，结合输入验证、输出编码、启用CSP、使用Anti-CSRF Tokens、配置SameSite Cookie属性和强制HTTPS等策略，我们可以有效抵御这两种常见攻击，保障用户数据安全和网站稳定性。作为博主，我将持续分享前端安全领域的知识与实践经验，助力广大开发者共建更安全的网络环境。
