前端安全实战：密码加密、XSS 与 CSRF 防护指南

这段代码虽然能跑通，但在生产环境中极其危险。密码一旦在传输过程中被截获，或者在本地存储时未加密，后果不堪设想。

构建安全的前端架构

要真正保护用户数据，我们需要从密码加密、XSS 防护和 CSRF 防护三个维度入手。

1. 密码加密与存储

密码绝不应该明文存储或传输。服务端应使用哈希算法（如 bcrypt）对密码进行加盐处理。前端负责提交原始密码，后端负责验证。

// utils/auth.js
import bcrypt from 'bcryptjs';

export async function hashPassword(password) {
  const salt = await bcrypt.genSalt(10);
  return await bcrypt.hash(password, salt);
}

export async function comparePassword(password, hashedPassword) {
  return await bcrypt.compare(password, hashedPassword);
}

// api/login.js
export default async function handler(req, res) {
  const { username, password } = req.body;
  const user = await User.findOne({ username });

  if (!user) {
    return res.status(401).json({ error: '用户不存在' });
  }

  const isMatch = await comparePassword(password, user.password);
  if (!isMatch) {
    return res.status(401).json({ error: '密码错误' });
  }

  // 生成 JWT token
  const token = generateToken(user.id);
  res.json({ token });
}

注意，敏感操作必须放在服务端完成，前端只负责收集输入并发送请求。

2. XSS 防护策略

跨站脚本攻击（XSS）允许攻击者在受害者浏览器上执行恶意脚本。防止 XSS 的核心在于净化用户输入。

// components/Comment.jsx
import DOMPurify from 'dompurify';

export default function Comment({ content }) {
  // 净化 HTML 内容，移除潜在的危险标签
  const sanitizedContent = DOMPurify.sanitize(content);
  
  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
  );
}

除了客户端过滤，还应在服务器端设置内容安全策略（CSP），限制可加载的资源来源。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted-cdn.com"
          }
        ]
      }
    ];
  }
};

3. CSRF 令牌机制

跨站请求伪造（CSRF）利用用户的已登录状态发起非自愿的请求。防御的关键在于验证请求的来源合法性。

// pages/api/protected.js
import csrf from 'csurf';
const csrfProtection = csrf({ cookie: true });

export default function handler(req, res) {
  csrfProtection(req, res, () => {
    // 受保护的 API 逻辑
  });
}

客户端需要获取并携带 CSRF Token，确保每个请求都经过校验。

// components/Form.jsx
import { useState, useEffect } from 'react';

export default function Form() {
  const [csrfToken, setCsrfToken] = useState('');

  useEffect(() => {
    fetch('/api/csrf-token')
      .then(res => res.json())
      .then(data => setCsrfToken(data.token));
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/protected', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
      },
      body: JSON.stringify({ data: 'test' })
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* 表单内容 */}
    </form>
  );
}

结语

安全不是功能，而是底线。现代前端开发中，密码加密、XSS 清洗和 CSRF 验证是基础配置。不要等到出事了再修补，从一开始就建立正确的安全编码习惯，才能让应用真正经得起考验。