React中如何对CKEditor输出的HTML内容进行消毒及正确渲染？

你遇到的是HTML实体二次转义问题，原始内容中的<、>等特殊字符被连续转义了两次（< → < → <），所以直接渲染会显示原始标签文本而非解析为DOM结构。

步骤1：实现HTML实体解码函数 #

先通过安全的方式将二次转义的实体还原为原始特殊字符，该方法不会执行恶意脚本，安全性有保障：

const decodeHtml = (html) => {
  const txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

步骤2：解码后执行消毒+渲染 #

无需额外引入html-to-react库，解码后用DOMPurify消毒，再通过dangerouslySetInnerHTML渲染即可。如果需要保留CKEditor生成的<oembed>、<figure>等自定义标签和属性，需要给DOMPurify添加对应白名单，避免被默认过滤：

import DOMPurify from "dompurify";

// 你的原始HTML内容
const HTMLCONTENT = "接口返回的二次转义HTML内容";

// 先解码，再消毒，配置白名单保留自定义标签
const sanitizedHtml = DOMPurify.sanitize(decodeHtml(HTMLCONTENT), {
  ADD_TAGS: ["oembed", "figure"],
  ADD_ATTR: ["url", "class"]
});

// 渲染组件
function RenderCkeditorContent() {
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
}

可选优化：根源解决二次转义 #

可排查后端存储、返回CKEditor内容的逻辑，确认是否在入库/接口响应时额外做了一次HTML转义，若能在后端去掉多余的转义步骤，前端可省略解码步骤直接消毒渲染。

内容的提问来源于stack exchange，提问作者DEV