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的“安全”替代品)

1  // 安装:
2          npm install vue-dompurify-html
3 
4  // 引入:
5          import VueDOMPurifyHTML from 'vue-dompurify-html'
6          Vue.use(VueDOMPurifyHTML)
7  // 使用:
8          <div v-dompurify-html="rawHtml"></div>

 

posted @ 2022-02-08 11:11  Naynehcs  阅读(2387)  评论(0编辑  收藏  举报