本文介绍在 react 中正确渲染富文本 html 邮件内容的两种主流方案，重点对比 `dangerouslysetinnerhtml` 与 `srcdoc` iframe 的实际效果、样式隔离性及安全性差异，并提供可直接使用的最佳实践代码。
在 React 应用中渲染第三方 HTML 邮件（如营销邮件、通知模板）时，开发者常遇到样式错乱、脚本失效或布局失真等问题。你可能已尝试使用 <div dangerouslySetInnerHTML={{ __html: data }} />，但发现渲染结果与原生 HTML 页面不一致——这是因为 dangerouslySetInnerHTML 会将 HTML 片段直接注入当前 DOM 上下文，导致：
- 外部 CSS 样式被全局样式覆盖或干扰；
- 内联 <style> 标签未生效（React 不自动解析并注入 style 节点）；
- <base>、<meta charset> 等文档级标签被忽略；
- 相对路径资源（如 src="images/logo.png"）因缺少上下文 base URL 而 404；
- 潜在 XSS 风险（若 data 未严格净化）。
✅ 更优解：使用 <iframe srcdoc={data} />
该方案将 HTML 内容作为独立文档嵌入，天然具备完整的 HTML 解析环境：
<iframe
srcDoc={data} // 注意：是 srcDoc（驼峰），非 srcdoc
title="email-preview"
width="100%"
height="600"
sandbox="allow-same-origin allow-scripts allow-popups" // 按需启用能力
style={{ border: '1px solid #e0e0e0', borderRadius: '4px' }}
/>⚠️ 关键说明：
- srcDoc 属性支持完整 HTML 文档结构（含 <!DOCTYPE html><html><head><style>...</style></head><body>...</body></html>），能正确解析 <style>、<link>、字符编码等；
- iframe 提供样式与脚本作用域隔离，彻底避免父应用 CSS 泄漏或冲突；
- 必须添加 sandbox 属性以限制执行权限（默认禁用脚本/表单/弹窗），提升安全性；如需交互，可显式添加 allow-scripts 等 token；
- 若 data 包含相对路径资源，请确保其为绝对 URL，或在 HTML 中显式设置 <base href="https://your-domain.com/">。
? 进阶建议：
- 对不可信 HTML，务必在服务端或前端使用 DOMPurify.sanitize(data) 预处理，再传入 srcDoc；
- 为适配移动端，可在 data 的 <head> 中注入响应式 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1">； - 如需动态调整 iframe 高度，可通过 postMessage 与 iframe 内容通信（需双方配合）。
总结：当目标是保真还原 HTML 邮件的原始视觉与行为时，<iframe srcDoc /> 是比 dangerouslySetInnerHTML 更可靠、更安全、更符合语义的选择——它不是“绕过问题”，而是回归 HTML 的文档本质。
立即学习“前端免费学习笔记（深入）”；
