前端安全基础：密码存储与常见漏洞防护

为什么你需要关注前端安全

最近看到一个项目，直接在前端存储用户密码，没有任何加密措施。这是一个严重的安全隐患。

反面教材

// 反面教材：不安全的代码
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
    localStorage.setItem('token', data.token);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" = = = => setUsername(e.target.value)} />
       setPassword(e.target.value)} />
      登录
    
  );
}
  ;