React 并不是完全免疫 XSS（跨站脚本攻击），但它确实通过一些内置的机制来减少 XSS 攻击的风险。以下是 React 如何减少 XSS 攻击风险的几个关键点：
1. 自动转义
React 默认会自动转义（escape）在 JSX 中插入的所有字符串。这意味着在渲染用户输入的内容时，React 会将特殊字符（如 <, >, &, " 等）转换为它们的 HTML 实体，从而防止恶意脚本被执行。
示例
const userInput = '<script>alert("XSS")</script>';
const element = <div>{userInput}</div>;
// 渲染结果：<div><script>alert("XSS")</script></div>
在这个示例中，用户输入的 <script> 标签被转义为 <script>，因此不会被解释为实际的脚本标签。
2. 使用 dangerouslySetInnerHTML
React 提供了一个名为 dangerouslySetInnerHTML 的属性，允许开发者直接插入 HTML 内容。然而，使用这个属性时需要非常小心，因为它会绕过 React 的自动转义机制，直接插入 HTML 内容。
示例
const rawHTML = '<strong>This is bold text</strong>';
const element = <div dangerouslySetInnerHTML={{ __html: rawHTML }} />;
使用 dangerouslySetInnerHTML 时，开发者需要确保插入的 HTML 内容是可信的，避免插入用户输入的内容。
3. 避免使用不可信的第三方库
在使用第三方库时，确保这些库是安全的，并且不会引入 XSS 漏洞。例如，在处理富文本编辑器或其他需要插入 HTML 内容的库时，选择那些经过安全审查的库。
4. 输入验证和输出编码
虽然 React 提供了一些内置的防护机制，但开发者仍然需要遵循安全的编码实践，包括：
- 输入验证：在服务器端和客户端都进行输入验证，确保输入的数据符合预期。
- 输出编码：在输出数据时进行编码，确保特殊字符被正确处理。
5. 使用内容安全策略（CSP）
内容安全策略（CSP）是一种防护机制，可以帮助防止 XSS 攻击。通过配置 CSP 头，开发者可以限制哪些资源可以被加载和执行。
示例
在服务器端配置 CSP 头：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
总结
- 自动转义：React 默认会自动转义在 JSX 中插入的所有字符串，防止恶意脚本被执行。
-
dangerouslySetInnerHTML：允许直接插入 HTML 内容，但需要非常小心使用。 - 输入验证和输出编码：在服务器端和客户端都进行输入验证和输出编码。
- 内容安全策略（CSP）：通过配置 CSP 头，限制哪些资源可以被加载和执行。