dialog标签无自动隔离能力，直接innerhtml注入第三方html会导致xss、样式污染、焦点失控和布局破坏；必须经dompurify过滤、replacechildren清空、强制重置样式三步防御。
dialog 标签本身不提供内容沙箱或自动隔离能力，直接展示第三方内容（如 HTML 片段、用户提交的富文本、iframe 嵌入）存在 XSS、样式污染、焦点失控和布局破坏等风险。不能靠 showModal() 一调就完事。
为什么直接 innerHTML += 第三方 HTML 是危险的
第三方 HTML 可能含 <script></script>、onerror、javascript: 链接、恶意 iframe 或 base 标签——这些在 dialog 内执行时，和在 body 中一样拥有完整页面上下文权限。
-
dialog不是 iframe，没有同源/沙箱边界，所有脚本共享当前 window - 即使清空
dialog.innerHTML后再赋值，已执行的脚本不会被回滚 - CSS 会全局泄漏：第三方
<style></style>可覆盖你整个页面的按钮、字体、z-index - 第三方设了
tabindex或autofocus，可能绕过你原本的焦点管理逻辑
安全注入第三方 HTML 的三个硬性步骤
必须按顺序做全，缺一不可：
- 用
DOMPurify.sanitize(html, {ALLOWED_TAGS: [...], ALLOWED_ATTR: [...]})过滤 HTML —— 不要用正则替换，也不要用textContent简单转义（会丢失结构） - 将净化后的内容插入前，先清空
dialog并移除所有子节点：dialog.replaceChildren()（比innerHTML = ''更彻底，避免残留事件监听器） - 插入后，立即重置关键样式并限制作用域：
dialog.querySelector('style')若存在则移除；对所有子元素强制style.cssText = 'all: unset; box-sizing: border-box;'（防止 margin/padding 溢出）
iframe 方案比 innerHTML 更可控，但仍有坑
若第三方内容本质是独立页面（如预览外部链接），用 <iframe sandbox="allow-scripts allow-same-origin" src="..."></iframe> 是更优解，但需注意：
-
sandbox必须显式声明权限，sandbox=""会禁用 JS 和表单提交，导致内容不可交互 -
allow-same-origin仅在同源时安全；跨源 iframe 无法读取其document，也就无法监听加载完成或错误 - iFrame 默认不继承
dialog的尺寸，需手动设置width: 100%; height: 100%并配合dialog { display: grid; }或height: min(90vh, 600px) - 移动端 Safari 对 sandbox iframe 的
scrolling支持不稳定，建议加scrolling="no"+ 外层overflow-y: auto
focus 和 returnValue 在第三方内容中极易失效
第三方 HTML 可能删掉你的触发按钮、覆盖 dialog.returnValue、或让 close() 调用后焦点落在 iframe 内部无法回到原页面——这些都不会报错，但键盘用户会卡死。
- 关闭后必须手动恢复焦点：
dialog.addEventListener('close', () => triggerBtn?.focus())，且triggerBtn不能依赖 DOM 查询（第三方内容可能已移除它） - 不要依赖
dialog.returnValue接收第三方内容的返回值；改用自定义事件：dialog.dispatchEvent(new CustomEvent('third-party-submit', {detail: data})) - 如果第三方内容含表单，禁止它用
method="dialog"—— 它的value属性不可信，且 Safari 下returnValue恒为空字符串
真正难的不是把内容塞进去，而是确保它进得去、关得掉、焦点不丢、样式不串、返回值不假——每一步都得主动防御，而不是等浏览器“帮忙”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
