React整合现有HTML及富文本安全处理的实现方案问询

一、现有26年非标准HTML内容的渲染 #

对于你存储了26年的非XML格式HTML（含大量未闭合标签），dangerouslySetInnerHTML是最直接且靠谱的方案。原因很明确：React的JSX基于严格XML语法，无法直接解析松散HTML，但浏览器本身对这类内容有成熟的容错机制，通过这个API把内容交给浏览器原生解析，能最大程度保证原有博客内容的展示效果与历史一致。

如果不想用这个API，唯一替代方案是先将非标准HTML转换为符合JSX要求的结构，但这个成本极高——26年的内容量庞大，还要处理各种老旧HTML特性、未闭合标签，反而容易引入更多问题，完全没必要舍近求远。

你写的示例代码逻辑没问题，只需修正title变量的渲染方式，调整后如下：

function BlogEntry({title, htmlData}) { 
    return <div> 
        <h1>{title}</h1> 
        <div dangerouslySetInnerHTML={{__html: htmlData}} /> 
    </div> 
}

二、新应用中可信用户的复杂内容处理 #

如果是可信用户（如自己、内部编辑）需要编写表格、自定义脚本这类Markdown不支持的内容，有几个比dangerouslySetInnerHTML更优的方案：

• 采用富文本编辑器输出结构化内容：比如Slate、ProseMirror这类编辑器，会将用户编辑的内容转换为JSON格式的结构化数据（例如{type: 'table', children: [...]}），前端直接用React组件渲染这些JSON结构，完全无需操作原始HTML，也避开了dangerouslySetInnerHTML，后续修改样式、添加交互也更灵活。
• 扩展Markdown语法：如果习惯用Markdown，可以自定义扩展语法（比如通过插件支持表格、自定义脚本块），再用解析器（如remark）将扩展后的Markdown转换为React组件，而非HTML字符串。

更优的存储格式首推结构化JSON，相比HTML字符串，它更易维护、修改，也能和React生态更好地适配。

三、不可信用户的内容安全处理 #

如果用户不可信，核心是过滤危险内容，可按以下方式处理：

• 使用HTML清理库：比如DOMPurify，它能自动移除script、iframe、on*事件属性等危险标记，仅保留安全的HTML标签和属性。清理后的HTML再用dangerouslySetInnerHTML渲染，风险就能得到控制。
• 从源头限制内容范围：如果采用结构化内容方案，可在编辑阶段就限制用户只能使用预设的安全组件（比如仅允许表格、标题，不允许脚本），从根源避免危险内容产生。

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