XSS和CSRF攻击和防御

跨站脚本攻击（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对查询参数进行编码。

// HTML输出编码示例element.textContent = userInput;
// JavaScript输出编码示例
const data = {
   
    message