1,直接使用v-html渲染富文本代码安全性比较低,如果你使用 v-html
来插入任何用户可控的内容,那么攻击者可以通过提交恶意脚本,将这些脚本嵌入到你的网页中。攻击者可以利用这些脚本来获取用户的敏感信息,如cookie、session tokens等
2,在vue中我们可以通过vue-dompurify-html来解决这个问题
解决方法:以下vue2示例
第一步 安装vue-dompurify-html,这里有一个细节如果使用vue2的话安装指定版本4.0及以上,vue3使用安装5.0版本,不要问我怎么知道的
npm install vue-dompurify-html
第二步
// 在main.js中引入
import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
第三步
// 在vue页面中使用,就可以达到xss防御的效果
<div v-dompurify-html="rawHtml"></div>