前端安全实践：密码加密、XSS 与 CSRF 防护

介绍前端安全的核心实践，包括密码加密（使用 bcrypt）、XSS 防护（使用 DOMPurify 和 CSP）以及 CSRF 防护（使用 Token）。通过对比不安全代码与修复方案，帮助开发者避免明文传输敏感数据，构建更安全的 Web 应用。

随缘发布于 2026/4/6更新于 2026/4/121 浏览

前端安全实践：密码加密、XSS 与 CSRF 防护

引言

前端安全至关重要。例如，登录表单直接发送明文密码存在严重隐患。

常见风险示例

// 反面教材：不安全的登录
// 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 type="text" value={username} onChange= => 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(() => {
    // 获取 CSRF token
    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>
  );
}

前端安全实践：密码加密、XSS 与 CSRF 防护

前端安全实践：密码加密、XSS 与 CSRF 防护

引言

常见风险示例

更多推荐文章

相关免费在线工具

安全实践方案

1. 密码加密

2. XSS 防护

3. CSRF 防护

总结

前端安全实践：密码加密、XSS 与 CSRF 防护

前端安全实践：密码加密、XSS 与 CSRF 防护

引言

常见风险示例

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

安全实践方案

1. 密码加密

2. XSS 防护

3. CSRF 防护

总结