百度安全规定里是不允许vue项目使用v-html指令的,就是为了避免xss攻击,最近的业务场景就是展示一些静态的语句段落,但是并不是一整段,而是夹杂有换行的文段,所以在静态段落字符串text中拼接了<br />标签,然后通过v-html="text"渲染在<div>里,提交走流水线的时候报错了,就是因为为了防止xss攻击v-html被公司禁止了。
试想一下,如果我要通过v-html渲染的数据是用户可以操作的数据,比如从数据库中获取的数据,如果说用户把一些恶意脚本(<script>)字符串写入了数据库然后我们正好需要对这个数据库字段进行展示,是不是就把恶意的<script>脚本渲染在页面上了,就造成了xss攻击。
所以也就比较好理解xss的防御措施了,一是对用户的输入数据进行足够充分的过滤,通俗来说就是把html标签这种敏感的字符串进行过滤;二就是考虑如果数据库中存在了不安全字符串,要设法减少这类字符串渲染为dom的渠道,就比如禁用v-html指令。
v-html也不是完全不能用,使用vue-dompurify-html插件即可,使用方法:
// 安装插件
npm install vue-dompurify-html
// 注册插件
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
// 使用v-dompurify-html代替v-html指令
<div v-dompurify-html="rawHtml"></div>