火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

dialog 展示第三方内容的三道防护

发布于 1天前
4

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

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

dialog 弹窗示意
弹窗承载外部内容,需先过滤

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

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

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

常见问题(FAQ)

直接 innerHTML 危险吗
危险。第三方 HTML 可能带脚本与事件处理器,直接注入会造成 XSS。
第一道怎么防
用 DOMPurify 过滤,仅放行白名单内的标签与属性。
为什么要 replaceChildren
清空旧节点,避免残留的事件监听与样式污染新内容。
dialog 自带沙箱吗
不自带。需手动重置样式作用域并设焦点陷阱,防止焦点逃逸。
更彻底的方案
来源不可信时用 iframe 加 sandbox,隔离比手动防御更干净。
dialog 第三方DOMPurify 过滤innerHTML 注入XSS 防护焦点陷阱
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1