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

探讨前端安全实践，指出明文传输密码的风险，并提供解决方案。包括使用 bcrypt 进行密码哈希存储，利用 DOMPurify 和 CSP 头防止 XSS 攻击，以及通过 CSRF token 机制防御跨站请求伪造。代码示例展示了 React 组件与 Next.js API 路由的安全配置。

二进制发布于 2026/4/6更新于 2026/4/131 浏览

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

引言

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

不安全示例

// 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={(e) => 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 });
}

// components/Comment.jsx
import DOMPurify from 'dompurify';

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

// 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
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>
  );
}

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

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

引言

不安全示例

更多推荐文章

相关免费在线工具

安全实现方案

1. 密码加密

2. XSS 防护

3. CSRF 防护

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

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

引言

不安全示例

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

更多推荐文章

相关免费在线工具

安全实现方案

1. 密码加密

2. XSS 防护

3. CSRF 防护