React 安全渲染 HTML 并隔离 CSS 方法

本文深入探讨了在 React 应用中安全渲染不可信第三方 HTML 内容的核心挑战与工程化解决方案，直击 dangerouslySetInnerHTML 带来的 XSS 风险、全局 CSS 污染、资源路径失效及脚本自动执行等致命隐患，明确推荐使用 iframe + sandbox 的浏览器原生隔离方案——通过注入 base 标签保障相对路径解析、精细化配置 allow-scripts/禁止 allow-same-origin 等最小权限策略，实现样式、脚本、DOM 和网络请求的彻底隔离；同时对比剖析了服务端预处理等降级方案的局限性，为构建邮件预览、URL 快照、CMS 内容渲染等高风险场景提供了一套开箱即用、符合 Web 安全最佳实践的可靠落地路径。

本文详解在 React 应用中安全嵌入 API 返回的第三方 HTML 内容的方法，重点解决样式污染、脚本执行和资源加载异常问题，推荐使用

在构建网页预览类应用（如 URL 快照、邮件 HTML 渲染器或 CMS 内容预览）时，一个常见需求是：将后端返回的原始 HTML 字符串安全地渲染到页面指定区域，同时确保其 CSS 不影响主站样式、JS 不执行、外部资源（图片/CSS/字体）能正确加载。但直接使用 dangerouslySetInnerHTML 存在严重风险——这不仅是样式泄漏问题，更是安全与功能双重陷阱。

❌ 为什么 dangerouslySetInnerHTML + 简单包裹 div 不可行？

以下代码看似简洁，实则隐患重重：

// ❌ 危险且不可靠的实现
function HTMLRenderer({ htmlContent }: { htmlContent: string }) {
  return (
    <div className="webview-content">
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
}

原因包括：

• CSS 全局污染：第三方 HTML 中的 .header { color: red; } 会覆盖你整个应用的 .header 样式；
• 选择器无作用域：body { margin: 0; } 或 * { box-sizing: border-box; } 将破坏全局布局；
• JS 自动执行： 或内联事件（onclick）会被立即执行，构成 XSS 漏洞；
• 资源路径失效： 或 中的相对路径，在你的 React 应用上下文中无法解析；
• 防盗链拦截：目标网站可能通过 Referer 或 Origin 头拒绝跨域图片/字体加载；
• 动态内容缺失：许多现代网站依赖 JS 渲染首屏（如 React/Vue SPA），纯 HTML 响应仅含骨架，无法展示真实效果。

⚠️ 注意：CSS @scope（草案规范）虽旨在支持局部样式作用域，但截至 2024 年底，Chrome/Firefox/Safari 均未正式支持，不可用于生产环境。

✅ 推荐方案：使用 iframe 实现强隔离