VueDOMPurifyHTML 防止 ​​XSS（跨站脚本攻击）​​ 风险

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。