### [dialog 展示第三方内容的三道防护](https://www.huociguo.com/article/1869)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 🛡️ 弹出第三方 HTML，图省事直接 注入，结果 XSS、样式污染、焦点失控接踵而至。三道防护缺一不可。第一…

🛡️ `<dialog>` 弹出第三方 HTML，图省事直接 `innerHTML` 注入，结果 XSS、样式污染、焦点失控接踵而至。三道防护缺一不可。

第一道，过滤。第三方 HTML 先过 DOMPurify，剥掉 script、onerror 等危险节点，只允许白名单标签与属性。

![dialog 弹窗示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-10902544.jpeg)

弹窗承载外部内容，需先过滤

第二道，清空。注入前 `replaceChildren()` 清掉旧节点，避免残留事件与样式串味。

第三道，隔离。弹窗内强制重置样式作用域，关键交互补 `aria` 并设焦点陷阱，防止 Tab 跑到遮罩外。⚠️ dialog 本身无沙箱，这层必须手动做。

其余风险：来源不可信时，优先用 iframe 加沙箱，比手动防御更彻底。

**Tags:** dialog 第三方, DOMPurify 过滤, innerHTML 注入, XSS 防护, 焦点陷阱

**Categories:** HTML5

---