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>
v-html運行時在created階段觸發(fā)invokeCreateHooks函數(shù),進而執(zhí)行updateDOMProps函數(shù)，更新元素的innerHTML內(nèi)容。
?? v-html指令最終調(diào)用的是innerHTML方法將指令的value插入到對應(yīng)的元素里。這就是造成xss攻擊的‘漏洞’了。當(dāng)然vue官網(wǎng)也給出了提示: 只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上。
解決思路：
通過上面的問題查找我們可以確定了造成攻擊事件主要的原因就是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>
方法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會把除了標(biāo)簽和內(nèi)容之外的所有東西都給過濾掉，如calss，style過濾掉，那么樣式就展現(xiàn)不出來了，導(dǎo)致美觀度不夠。
方法4 數(shù)據(jù)轉(zhuǎn)為指定類型
如果確認(rèn)后端返回的數(shù)據(jù)類型，可以直接轉(zhuǎn)換類型。
比如后端返回一個數(shù)字，前端獲取到了返回一個標(biāo)簽展示出來，為了避免后端返回的不是數(shù)字類型，使用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>
<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>
方法5：lodash escape 方法轉(zhuǎn)碼
import escape from 'lodash/escape';
