vue项目前端解决xss攻击方案

项目中input框中添加验证方法

// 通过下面正则表达式验证
export function isSpecialCharacter (s) {
  let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;'[\]]/im
  let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/im
 
  if (regEn.test(s) || regCn.test(s)) {
    return true;
  } else {
    return false;
  }
}
// 调用方法  判断是否满足条件
export function validateSpecialCharacters (rule, value, callback) {
  if (!value) {
    callback()
  } else {
    if (isSpecialCharacter(value)) {
      callback('请不要输入特殊符号!')
    } else if(!value.trim().length) {
      callback("请不要只输入空格!")
    } else{
      callback()
    }
  }
}

// 调用上面写好的方法
rules:{
           years: [{ required: true, message: '请选择获奖年份', trigger: 'change' }],
           accountType:[{ required: true, message: '请选择核算类型', trigger: 'change' }],
           emplName:[{ validator:validateSpecialCharacters }]
        },

以上是input框中防止xss攻击解决方法
下面式textarea中防止xss攻击解决方法

1.	安装vue-xss组件
cnpm install --save vue-xss

2.	Main.js引入
import VueXss from 'vue-xss'
Vue.use(VueXss)

3.	页面模块全局使用
<div li v-html="$xss(content)"> </div>  // dom渲染，将&gt;输出<>标签
this.$xss('<script>alert("xss");</' + 'script>')  // js将<>转义成&gt;