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

这段代码最大的隐患在于敏感信息暴露。Token 一旦落入恶意脚本手中，会话劫持便不可避免。

核心防护措施

1. 凭证传输与存储优化

密码必须通过 HTTPS 加密通道传输，这是底线。更关键的是 Token 的存储策略。浏览器端的 localStorage 对 JavaScript 完全开放，而 HttpOnly Cookie 则禁止 JS 访问，能大幅降低 XSS 窃取 Token 的风险。

// 正确姿势：使用 HttpOnly Cookie 存储 Token
function Login() {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
      credentials: 'include' // 允许携带 Cookie
    });
    const data = await response.json();
    // 不再手动存储 token，由服务端设置 Set-Cookie 头
    // 服务端需配置：res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'strict' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="用户名" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="密码" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">登录</button>
    </form>
  );
}

2. XSS 输入转义

React 默认会对 JSX 中的文本进行转义，这解决了大部分 XSS 问题。但如果必须渲染 HTML（例如富文本编辑器），就需要格外小心。

// 安全示例：直接渲染文本
function CommentList({ comments }) {
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>
          {/* React 会自动转义，这里最安全 */}
          <p>{comment.content}</p>
          {/* 慎用 dangerouslySetInnerHTML，除非内容已严格过滤 */}
          {/* <p dangerouslySetInnerHTML={{ __html: comment.content }} /> */}
        </div>
      ))}
    </div>
  );
}

// 服务端辅助函数：基础 HTML 转义
function escapeHtml(text) {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

3. CSRF 令牌验证

跨站请求伪造（CSRF）利用用户的已认证状态发起恶意请求。现代框架通常内置防护，但理解原理很重要。我们需要在表单或请求头中携带一个服务端生成的随机 Token。

// 客户端：获取并携带 CSRF Token
function Form() {
  const [csrfToken, setCsrfToken] = React.useState('');

  React.useEffect(() => {
    async function getCsrfToken() {
      const response = await fetch('/api/csrf-token');
      const data = await response.json();
      setCsrfToken(data.token);
    }
    getCsrfToken();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken // 自定义 Header 传递
      },
      body: JSON.stringify({ /* 表单数据 */ })
    });
    console.log(await response.json());
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* 其他表单字段 */}
      <button type="submit">提交</button>
    </form>
  );
}

服务端同样需要验证这个 Token 的有效性，如果缺失或不匹配，直接拒绝请求。

4. 依赖包管理

第三方库也是潜在的攻击面。定期扫描依赖漏洞是维护成本最低的安全手段。

// package.json 配置
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "audit": "npm audit",
    "update": "npm update"
  }
}

运行 npm run audit 可以快速识别已知漏洞。对于生产环境，建议结合 Snyk 等工具建立自动化监控流程。

总结

安全不是单一的功能，而是贯穿开发全流程的习惯。从传输层的 HTTPS，到存储层的 HttpOnly Cookie，再到应用层的输入验证和依赖审计，每一环都不能松懈。只有把这些细节落实到位，才能真正构建起让用户放心的 Web 应用。