React 防护 XSS 的方法
React 默认提供了一定的 XSS 防护机制，但开发者仍需注意潜在的安全风险。以下是几种有效的防护方法：
使用 JSX 自动转义React 在渲染 JSX 时会自动对字符串进行转义，防止恶意脚本注入。例如，<div>{userInput}</div>中的userInput会被转义为纯文本，无法执行脚本。
避免使用dangerouslySetInnerHTML除非绝对必要，否则避免使用此属性。如果必须使用，确保内容经过严格的过滤或净化。例如：
<div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />使用 DOMPurify 净化 HTML在需要渲染动态 HTML 时，使用 DOMPurify 等库净化内容：
import DOMPurify from 'dompurify'; const cleanHTML = DOMPurify.sanitize(userInput);处理 URL 和动态属性对动态生成的 URL 或属性（如href、src）进行验证，避免javascript:等危险协议：
const safeUrl = userInput.startsWith('http') ? userInput : '#'; <a href={safeUrl}>Link</a>使用 Content Security Policy (CSP)通过 CSP 头部限制资源加载来源，防止内联脚本执行。例如：
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'避免直接拼接 HTML不要通过字符串拼接生成 HTML，而是使用 React 的组件和数据绑定机制。例如：
// 错误示例 const badHtml = `<div>${userInput}</div>`; // 正确示例 return <div>{userInput}</div>;验证和过滤用户输入对所有用户输入进行验证和过滤，确保符合预期格式。例如，使用正则表达式移除脚本标签：
const filteredInput = userInput.replace(/<script.*?>.*?<\/script>/gi, '');使用安全的第三方库选择经过安全审计的库处理富文本或 Markdown 渲染，例如marked配合 DOMPurify：
import marked from 'marked'; const safeMarkdown = DOMPurify.sanitize(marked(userInput));通过结合以上方法，可以有效减少 React 应用中的 XSS 风险。始终遵循最小权限原则，并对所有外部数据保持警惕。
