React渲染后端HTML时如何自动将oembed标签替换为ReactPLayer组件

核心逻辑是放弃整段HTML直接塞给dangerouslySetInnerHTML的做法，先解析HTML结构，识别到<oembed>标签时直接替换为ReactPlayer组件走React渲染流，全程不手动操作真实DOM，同时保留XSS防护能力。 #

第一步：调整DOMPurify白名单配置 #

DOMPurify默认会移除自定义标签，先把<oembed>和它携带的媒体地址属性加入白名单，避免净化阶段把需要的内容删掉：

// 注意根据CKEditor实际输出的oembed属性调整，一般媒体地址存在url属性上
const sanitizedHtml = DOMPurify.sanitize(album.description, {
  ADD_TAGS: ["oembed"],
  ADD_ATTR: ["url"]
})

第二步：解析HTML并替换目标节点 #

用轻量库html-react-parser做HTML到React元素的转换，它支持自定义节点替换规则，不需要手动操作DOM：
先安装依赖：

npm install html-react-parser

渲染代码如下：

import parse from 'html-react-parser';
import ReactPlayer from 'react-player';
import styles from './album.module.css';

function AlbumDescription({ description }) {
  const sanitizedHtml = DOMPurify.sanitize(description, {
    ADD_TAGS: ["oembed"],
    ADD_ATTR: ["url"]
  });

  return (
    <div className={styles.albumDescription}>
      {parse(sanitizedHtml, {
        replace: (node) => {
          // 匹配oembed标签
          if (node.type === 'tag' && node.name === 'oembed') {
            const mediaUrl = node.attribs.url;
            return mediaUrl ? (
              <ReactPlayer url={mediaUrl} controls width="100%" />
            ) : null;
          }
        }
      })}
    </div>
  )
}

方案说明 #

• 所有渲染逻辑走React虚拟DOM机制，没有任何原生DOM操作代码，完全符合React开发规范
• 普通文本、图片、格式类HTML标签的渲染效果和之前用dangerouslySetInnerHTML完全一致
• 所有内容先经过DOMPurify净化，不会引入XSS安全风险
• 如果不想引入第三方依赖，也可以用原生DOMParserAPI手动拆分HTML片段，普通片段分段用dangerouslySetInnerHTML渲染，oembed对应位置插入ReactPlayer即可，但用解析库的代码更简洁，维护成本更低。

排查提示：如果替换后拿不到媒体地址，打印node.attribs查看CKEditor实际输出的oembed属性名，对应调整取值逻辑即可。

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