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

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

为什么需要关注前端安全

在前端开发中，安全问题常被忽视。例如直接在前端存储用户密码且无加密措施，会导致严重的数据泄露风险。

不安全示例

以下代码展示了常见的安全隐患：

// 反面示例：不安全的登录实现
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 })
    });
    const data = await response.json();
    // 直接将 token 存储在 localStorage，易受 XSS 攻击
    localStorage.setItem('token', data.token);
  };

  return (
    <form onSubmit={handleSubmit}>
      < = = = = => setUsername(e.target.value)} />
       setPassword(e.target.value)} />
      登录
    
  );
}
  ;