关于v-html容易造成的xss攻击问题解决

今天再用到wangeditor这个工具的时候，存储评论和文章数据，我是直接将文本编辑器的内容以html格式直接存储到数据库，这里在前端用v-html渲染的时候就可能会造成攻击者直接将带有恶意代码的评论，直接发送到数据库，这就需要在渲染前做一个过滤

首先是xss工具

npm install xss

这个工具虽然好用，但是会导致部分渲染失效，导致不美观

这里就可以使用以下工具，HTML代码在解释之前用DOMPurify进行清理。

https://github.com/LeSuisse/vue-dompurify-html

使用起来也很简单

pnpm install vue-dompurify-html

因为我是在nuxt3中使用的，可以在plugins中添加上以下文件VueDompurifyHtml.js（vue中直接在main.js中添加上对应文件的use即可）

import { defineNuxtPlugin } from "#app";
import VueDOMPurifyHTML from "vue-dompurify-html";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDOMPurifyHTML);
});