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

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

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

反面教材

// 反面教材：不安全的代码
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" 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>
  );
}
export default Login;

正确姿势

1. 密码安全

// 正确姿势：密码安全
// 1. 使用 HTTPS
// 2. 密码加密传输
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>
  );
}
export default Login;

2. XSS 防护

// 正确姿势：XSS 防护
// 1. 使用 dangerouslySetInnerHTML 时要小心
// 2. 对用户输入进行转义
function CommentList({ comments }) {
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>
          {/* 安全的方式：直接渲染文本 */}
          <p>{comment.content}</p>
          {/* 不安全的方式 */}
          {/* <p dangerouslySetInnerHTML={{ __html: comment.content }} /> */}
        </div>
      ))}
    </div>
  );
}

// 后端转义
// server.js
app.post('/api/comments', (req, res) => {
  const { content } = req.body;
  // 转义用户输入
  const escapedContent = escapeHtml(content);
  // 存储转义后的内容
  db.insert({ content: escapedContent });
  res.json({ success: true });
});

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

3. CSRF 防护

// 正确姿势：CSRF 防护
// 1. 使用 CSRF token
// 2. 验证 Origin/Referer 头
function Form() {
  const [csrfToken, setCsrfToken] = React.useState('');
  
  React.useEffect(() => {
    // 从服务端获取 CSRF token
    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({ /* 表单数据 */ })
    });
    const data = await response.json();
    console.log(data);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* 表单字段 */}
      <button type="submit">提交</button>
    </form>
  );
}

// 服务端验证
// server.js
app.post('/api/submit', (req, res) => {
  const csrfToken = req.headers['x-csrf-token'] || req.body._csrf;
  if (!csrfToken || !validateCsrfToken(csrfToken)) {
    return res.status(403).json({ error: 'CSRF token invalid' });
  }
  // 处理请求
  res.json({ success: true });
});

4. 依赖安全

// 正确姿势：依赖安全
// 1. 定期更新依赖
// 2. 使用 npm audit 检查漏洞
// 3. 使用 Snyk 等工具监控
{
  "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。

通过上述实践，可以有效提升前端应用的安全性，降低被攻击的风险。