前端如何防止XSS攻击？

前端防止 XSS 攻击的核心思想是对用户输入的数据进行过滤和转义，防止恶意脚本被浏览器执行。以下是一些常用的前端防御措施：

1. 输入过滤:

对输入内容进行白名单过滤: 只允许用户输入预期的字符类型，例如数字、字母、特定的符号等。可以使用正则表达式或其他过滤函数来实现。这是最有效的防御方法之一。
限制输入长度: 限制用户输入的最大长度，可以防止过长的恶意脚本注入。

2. 输出编码/转义:

HTML 编码: 将 HTML 特殊字符（如 <, >, &, " , '）转换为对应的 HTML 实体（如 <, >, &, ", '）。这可以防止浏览器将用户输入解释为 HTML 标签。例如，将 <script> 转换为 <script>。在 JavaScript 中，可以使用 textContent (推荐) 或 innerText 属性设置文本内容，或者使用类似 lodash 的 _.escape 函数。
JavaScript 编码: 如果需要在 JavaScript 代码中嵌入用户输入，需要对特殊字符进行 JavaScript 编码，例如使用 encodeURIComponent 或 encodeURI 函数。
URL 编码: 如果用户输入用于 URL 参数，需要使用 encodeURIComponent 函数进行编码。
CSS 编码: 如果用户输入用于 CSS 属性，可以使用 CSS.escape() 函数进行编码。

3. 使用安全的 API 和框架:

使用 DOMParser API 解析 HTML: 避免使用 innerHTML 直接插入用户提供的 HTML 内容。使用 DOMParser API 可以更安全地解析 HTML 字符串，并可以选择性地插入安全的节点。
使用现代前端框架: 现代前端框架（如 React、Vue、Angular 等）通常会自动进行 HTML 编码，从而降低 XSS 攻击的风险。例如，在 React 中，JSX 会默认对用户输入进行转义。
使用 Content Security Policy (CSP): CSP 是一个 HTTP 响应头，它允许网站管理员控制允许浏览器加载的资源，从而有效地减少 XSS 攻击。例如，可以限制脚本只能从受信任的域名加载。

4. 其他安全措施:

HttpOnly Cookies: 设置 HttpOnly 标志可以防止 JavaScript 代码访问 Cookie，从而 mitigating XSS 攻击窃取 Cookie 的风险。
Subresource Integrity (SRI): SRI 允许浏览器验证从 CDN 加载的资源的完整性，防止恶意代码注入。
定期安全审计和渗透测试: 定期进行安全审计和渗透测试可以帮助发现潜在的 XSS 漏洞。

示例 (React):

import React from 'react';

function MyComponent(props) {
  const { userName } = props;

  // ✅ 安全：JSX 自动转义
  return <div>Hello, {userName}</div>; 

  // ❌ 不安全：使用 dangerouslySetInnerHTML
  // return <div dangerouslySetInnerHTML={{ __html: `Hello, ${userName}` }} />;
}