vue ---根据白名单过滤HTML(防止XSS攻击)

xss官网：https://jsxss.com/zh/index.html

以nodejs做测试

1.在终端引入xss,命令：

npm install xss --save

 2.在vue的页面进行引入

import xss from 'xss'

3.定义一个变量进行测试

首先测试一个没有进行防止xss攻击的测试

<p v-html="test"></p>

export default {
  data () {
    return {
      test: `<a onclick='alert("xss攻击")'>链接</a>`
    }
}

结果，js事件直接被翻译了

因此应该杜绝这些情况，解决方法如下

4

<p v-html="$xss(test)"></p>

import xss from 'xss'
export default {
  data () {
    return {
      test: `<a onclick='alert("xss攻击")'>链接</a>`
    }
}

Object.defineProperty(Vue.prototype, '$xss', {
  value: xss
})

此时a标签会保留，但是onclick事件被拦截了