处理v-html的潜在XSS风险

没有进行防止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
})