沒有進(jìn)行防止xss攻擊的例子

<p v-html="test"></p>export default {data () {return {test: `<a οnclick='alert("xss攻擊")'>鏈接</a>`} }

結(jié)果，js事件被執(zhí)行，彈出彈框，我們要杜絕這種情況，保留a標(biāo)簽，攔截onclick事件

解決辦法

法一：

使用一個(gè)xss的npm包來過濾xss攻擊代碼，給指令的value包上一層xss函數(shù)

npm install xss --save import xss from 'xss'<p v-html="$xss(test)"></p>import xss from 'xss' export default {data () {return {test: `<a οnclick='alert("xss攻擊")'>鏈接</a>`} }Object.defineProperty(Vue.prototype, '$xss', {value: xss })

法二：
在業(yè)務(wù)代碼里使用xss函數(shù)處理，不能保證團(tuán)隊(duì)每一個(gè)成員都會(huì)使用xss函數(shù)處理，作為前端的架構(gòu)師，我們需要從項(xiàng)目整體的考慮來處理這類問題，不能指望通過規(guī)范來約束團(tuán)隊(duì)成員
1.引入xss包并掛載到vue原型上

import xss from 'xss'; Vue.prototype.xss = xss

2.在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;}); }

在編譯前會(huì)將我們從vue-loader傳入的compilerOptions.directives和baseOptions.directives進(jìn)行合并。 這樣我們就能覆蓋html指令。

總結(jié)

以上是生活随笔為你收集整理的处理v-html的潜在XSS风险的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。