前端安全实战：密码存储、XSS 及 CSRF 防护 | 极客日志

JavaScriptNode.js大前端

前端安全实战：密码存储、XSS 及 CSRF 防护

前端安全的关键实践，包括使用 HTTPS 传输数据、通过 httpOnly cookie 存储 Token 而非 localStorage、防范 XSS 攻击（避免 dangerouslySetInnerHTML 或进行转义）、实施 CSRF 防护（Token 验证）以及定期审计依赖包。旨在帮助开发者构建更安全的 Web 应用。

山野来信发布于 2026/4/5更新于 2026/4/131 浏览

前端安全实战：密码存储、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 =>
       setUsername(e.target.value)} />
       setPassword(e.target.value)} />
      登录
    
  );
}
  ;

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// 正确姿势：密码安全
// 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;

// 正确姿势：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;');
}

// 正确姿势：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 });
});

// 正确姿势：依赖安全
// 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