Vue 3 全栈教程：221.XSS攻击与防御

概述

跨站脚本攻击（Cross-Site Scripting，简称XSS）是Web应用中最常见的安全漏洞之一。XSS攻击允许攻击者将恶意脚本注入到其他用户浏览的网页中，从而窃取用户数据、会话令牌、执行恶意操作等。本集将深入探讨XSS攻击的原理、类型以及在Vue 3应用中如何有效防御XSS攻击。

XSS攻击原理

XSS攻击的核心原理是：攻击者通过各种方式将恶意脚本注入到目标网站的页面中，当其他用户访问该页面时，浏览器会执行这些恶意脚本，从而达到攻击者的目的。

XSS攻击通常分为三种类型：

存储型XSS：恶意脚本被存储在目标服务器的数据库中，当用户访问包含该脚本的页面时，脚本被执行。
反射型XSS：恶意脚本作为URL参数发送给服务器，服务器将其反射到响应中，浏览器执行该脚本。
DOM型XSS：恶意脚本通过修改页面的DOM结构来执行，不需要与服务器交互。

Vue 3中的XSS防御机制

Vue 3内置了多种防御XSS攻击的机制，让开发者能够更安全地构建Web应用。

1. 自动转义模板内容

Vue 3的模板引擎会自动转义所有插值内容，防止恶意脚本执行。

<template>
  <!-- 恶意脚本会被自动转义 -->
  <div>{{ userInput }}</div>
</template>

<script setup>
// 假设这是用户输入的恶意内容
const userInput = '<script>alert("XSS Attack!")</script>'
</script>

在上述例子中，Vue会自动将&、<、>、"、'和`等特殊字符转义为HTML实体，从而防止脚本执行。

2. v-html指令的安全使用

当需要动态渲染HTML内容时，Vue提供了v-html指令。但使用v-html时需要特别小心，因为它会直接插入HTML，可能导致XSS攻击。

<template>
  <!-- 危险：直接渲染用户输入的HTML -->
  <div v-html="userHtml"></div>
  
  <!-- 安全：只渲染经过验证的HTML -->
  <div v-html="sanitizedHtml"></div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify' // 使用第三方库净化HTML

const userHtml = '<script>alert("XSS Attack!")</script>'

// 使用DOMPurify净化HTML内容
const sanitizedHtml = computed(() => {
  return DOMPurify.sanitize('<p>安全的HTML内容</p>')
})
</script>

3. 避免使用innerHTML

在Vue应用中，应尽量避免直接操作DOM，特别是使用innerHTML属性，因为这可能导致XSS攻击。

<template>
  <div ref="contentRef"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DOMPurify from 'dompurify'

const contentRef = ref(null)

onMounted(() => {
  // 危险：直接使用innerHTML
  // contentRef.value.innerHTML = '<script>alert("XSS Attack!")</script>'
  
  // 安全：使用净化后的HTML
  contentRef.value.innerHTML = DOMPurify.sanitize('<p>安全的内容</p>')
})
</script>

4. 安全处理URL参数

反射型XSS攻击通常通过URL参数注入恶意脚本。在Vue应用中，需要安全处理URL参数。

<template>
  <div>
    <h1>欢迎，{{ username }}</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const username = ref('')

onMounted(() => {
  // 从URL获取参数
  const urlParams = new URLSearchParams(window.location.search)
  const name = urlParams.get('name')
  
  // 安全处理：只接受合法的字符串，过滤危险字符
  if (name) {
    // 移除HTML标签和危险字符
    username.value = name.replace(/<[^>]*>/g, '')
  }
})
</script>

5. 使用Content Security Policy (CSP)

Content Security Policy (CSP)是一种HTTP响应头，用于限制浏览器可以加载和执行的资源。在Vue应用中配置CSP可以有效防止XSS攻击。

Nginx配置示例：

server {
  # ... 其他配置 ...
  
  # 设置Content Security Policy
  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self';";
  
  # ... 其他配置 ...
}

Vite配置示例：

在vite.config.js中配置CSP：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    headers: {
      'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self';"
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 代码分割配置
        }
      }
    }
  }
})

6. 安全使用第三方库

在使用第三方库时，需要确保它们是安全的，并且及时更新到最新版本，以修复已知的安全漏洞。

# 安装依赖时检查安全漏洞
npm audit

# 更新依赖
npm update

# 安装依赖安全检查工具
npm install -g npm-check-updates

# 检查可更新的依赖
ncu

7. 输入验证与过滤

在处理用户输入时，应进行严格的验证和过滤，只允许合法的输入。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" placeholder="用户名">
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')

const handleSubmit = () => {
  // 验证用户名：只允许字母、数字和下划线
  const usernameRegex = /^[a-zA-Z0-9_]+$/
  if (!usernameRegex.test(username.value)) {
    alert('用户名只允许字母、数字和下划线')
    return
  }
  
  // 处理合法输入
  console.log('用户名：', username.value)
}
</script>

在处理用户会话时，应使用HTTP-only Cookie来存储会话令牌，防止XSS攻击者窃取会话信息。

后端设置HTTP-only Cookie示例（Express）：

app.get('/login', (req, res) => {
  // 验证用户
  // ...
  
  // 设置HTTP-only Cookie
  res.cookie('sessionId', 'session-token', {
    httpOnly: true, // 只允许HTTP访问，禁止JavaScript访问
    secure: true,   // 只在HTTPS下传输
    sameSite: 'strict' // 防止CSRF攻击
  })
  
  res.send('登录成功')
})

XSS攻击实战演示与防御

让我们通过一个实际的例子来演示XSS攻击，并展示如何防御。

1. 存储型XSS攻击演示

攻击场景：

攻击者在评论区输入恶意脚本
脚本被存储到数据库
其他用户查看评论时，脚本被执行

防御措施：

对用户输入进行验证和过滤
存储前净化HTML内容
渲染时再次验证

<template>
  <div>
    <h2>评论区</h2>
    
    <!-- 评论输入表单 -->
    <form @submit.prevent="submitComment">
      <textarea v-model="comment" placeholder="写下你的评论..."></textarea>
      <button type="submit">提交评论</button>
    </form>
    
    <!-- 评论列表 -->
    <div class="comments">
      <div v-for="item in comments" :key="item.id" class="comment">
        <!-- 使用v-html渲染，但先净化 -->
        <div v-html="sanitizeHtml(item.content)"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DOMPurify from 'dompurify'

const comment = ref('')
const comments = ref([
  { id: 1, content: '<p>这是一条正常评论</p>' },
  { id: 2, content: '<script>alert("XSS Attack!")</script>' }
])

// 净化HTML内容
const sanitizeHtml = (html) => {
  return DOMPurify.sanitize(html)
}

// 提交评论
const submitComment = () => {
  if (comment.value.trim()) {
    // 净化评论内容后再存储
    const sanitizedComment = sanitizeHtml(comment.value)
    comments.value.push({
      id: Date.now(),
      content: sanitizedComment
    })
    comment.value = ''
  }
}
</script>

<style scoped>
.comments {
  margin-top: 20px;
}

.comment {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 4px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

2. DOM型XSS攻击演示