沒有進行防止xss攻擊的例子

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

結果，js事件被執行，彈出彈框，我們要杜絕這種情況，保留a標簽，攔截onclick事件

解決辦法

法一：

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

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 })

法二：
在業務代碼里使用xss函數處理，不能保證團隊每一個成員都會使用xss函數處理，作為前端的架構師，我們需要從項目整體的考慮來處理這類問題，不能指望通過規范來約束團隊成員
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;}); }

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。