无需登录 数据私有 本地保存

HTML Sanitizer API演示 - 安全插入HTML

安全工具 开发工具 Sanitizer XSS 安全
51
0
0
0
浏览器兼容性提示：您的浏览器暂不支持 Sanitizer API。
请使用 Chrome 105+ 或 Edge 105+ 以获得完整体验。当前将使用演示模拟模式展示概念。

HTML Sanitizer API 安全演示

浏览器原生 XSS 防护 — 安全清理不可信的 HTML 内容

API就绪
HTML 输入
自定义清理配置
默认配置已移除 <script>、<iframe>、事件属性(on*)等危险内容。 调整后将创建新的 Sanitizer 实例。
清理结果
输入HTML并点击"清理HTML"查看安全渲染结果 

            
            

            
            

               
               
               
            

          

        

      

    


    
    

      
常见问题 & 知识点

      

        
什么是 HTML Sanitizer API？它解决了什么问题？ 

        

          HTML Sanitizer API 是浏览器原生提供的一套安全清理 HTML 内容的接口。它能够自动移除危险的标签（如 <script>、<iframe>）、事件处理器属性（如 onclick、onerror）以及 javascript: 协议等，从而有效防御 跨站脚本攻击（XSS）。与第三方库（如 DOMPurify）相比，Sanitizer API 直接在浏览器引擎层面实现，性能更优，且由浏览器厂商持续维护安全策略。
        

      

      

        
哪些浏览器支持 Sanitizer API？ 

        

          截至 2024 年，Chrome 105+ 和 Edge 105+ 已完整支持 Sanitizer API（包括 Sanitizer 构造函数和 Element.setHTML() 方法）。Firefox 和 Safari 目前仍在开发中，尚未正式支持。在不支持的浏览器中，建议使用 DOMPurify 等成熟库作为 polyfill，或进行特性检测后给出明确提示。
        

      

      

        
Sanitizer API 默认会移除哪些内容？ 

        

          默认配置下，Sanitizer 会移除：
• 危险标签：<script>、<iframe>、<object>、<embed>、<noscript> 等
• 事件属性：所有 on* 属性（如 onclick、onerror、onload）
• 危险协议：javascript:、data:（在特定上下文中）
• 不安全的 SVG/数学标记
同时会保留常规 HTML 标签和安全的属性，确保内容结构基本完整。
        

      

      

        
如何使用自定义配置？可以只允许特定标签吗？ 

        

          可以。在创建 Sanitizer 实例时传入配置对象：
new Sanitizer({ allowElements: ['div','p','span','a','img'], dropAttributes: { '*': ['on*'] }, allowComments: false })
其中 allowElements 指定白名单标签，blockElements/dropElements 指定黑名单，allowAttributes/dropAttributes 控制属性策略。配置非常灵活，能满足不同场景的安全需求。
        

      

      

        
setHTML() 和 sanitize() 有什么区别？ 

        

          element.setHTML(html, { sanitizer }) 是 一步到位 的方法：直接解析、清理并设置元素的内部 HTML。适合"清理后立即渲染"的场景。
sanitizer.sanitize(html) 返回一个 DocumentFragment，你可以将其插入到任意位置或多个位置，更灵活。另外还有 sanitizer.sanitizeFor('div', html) 返回特定类型的清理后元素。
        

      

      

        
Sanitizer API 性能如何？与 DOMPurify 对比呢？ 

        

          由于 Sanitizer API 在浏览器引擎的 C++ 层直接实现，无需经过 JavaScript 层的 DOM 遍历和字符串解析，性能显著优于任何纯 JavaScript 实现的清理库。在大型 HTML 文档的清理测试中，Sanitizer API 通常比 DOMPurify 快 2-5 倍。对于高吞吐量的应用（如实时聊天、评论系统），这一性能优势尤为明显。
        

      

      

        
Sanitizer API 能否完全替代 DOMPurify？ 

        

          在支持的浏览器中，Sanitizer API 可以替代 DOMPurify 用于大多数场景。但需要注意：
• 浏览器兼容性仍需时间覆盖（Firefox/Safari 尚未支持）
• DOMPurify 提供了更多钩子和细粒度配置选项
• 对于需要兼容旧浏览器的项目，建议使用特性检测 + 回退方案
最佳实践：if (typeof Sanitizer !== 'undefined') { /* 使用原生API */ } else { /* 使用DOMPurify */ }
        

      

    


    
    
已复制到剪贴板

  










 🔧 相关工具