import DOMPurify from 'dompurify' 这个是什么工具

<think>嗯，用户问的是关于DOMPurify这个工具是什么，以及它的用途、功能和使用方法。首先，我需要回顾一下自己之前对DOMPurify的了解。DOMPurify是一个用于净化HTML的JavaScript库，主要用于防止XSS攻击。用户之前的问题中提到了他们在使用el-upload组件处理Word文件时用到了DOMPurify来过滤内容，所以可能他们现在想更深入地了解这个工具。接下来，我需要参考用户提供的引用内容。引用[1]提到了isomorphic-dompurify，这是一个让DOMPurify在服务器端和客户端都能使用的项目。这说明用户可能对跨环境使用DOMPurify感兴趣，或者需要知道如何在不同的环境中正确配置。引用中的其他内容，比如Underscore.js、Vue的状态管理和插件使用，可能关联到如何在Vue项目中集成DOMPurify，但用户当前的问题主要集中在DOMPurify本身，所以可能需要优先处理核心功能。用户的具体问题包括：DOMPurify是什么，它的用途，如何使用的，以及功能介绍。我需要分点回答，确保每个部分都清晰。首先定义DOMPurify，然后说明其核心用途，比如XSS防护，接着介绍主要功能，如HTML净化、配置选项、跨环境支持等。使用部分需要给出具体的代码示例，特别是如何在Vue中使用，因为用户之前的代码片段是Vue相关的。还要注意用户可能是在前端处理用户上传的文件内容，比如Word转HTML后的显示，这时候安全过滤尤为重要。需要强调DOMPurify在防止恶意脚本注入方面的作用。同时，引用[1]提到的isomorphic-dompurify可能对服务器端渲染（SSR）应用有帮助，用户可能在使用Nuxt.js或类似框架，所以需要提到这一点。 另外，用户可能遇到的实际问题，比如配置白名单、处理SVG或MathML，或者性能优化，这些都可以作为功能介绍的一部分。需要确保回答覆盖这些方面，并给出示例代码，如配置ALLOWED_TAGS和ALLOWED_ATTR。最后，生成的相关问题需要与DOMPurify相关，比如如何与Vue集成、处理特定内容、性能影响、替代方案等，这样用户可以有进一步探索的方向。</think>### DOMPurify 工具详解 #### 一、工具定义与核心用途 **DOMPurify** 是一个专注于 **HTML/XSS 净化** 的 JavaScript 安全库，可通过智能过滤机制消除 HTML 内容中的危险代码，防止跨站脚本攻击（XSS）[^1]。其核心价值体现在： - **安全防护**：拦截恶意脚本注入（如 `<script>alert(1)</script>`） - **内容净化**：保留安全 HTML 标签（如 `<b>`, `<img src="safe.jpg">`） - **跨平台兼容**：支持浏览器、Node.js、React/Vue 等框架 #### 二、核心功能特性 | 功能模块 | 技术实现 | 应用场景示例 | |-------------------|--------------------------------------------------------------------------|----------------------------------| | 智能净化引擎 | 白名单过滤机制，默认允许标准 HTML5 标签 | 过滤用户输入的富文本 | | 自定义配置 | 通过 `ALLOWED_TAGS` 和 `ALLOWED_ATTRS` 扩展允许内容 | 保留特定 SVG/MathML 标签 | | 跨环境支持 | 提供浏览器端和 Node.js 端统一 API | SSR 应用（如 Nuxt.js） | | 高性能处理 | 优化后的 DOM 解析算法，处理速度达 10MB/s | 大型文档实时过滤 | #### 三、典型使用场景 1. **用户输入净化**（过滤评论/留言） ```javascript const dirty = '<div onclick="stealCookie()">点击有奖</div>'; const clean = DOMPurify.sanitize(dirty); // 输出: <div>点击有奖</div> ``` 2. **富文本编辑器防护**（配合 Quill.js/TinyMCE） ```vue <template> <div v-html="purifiedContent"></div> </template> <script setup> import DOMPurify from 'dompurify'; const rawContent = ref('<img src=x onerror=alert(1)>'); const purifiedContent = computed(() => DOMPurify.sanitize(rawContent.value)); </script> ``` 3. **服务端数据清洗**（Node.js 环境） ```javascript const { createDOMPurify } = require('isomorphic-dompurify'); // 引用[1] const { JSDOM } = require('jsdom'); const window = new JSDOM('').window; const DOMPurify = createDOMPurify(window); const sanitized = DOMPurify.sanitize(untrustedHTML); ``` #### 四、进阶配置示例 ```javascript // 允许自定义数据属性 DOMPurify.addHook('afterSanitizeAttributes', node => { node.setAttribute('data-custom', 'safe-value'); }); // 配置白名单 const config = { ALLOWED_TAGS: ['b', 'i', 'u', 'custom-tag'], ALLOWED_ATTR: ['style', 'data-*'], FORBID_CONTENTS: ['script', 'style'] }; DOMPurify.sanitize(dirtyHTML, config); ``` #### 五、性能优化建议 1. **缓存配置对象**：重复使用相同配置时避免重复创建 2. **预处理内容**：对已知安全内容跳过净化流程 3. **Web Worker 支持**：对大文件采用并行处理 ```javascript worker.postMessage({ html: largeContent }); ```