客户端JavaScript密码哈希的安全性误区与正确实践

(function() {
  const GetPass = function() {
    var usrpass = document.getElementById("userPassword").value;
    const args = window.location.search;
    const urlprams = new URLSearchParams(args);
    var password = urlprams.get('password'); // 从URL参数获取密码哈希
    var hash = sha256(usrpass); // 客户端对用户输入进行SHA256哈希
    if (hash == password) { // 客户端比较哈希值
      // 成功逻辑
    } else {
      alert('Incorrect Password!');
    }
  };
  window.GetPass = GetPass;
})();

// 假设这是一个登录表单的提交函数
async function submitLogin() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("userPassword").value;

    // 1. 通过HTTPS将用户名和密码发送到服务器
    // 注意：密码在此处是明文，但通过HTTPS加密传输，确保传输安全
    try {
        const response = await fetch('/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username: username, password: password })
        });

        if (response.ok) {
            const result = await response.json();
            if (result.success) {
                alert('登录成功！');
                // 处理登录成功后的逻辑，例如重定向到用户仪表盘
                window.location.href = '/dashboard';
            } else {
                alert('用户名或密码不正确。');
            }
        } else {
            alert('服务器错误，请稍后再试。');
        }
    } catch (error) {
        console.error('网络请求失败:', error);
        alert('网络错误，请检查您的连接。');
    }
}

// 绑定到登录按钮的点击事件
// document.getElementById("loginButton").addEventListener("click", submitLogin);

<?php
// 确保只接受POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405); // Method Not Allowed
    echo json_encode(['success' => false, 'message' => 'Invalid request method']);
    exit();
}

header('Content-Type: application/json');

// 获取POST请求体中的JSON数据
$input = json_decode(file_get_contents('php://input'), true);
$username = $input['username'] ?? '';
$userPassword = $input['password'] ?? '';

// 1. 验证输入
if (empty($username) || empty($userPassword)) {
    echo json_encode(['success' => false, 'message' => '用户名和密码不能为空。']);
    exit();
}

// 2. 从数据库中获取用户的存储哈希密码
// 实际应用中，会根据$username查询数据库，获取该用户的哈希密码
// 假设这里模拟从数据库获取
$storedUser = [
    'username' => 'testuser',
    // 使用 password_hash() 生成的哈希值，包含盐值和算法信息
    'password_hash' => '$2y$10$abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr.s1234567890abcdefghijklmnopqr'
];

if ($username !== $storedUser['username']) {
    echo json_encode(['success' => false, 'message' => '用户名或密码不正确。']);
    exit();
}

// 3. 使用 password_verify() 验证密码
// password_verify() 会自动提取哈希中的盐值和算法，并与提供的密码进行比较
if (password_verify($userPassword, $storedUser['password_hash'])) {
    // 密码验证成功
    // 在这里创建会话、返回认证令牌等
    echo json_encode(['success' => true, 'message' => '登录成功！']);
} else {
    // 密码验证失败
    echo json_encode(['success' => false, 'message' => '用户名或密码不正确。']);
}

// 注册用户时，应使用 password_hash() 函数来存储密码
/*
$newPassword = 'mySecurePassword123';
$hashedPassword = password_hash($newPassword, PASSWORD_DEFAULT); // PASSWORD_DEFAULT 使用当前推荐的算法 (如 bcrypt)
// 将 $hashedPassword 存储到数据库
*/
?>