解决v-html可能存在XSS漏洞风险

1. XSS

XSS（跨站脚本攻击）是一种常见的Web应用程序安全漏洞，它允许攻击者将恶意脚本注入到受影响的网页中，然后在用户浏览器中执行这些恶意脚本。这种攻击利用了网页应用程序未能正确验证和过滤用户输入的漏洞。

XSS漏洞的风险在于它可以导致以下问题：

• 盗取用户信息：攻击者可以通过在受影响的网页中注入恶意脚本，窃取用户的敏感信息，如登录凭据、会话令牌、个人身份信息等。

• 会话劫持：攻击者可以利用XSS漏洞来劫持用户的会话，即获取用户的身份认证令牌或会话标识符，并以受害者的身份执行恶意操作。

• 恶意重定向：攻击者可以通过注入恶意脚本来重定向用户到恶意网站，这可能导致进一步的攻击，如钓鱼攻击、安装恶意软件等。

• 网站破坏：攻击者可以利用XSS漏洞来修改网页内容、插入恶意链接或图片，破坏网站的正常功能，甚至篡改网站的外观。

2. 解决方法

原因： 使用v-html指令将用户提供的数据直接插入到模板中时，如果未经适当的验证和过滤，恶意用户可以注入恶意的HTML代码。这可能会导致恶意脚本在用户浏览器中执行，从而造成XSS攻击。

解决： 使用vue-dompurify-html 在内部引入了 DOMPurify 对 html 代码进行净化清理

// 安装
npm install vue-dompurify-html

// main.js 中引入
import VueDOMPurifyHTML from 'vue-dompurify-html'
const app = createApp(App)
app.use(VueDOMPurifyHTML)

// 使用
<template>
  <div v-dompurify-html="rawHtml"></div>
</template>
<script setup>
import { ref } from "vue";
const rawHtml = ref(`<span>插入内容</span>`);
</script>

参考文章：https://www.npmjs.com/package/vue-dompurify-html