VueDOMPurifyHTML 是一个 Vue.js 插件 ，用于在 v-html 指令中安全地渲染 HTML 内容，防止 XSS（跨站脚本攻击） 风险。
作用
- 解决
v-html的安全问题
Vue 的v-html会直接渲染原始 HTML，如果内容来自用户输入或外部 API，可能包含恶意脚本（如<script>alert('XSS')</script>）。
VueDOMPurifyHTML使用 DOMPurify（一个安全的 HTML 清理库）对内容进行过滤，只保留安全的 HTML 标签和属性。
基本用法
1.安装
npm install vue-dompurify-html dompurify
2.在 Vue 项目中注册
import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
3.在模板中使用
<div v-dompurify-html="userProvidedHtml"></div>
（替代原本不安全的 v-html）
示例：
<template>
<div v-dompurify-html="rawHtml"></div>
</template><script>
export default {
data() {
return {
rawHtml: '<span style="color: red;">安全内容</span><script>alert("恶意代码会被删除")</script>'
}
}
}
</script>
输出结果：
- 渲染
<span style="color: red;">安全内容</span> - 自动移除
<script>标签及其内容，避免 XSS 攻击。
适用场景
- 渲染富文本内容（如 CMS 文章、评论等）
- 需要保留基本 HTML 样式（如加粗、链接），但过滤危险代码
对比原生 v-html
| 方式 | 安全性 | 是否过滤恶意代码 |
|---|---|---|
v-html |
❌ 不安全 | 直接渲染原始 HTML |
v-dompurify-html |
✅ 安全 | 自动清理危险标签 |
推荐在需要动态渲染 HTML 时优先使用此插件，而不是直接使用 v-html。