前端安全实战：密码加密与常见漏洞防护 | 极客日志

JavaScriptNode.js大前端

前端安全实战：密码加密与常见漏洞防护

前端安全涉及密码加密、XSS 防护及 CSRF 防御等关键环节。文章通过对比不安全代码与优化方案，演示了使用 bcrypt 进行密码哈希、DOMPurify 清理输入内容以及配置 CSP 和 CSRF Token 的具体实践。旨在帮助开发者识别常见漏洞，建立从传输到存储的全链路安全机制，避免应用成为攻击目标。

laoliangsh发布于 2026/4/8更新于 2026/4/231 浏览

前端安全实战：密码加密与常见漏洞防护

安全警示

这代码写得跟网红滤镜似的——仅供参考。

各位前端同行，咱们今天聊聊前端安全。别告诉我你还在写明文存储密码，那感觉就像把家门钥匙挂在门口——方便，但不安全。

为什么你需要前端安全

最近看到一个项目，登录表单直接把密码发送到服务器，没有任何加密。我就想问：你是在做应用还是在给黑客送大礼？

常见误区

// 反面教材：不安全的登录
import { useState } from 'react';

export default function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = 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 }) // 明文密码
    });

    if (response.ok) {
      // 登录成功
    }
  };

  return (
    <form onSubmit={handleSubmit}>
       setUsername(e.target.value)} placeholder="用户名" />
       setPassword(e.target.value)} placeholder="密码" />
      登录
    
  );
}

// 工具函数：密码哈希
// utils/auth.js
import bcrypt from 'bcryptjs';

export async function hashPassword(password) {
  const salt = await bcrypt.genSalt(10);
  return await bcrypt.hash(password, salt);
}

export async function comparePassword(password, hashedPassword) {
  return await bcrypt.compare(password, hashedPassword);
}

// 服务端登录处理
// api/login.js
export default async function handler(req, res) {
  const { username, password } = req.body;
  const user = await User.findOne({ username });

  if (!user) {
    return res.status(401).json({ error: '用户不存在' });
  }

  const isMatch = await comparePassword(password, user.password);
  if (!isMatch) {
    return res.status(401).json({ error: '密码错误' });
  }

  // 生成 JWT token
  const token = generateToken(user.id);
  res.json({ token });
}

// 组件：评论展示
// components/Comment.jsx
import DOMPurify from 'dompurify';

export default function Comment({ content }) {
  // 净化 HTML 内容
  const sanitizedContent = DOMPurify.sanitize(content);
  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
  );
}

// Next.js 配置
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted-cdn.com"
          }
        ]
      }
    ];
  }
};

// 服务端中间件
// pages/api/protected.js
import csrf from 'csurf';
const csrfProtection = csrf({ cookie: true });

export default function handler(req, res) {
  csrfProtection(req, res, () => {
    // 受保护的 API 逻辑
  });
}

// 客户端表单
// components/Form.jsx
import { useState, useEffect } from 'react';

export default function Form() {
  const [csrfToken, setCsrfToken] = useState('');

  useEffect(() => {
    fetch('/api/csrf-token')
      .then(res => res.json())
      .then(data => setCsrfToken(data.token));
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/protected', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
      },
      body: JSON.stringify({ data: 'test' })
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* 表单内容 */}
    </form>
  );
}