v-html xss 攻击
问题：
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root" v-html="message">
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'hello vue<img src/onerror=alert(123)>'
}
},
})
</script>
</body>
</html>
image.png
v-html运行时在created阶段触发invokeCreateHooks函数,进而执行updateDOMProps函数，更新元素的innerHTML内容。
v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里。这就是造成xss攻击的‘漏洞’了。当然vue官网也给出了提示: 只在可信内容上使用 v-html，永不用在用户提交的内容上。
解决思路：
通过上面的问题查找我们可以确定了造成攻击事件主要的原因就是v-html最后渲染的时候是使用的innerHTML方法,这样的话我就有了第一个解决办法,将<>替换成html特殊编码即可.
方法1：
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root" v-html="message">
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'hello vue<img src/onerror=alert(123)>'.replace(/</g,'<')
}
}
})
</script>
</body>
</html>
image.png
方法2 dompurify
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
在需要使用v-html的页面,将v-html改为 v-dompurify-html即可解决xss攻击问题.
缺点：
全部替换很麻烦
方法3 xss
在编译前将从vue-loader传入的compilerOptions.directives和baseOptions.directives进行了合并。 这样我们就能覆盖html指令。
npm isntall xss
同样在main.js页面引入
import xss from 'xss';
Vue.prototype.xss = xss
在vue.config.js中覆写html指令
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
options.compilerOptions.directives = {
html(node, directiveMeta) {
(node.props || (node.props = [])).push({
name: "innerHTML",
value: `xss(_s(${directiveMeta.value}))`
});
}
};
return options;
});
}
缺点：我们在渲染富文本编辑的文章时，使用XSS会把除了标签和内容之外的所有东西都给过滤掉，如calss，style过滤掉，那么样式就展现不出来了，导致美观度不够。
方法4 数据转为指定类型
如果确认后端返回的数据类型，可以直接转换类型。
比如后端返回一个数字，前端获取到了返回一个标签展示出来，为了避免后端返回的不是数字类型，使用parseInt()
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root" v-html="total">
</div>
<script>
new Vue({
el: '#root',
data() {
return {
total: `total: <span class="total">${parseInt(100) || 0}</span>`</span>`
}
}
})
</script>
</body>
</html>
image.png
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root" v-html="total">
</div>
<script>
new Vue({
el: '#root',
data() {
return {
total: `total: <span class="total">${parseInt('<img src/onerror=alert(123)>') || 0}</span>`
}
}
})
</script>
<style>
.total {
color: red;
}
</style>
</body>
</html>
image.png
方法5：lodash escape 方法转码
import escape from 'lodash/escape';
