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

JavaScriptNode.js大前端

前端安全实战：密码加密与常见攻击防护

介绍前端安全核心实践，包括密码加密传输（使用 bcrypt）、XSS 防护（利用 DOMPurify 净化内容及设置 CSP 头）以及 CSRF 防护（通过 Token 验证）。通过对比不安全与安全的代码示例，阐述了如何避免明文存储密码、防止脚本注入及跨站请求伪造，保障应用安全性。

人间失格发布于 2026/4/5更新于 2026/4/132 浏览

前端安全实战：密码加密与常见攻击防护

引言

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

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

为什么你需要前端安全

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

反面教材

// 反面教材：不安全的登录
// components/LoginForm.jsx
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}>
      <input = = = => setUsername(e.target.value)} placeholder="用户名" />
       setPassword(e.target.value)} placeholder="密码" />
      登录
    
  );
}

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

更多推荐文章

相关免费在线工具

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

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

// 正确姿势：防止 XSS
// components/Comment.jsx
import DOMPurify from 'dompurify';

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

// 服务器端设置 CSP 头
// 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"
          }
        ]
      }
    ];
  }
};

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