v-html 防止XSS注入

v-html更新元素的innerHTML,内容按普通HTML插入,不会作为Vue模版进行编译。在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击,只在可信内容上使用v-html,永不用在用户提交的内容上,

在使用v-html时为了防止XSS攻击,可以安装 npm install xss 插件,但是我们在渲染富文本编辑的文章时,使用XSS会把除了标签和内容之外的所有东西都给过滤掉,如calss,style过滤掉,那么样式就展现不出来了,导致美观度不够

解决办法: 使用vue-dompurify-html插件(vue-dompurify-html是v-html的“安全”替代品)

// 安装:shell
npm install vue-dompurify-html

// 引入:
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)

// 使用:
<div v-dompurify-html="rawHtml"></div>
posted @ 2024-03-21 14:58  天宁哦  阅读(500)  评论(0编辑  收藏  举报