单页应用（SPA）的安全问题

单页应用（SPA）因其流畅的用户体验和高效的性能成为现代前端开发的主流选择，但同时也引入了与传统多页应用不同的安全挑战。从跨站脚本攻击到认证漏洞，SPA的安全问题需要开发者特别关注。

跨站脚本攻击（XSS）

SPA 动态渲染内容的特性使其更容易受到 XSS 攻击。攻击者可能通过注入恶意脚本篡改 DOM 或窃取用户数据。例如，以下代码片段未对用户输入进行转义：

// 不安全的渲染方式
const userInput = '<script>alert("XSS")</script>';
document.getElementById('content').innerHTML = userInput;

防御措施包括：

1. 内容安全策略（CSP）：通过 HTTP 头限制脚本来源：

   Content-Security-Policy: default-src 'self'
   

2. 转义用户输入：使用 textContent 替代 innerHTML，或使用库如 DOMPurify：

   import DOMPurify from 'dompurify';
   document.getElementById('content').innerHTML = DOMPurify.sanitize(userInput);
   

跨站请求伪造（CSRF）

SPA 通常依赖 API 调用，而传统的 Cookie 认证方式容易受到 CSRF 攻击。攻击者可诱导用户访问恶意页面发起非预期请求。例如：

<!-- 恶意页面 -->
<form action="https://api.example.com/transfer" method="POST">
  <input type="hidden" name="amount" value="1000">
</form>
<script>document.forms[0].submit()</script>

解决方案：

1. SameSite Cookie 属性：设置 Cookie 的 SameSite=Strict 或 Lax。
2. CSRF Token：服务端生成 Token 并验证：

   // 前端在请求头中添加 Token
   fetch('/api/transfer', {
     headers: { 'X-CSRF-Token': getTokenFromCookie() }
   });
   

认证与会话管理漏洞

SPA 常使用 JWT 或 OAuth 进行认证，但错误实现会导致安全风险：

1. JWT 本地存储风险：将 Token 存储在 localStorage 可能被 XSS 窃取：

   // 不安全存储
   localStorage.setItem('token', 'eyJhbGci...');
   

   改进方案：使用 HttpOnly Cookie 存储敏感信息。

2. Token 过期时间过长：未设置合理过期时间的 JWT 会增加泄露后的风险：

   // 服务端应设置短过期时间
   const token = jwt.sign({ userId: 123 }, 'secret', { expiresIn: '1h' });
   

客户端路由安全问题

SPA 的路由由前端控制，可能导致未授权访问敏感路由。例如：

// 未做权限检查的路由跳转
router.push('/admin/dashboard');

应在路由守卫中进行验证：

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login';
  }
});

敏感数据泄露

SPA 的代码完全暴露在浏览器中，可能导致硬编码密钥或敏感逻辑泄露：

// 反例：硬编码 API 密钥
const API_KEY = 'a1b2c3d4';
fetch(`https://api.example.com?key=${API_KEY}`);

应通过环境变量或后端代理隐藏敏感信息：

// 通过环境变量配置
fetch(import.meta.env.VITE_API_URL);

依赖库的安全风险

第三方库可能引入漏洞。例如，使用过时的 axios 版本可能存在 SSRF 漏洞：

# 检查依赖漏洞
npm audit

定期更新依赖并验证来源：

// package.json 中固定版本号
"dependencies": {
  "react": "18.2.0"
}

前端配置错误

错误的 CORS 配置可能导致数据泄露。例如过度放宽的配置：

// 不安全的后端 CORS 设置
app.use(cors({
  origin: '*' // 允许所有域名
}));

应限制为可信来源：

app.use(cors({
  origin: ['https://trusted.com']
}));

数据序列化漏洞

直接序列化用户输入可能导致原型污染或代码执行。例如：

// 不安全的反序列化
const data = JSON.parse(userControlledString);

使用安全的序列化库如 serialize-javascript：

import serialize from 'serialize-javascript';
const safeData = serialize(data);

实时通信的安全问题

WebSocket 或 SSE 可能未加密或缺乏认证：

// 未加密的 WebSocket 连接
const ws = new WebSocket('ws://example.com/chat');

应使用 wss:// 并验证消息来源：

const ws = new WebSocket('wss://example.com/chat');
ws.onmessage = (event) => {
  if (!isValidSource(event.origin)) return;
};

性能优化与安全的平衡

代码拆分或懒加载可能延迟安全检测。例如动态加载的模块未经验证：

// 动态导入未验证的模块
import('user-provided-module').then(module => module.run());

应通过哈希或签名验证模块完整性：

import(/* webpackIntegrity: "sha256-..." */ './module.js');