一：引言

在项目开发过程中，我们要避免富文本解析时，被插入恶意代码，那么在react中，应该怎么做呢？

二：方法

1：使用 dangerouslySetInnerHTML 属性

原理=>通过 React 官方提供的属性绕过转义机制‌

适用场景=>需要动态插入后端返回的 HTML 内容时‌

风险=>需确保内容来源可信，否则可能引发 XSS 攻击‌

<div dangerouslySetInnerHTML={{ __html: '<span>未转义内容</span>' }} />  

2：结合第三方库净化内容

作用=>通过 DOMPurify 等库过滤恶意标签，提升安全性‌

import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} />  

三：拓展

（1）避免动态内容被二次转义

1：直接使用UTF-8字符或Inicode编码

<p>版权符号：© 或 ©</p>  

2：通过数组混合字符串与JSX元素

<div>{['文本 ', <span>©</span>, ' 2025']}</div>  

（2）原生HTML标签转义方案

1：使用<xmp>标签包裹内容

<xmp><h1>标题</h1></xmp>  

2：实体字符转义

<p>转义后的符号：<div></p>  

四：总结

1：‌避免直接渲染用户输入‌：任何未净化的用户输入内容使用 dangerouslySetInnerHTML 均可能导致 XSS 漏洞‌

‌2：启用 CSP 策略‌：通过内容安全策略（Content Security Policy）限制外部资源加载，增强防护‌

‌3：优先使用 React 原生转义‌：除非必要，尽量依赖 React 的默认转义机制保障安全性‌