Vue3前端项目中使用DOMPurify库防范XSS攻击的最佳实践与技巧

Safe content

alert("XSS")'; // 净化后返回安全的 HTML 字符串 let sanitizedHtml = DOMPurify.sanitize(rawHtml); console.log('过滤前：', rawHtml); console.log('过滤后：', sanitizedHtml); // 只剩下

Safe content

``` 可以看到，试图混入的 `

Safe content

'; const clean = DOMPurify.sanitize(dirtyInput); // 被移除的元素会记录在一个数组里 console.log(DOMPurify.removed); ``` 这个 `removed` 属性在调试时价值巨大，让你清晰看到防护工作的细节。 **2. 响应式绑定** 在 Vue 3 中，最顺手的用法是将它和 `computed` 绑定，让安全净化成为数据流的一部分。 ```html ``` 当用户输入变化时，`sanitizedInput` 自动净化，`v-html` 渲染的永远是安全的 DOM，简单高效。 **3. 封装成指令** 如果 `v-html` 在项目中广泛使用，每次都写 `DOMPurify.sanitize` 略显繁琐。可以将其封装成自定义指令，一劳永逸。 ```ja vascript // main.js 里注册指令 import { createApp } from 'vue'; import App from './App.vue'; import DOMPurify from 'dompurify'; const app = createApp(App); app.directive('safe-html', (el, binding) => { el.innerHTML = DOMPurify.sanitize(binding.value); }); app.mount('#app'); ``` 然后在模板中直接使用： ```html ``` 简洁、优雅，而且安全。 ### 最后 DOMPurify 是 Vue 3 中处理不安全 HTML 的一把利器。API 简单，配置灵活，钩子系统强大，足以覆盖绝大多数场景。不过有一个原则必须牢记：**安全是一场多层防御的战争**。客户端净化只是最后一道屏障，绝不能作为唯一防线。后端的数据校验、正确的 CSP 策略，这些防线一个都不能少。切记，不要把所有赌注都压在客户端净化上。