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>