v-html的XSS风险与防范(个人笔记)

v-html的安全问题

v-html指令用于向指定节点中渲染包含HTML结构的内容。虽然它可以识别HTML结构，但使用它来动态渲染任意HTML内容是超级危险的，容易导致XSS攻击。具体来说，v-html会替换掉节点中所有的内容，并识别HTML结构，这使得它可以执行用户提供的HTML代码，从而引发安全问题。

具体处理方法

例如，可以使用DOMPurify库来清理用户输入的HTML内容。第一安装DOMPurify：

文档：https://www.npmjs.com/package/dompurify

npm install dompurify

然后在Vue中引入并封装一个全局指令：

import { createApp } from  vue ;
import App from  ./App.vue ;
import router from  ./router/router.js ;
import DOMPurify from  dompurify ;
let app = createApp(App);
app.directive( purify-html , {
  updated: (el, binding, vnode) => {
    let clean = DOMPurify.sanitize(binding.value);
    el.innerHTML = clean;
  }
});
app.mount( #app );

使用这个自定义指令来安全地使用v-html：

<div v-purify-html="articlesdet.content" data-id="123"></div>