常见网络安全攻击种类

XSS攻击-跨站脚本攻击

<template>
  <div id="app">
    <div class="content">

      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span v-html="item"></span>
        </li>
      </ul>
    </div>
    <input type="text" v-model="msg" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: '',
      list: JSON.parse(localStorage.getItem('list')) || []
    }
  },
  methods: {
    saveToStorage (item) {
      const list = JSON.parse(localStorage.getItem('list')) || []
      list.push(item)
      localStorage.setItem('list', JSON.stringify(list))
    },
    handleSubmit () {
      this.list.push(this.msg)
      this.saveToStorage(this.msg)
    }
  }
}
</script>

localStorage模拟存入数据库

本用户存在这张图片，但其他用户不存在的时候，就会触发onerror，会暴漏用户的cookie信息等，也可以发送请求，把数据传给其他的网站

解决方法

npm install xss

import xss from xss

<ul>
    <li v-for="(item, index) in list" :key="index">
      <span v-html="xss(item)"></span>
    </li>
</ul>

xss (item) {
  return xss(item)
}

XSRF/CSRF-跨站请求伪造

src请求会把用户的cookie带进去

<div id="app">
    <button @click="login">登录</button>
    <button @click="pay">购买</button>
    <!-- img的src可以跨域 -->
    <img src="https://www.baidu.com" />
</div>

解决方法把支付接口换成post请求接口更复杂

SSRF-服务器端请求伪造

一种由攻击者构造的、服务端发起请求的一个安全漏洞。一般情况下，SSRF目标主要是内部系统

解决办法服务端对返回信息做过滤在公网的接口统一错误的提示,每次都报一样的错误，不好猜限制请求协议

点击劫持

A网站危险的第三方网站通过 iframe 形式把A网站引入进来，把两个页面的button按钮重合，把iframe的头名都调成0，点击第三放网站，其实点击的是A网站

解决方法在服务端，设置一个中间件，设置一个响应头，设置"X-Frame-Options", "DENY",使A网站不能被iframe使用