前端安全实战：密码存储、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
    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 等工具监控
// 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
// npm run update

安全建议：这才叫前端安全，让你的网站固若金汤，再也不用担心黑客攻击了。