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

xxs 攻击就是通过脚本 更改js代码 获取cookie内容
以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事件被拦截了