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>