Feng React 的设计理念之一是保证数据绑定的安全性。当在 JSX 中使用花括号 {} 插入变量时，React 会自动将变量中的内容进行 HTML 实体编码。如果变量包含 <h1> 或 <script> 之类的标签，React 会将它们转换为 <h1> 这样的字符串，从而在页面上直接显示原始文本，而不是将其作为真实的 DOM 解析。这种默认行为有效地防止了跨站脚本攻击。
为什么需要绕过默认转义
在实际开发中，经常会遇到需要渲染富文本内容的场景。例如，从后端 API 获取的一篇包含 HTML 标签的文章正文，或者使用富文本编辑器（如 TinyMCE、Quill）生成的 HTML 片段。如果直接使用 {content} 渲染，用户看到的将是一堆带尖括号的原始 HTML 代码，严重影响页面排版和阅读体验。
解决方案
使用 dangerouslySetInnerHTML 属性
React 提供了一个内置属性 dangerouslySetInnerHTML，用于替代浏览器 DOM 中的 innerHTML。使用时需要注意以下步骤：
- 创建一个包含
__html键的对象，其值为需要渲染的 HTML 字符串 - 将该对象赋值给目标 DOM 元素的
dangerouslySetInnerHTML属性
function MyComponent() {
const htmlString = "<h1>Hello World</h1><p>This is a paragraph.</p>";
return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}
使用第三方库（如 html-react-parser）
除了使用 dangerouslySetInnerHTML，还可以借助第三方库将 HTML 字符串解析为 React 元素。html-react-parser 不仅能解析 HTML，还能将其转换为 React 虚拟DOM 对象，从而更好地融入 React 的渲染生命周期。
npm install html-react-parser
import parse from 'html-react-parser';
function MyComponent() {
const htmlString = "<h1>Hello World</h1><p>This is a paragraph.</p>";
return <div>{parse(htmlString)}</div>;
}
渲染流程解析
接收到含HTML字符串的变量
↓
是否包含用户输入?
├─ 是 → 进行XSS过滤与清洗 → 使用dangerouslySetInnerHTML或第三方库渲染
└─ 否 → 直接使用dangerouslySetInnerHTML或第三方库渲染
↓
React跳过转义直接生成真实DOM
↓
浏览器展示最终富文本内容
安全防范与最佳实践
认识 XSS 攻击风险
绕过 React 的默认转义机制意味着将自身暴露在 XSS（跨站脚本）攻击的风险之下。如果渲染的 HTML 字符串来源于用户输入且未经过滤，恶意用户可以注入 <script> 标签或恶意的事件属性（如 onerror），从而窃取用户的 Cookie 或执行其他恶意操作。
数据清洗与过滤策略
为了防御 XSS 攻击，必须对所有插入的 HTML 进行严格的清洗。推荐使用业界成熟的库如 DOMPurify 或 js-xss 来过滤恶意代码。
npm install dompurify
import DOMPurify from 'dompurify';
import parse from 'html-react-parser';
function SafeComponent() {
const dirtyHtml = '<img src="x" onerror="alert(1)">';
const cleanHtml = DOMPurify.sanitize(dirtyHtml);
return <div>{parse(cleanHtml)}</div>;
}
经过 DOMPurify 处理后，上述代码中的 onerror 属性会被移除，从而保证渲染的安全。
CSP（内容安全策略）配置
除了代码层面的过滤，配置 CSP 也是一种有效的纵深防御手段。通过设置 HTTP 头部的 Content-Security-Policy，可以限制页面只能加载指定来源的脚本和资源，进一步降低 XSS 攻击的危害。虽然这超出了 React 应用本身的范畴，但作为前端开发者，应当推动后端或运维团队配置合理的 CSP 规则，共同构建安全的 Web 应用环境。
