v-html指令怎么防止XSS注入

今天面试，被问到了这个问题，网上查阅了一下，找到了一个解决方案

1. 输入指令 npm install vue-dompurify-html    安装vue-dompurify-html这个插件

2. 在mian.js中做出配置

import { createApp } from 'vue'
import App from './App.vue'
 
import './assets/main.css'
 
const app = createApp(App)
// 防止 v-html 进行 xss注入
import VueDOMPurifyHTML from 'vue-dompurify-html'
app.use(VueDOMPurifyHTML)
 
app.mount('#app')

3. 把 v-html 指令替换为 v-dompurify-html 指令即可

<template>
  <h2>App --- {{ num }}</h2>
  <div v-dompurify-html="article"></div>
</template>
 
<script>
export default {
  name: 'App',
  setup() {
    const num = 10
    const article = `<span style="color: red">红色的</span>`
    return {
      num,
      article,
    }
  },
}
</script>
 
<style scoped></style>