xss输入前对输入内容进行处理和跨域浏览器设置

关键代码

  htmlEncode(handleString) {
      return handleString
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/ /g, '&nbsp;')
        .replace(/\'/g, '&#39;')
        .replace(/\"/g, '&quot;')
    }

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!-- <p v-html="">{{this.form.name}}</p> -->
    <p v-html="this.form.name"></p>
    <p v-html="this.demob"></p>
    <p v-html="this.demoa"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      demoa: '',
      demob: '',
      form: {
        name: 'lll',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  //   watch: {
  //     this.form.name{
  // console.log('aaaaa');
  //     }
  //   }
  watch: {
    // 注意：只能是简单的路径，不支持表达式。
    'form.name'(newValue) {
      // ...
      console.log('ccccc')
    }
  },

  methods: {
    onSubmit() {
      console.log('submit!')
      console.log('this.form.name', this.form.name)
      this.demob = this.form.name
      if (this.form.name) {
        // const aa = this.htmlEncode(this.form.name)
        // console.log('aa', aa)
        this.demoa = this.htmlEncode(this.form.name)
      }
    },
    htmlEncode(handleString) {
      return handleString
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/ /g, '&nbsp;')
        .replace(/\'/g, '&#39;')
        .replace(/\"/g, '&quot;')
    }
  }
}
</script>

<style></style>

前端模拟xss

<template>
  <div>
    <h1>xss攻击</h1>
    <input type="text" v-model="text">
    <button @click="addSumit">评论</button>
<!-- <img src="23" onerror='alert("被攻击了")' alt=""> -->
    <ul>
      <li v-for="(item,index) in msgList" :key="index">
        <span v-html="item"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '',
      msgList: []
    }
  },
  methods: {
    addSumit() {
      let arr = []
      arr = localStorage.getItem('item')
      arr = JSON.parse(arr)
      !arr && (arr = [])
      arr.push(this.text)
      this.msgList = arr
      this.text = ''
      localStorage.setItem('item', JSON.stringify(arr))
      console.log('this.msgList', this.msgList)
    }
    // addSumit() {
    //   let arr = []
    //   localStorage.setItem('item', JSON.stringify(arr))
    //   arr = localStorage.getItem('item')
    //   arr = JSON.parse(arr)
    //   !arr && (arr = [])
    //   arr.push(this.text)
    //   this.msgList = arr
    //   this.text = ''
    //   localStorage.setItem('item', JSON.stringify(arr))
    //   console.log('this.msgList', this.msgList)
    // }
    // addSumit() {
    //   let arr = []
    //   arr = localStorage.getItem('item')
    //   arr = JSON.parse(arr)
    //   !arr && (arr = [])
    //   const aa = this.htmlEncode(this.text)
    //   arr.push(aa)
    //   // arr.push(this.text)
    //   this.msgList = arr
    //   this.text = ''
    //   localStorage.setItem('item', JSON.stringify(arr))
    //   console.log('this.msgList', this.msgList)
    // },
    // htmlEncode(handleString) {
    //   return handleString
    //     .replace(/&/g, '&amp;')
    //     .replace(/</g, '&lt;')
    //     .replace(/>/g, '&gt;')
    //     .replace(/ /g, '&nbsp;')
    //     .replace(/\'/g, '&#39;')
    //     .replace(/\"/g, '&quot;')
    // }

  }
}
</script>

<style>

</style>

跨域浏览器设置

D:\temp是D盘新建的一个空文件夹

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir=D:\temp