今天面试,被问到了这个问题,网上查阅了一下,找到了一个解决方案
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>
原文链接:https://blog.csdn.net/qq_52845451/article/details/126730431
此处评论已关闭