XSS（Cross Site Scripting）

XSS（Cross Site Scripting）跨站脚本攻击，是一种利用网页开发时没有对用户输入数据进行足够过滤或验证，导致恶意用户能将代码注入到网页上，在用户浏览器中运行恶意脚本的攻击方式。攻击者通过在网页中注入恶意 JavaScript 脚本，使得用户浏览器中运行该脚本，从而获取用户的敏感信息、控制用户账号以及其他恶意行为。

XSS 攻击可以分为 3 类：存储型（持久型）、反射型（非持久型）、DOM 型。

存储型 XSS

注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。

<template>
  <el-row :gutter="8">
    <el-col :span="12">
      <el-button class="mb-5" @click="onSubmit">提交保存</el-button>
      <el-input v-model="value" type="textarea"></el-input>
    </el-col>
    <el-col :span="12">
      <el-button class="mb-5" @click="onFetch">请求展示</el-button>
      <div v-html="data"></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const data = ref('')
function onSubmit() {
  sessionStorage.setItem('xss-value', value.value)
}
function onFetch() {
  data.value = sessionStorage.getItem('xss-value')
}
</script>

用 sessionStorage 来模拟与服务器的交互，在左侧输入框中填入 <img src="/favicon.ico" onload="alert('xss 攻击')" /> 并提交保存。

右侧模拟用户请求数据渲染，会发现图片加载了，并且执行了 js 代码。

反射型 XSS

当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web 服务器将注入脚本，比如一个错误信息，搜索结果等 返回到用户的浏览器上。由于浏览器认为这个响应来自"可信任"的服务器，所以会执行这段脚本。

DOM 型 XSS

通过修改原始的客户端代码，受害者浏览器的 DOM 环境改变，导致有效载荷的执行。也就是说，页面本身并没有变化，但由于 DOM 环境被恶意修改，有客户端代码被包含进了页面，并且意外执行。