前端安全最佳实践：密码、XSS 与 CSRF 防护

安全实践

1. 密码与认证安全

使用 HTTPS 传输数据，并在服务端设置 httpOnly Cookie 来存储 Token，避免 XSS 窃取。

function Login() {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const handleSubmit = async (e) => {
    e.preventDefault();
    // 使用 HTTPS 传输
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    // 使用 httpOnly cookie 存储 token
    // 服务端设置：res.cookie('token', token, { httpOnly: true, secure: true });
  };
  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 攻击防护

避免直接使用 dangerouslySetInnerHTML 渲染不可信内容，应对用户输入进行转义。

function CommentList({ comments }) {
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>
          {/* 安全的方式：直接渲染文本 */}
          <p>{comment.content}</p>
        </div>
      ))}
    </div>
  );
}

// 后端转义
function escapeHtml(text) {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

3. CSRF 攻击防护

使用 CSRF Token 并验证 Origin/Referer 头，防止跨站请求伪造。

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 },
      body: JSON.stringify({ /* 表单数据 */ })
    });
    console.log(await response.json());
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      <button type="submit">提交</button>
    </form>
  );
}

4. 依赖包安全管理

定期更新依赖并使用工具检查漏洞。

{
  "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
npm run update