前端密码哈希的误区与安全实践

(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) // 客户端进行哈希
    if (hash==password) { // 客户端进行比较
      var info = urlprams.get('secret') // 从URL参数获取秘密信息
      var urle = atob(info)
      var sec = decodeURI(urle)
      // ... 显示秘密信息 ...
    } else {
      alert('Incorrect Password!')
    }
  };
  window.GetPass = GetPass;
})();

// 假设有一个HTML表单，包含一个ID为"userPassword"的输入框和一个触发验证的按钮
// <input type="password" id="userPassword" placeholder="请输入密码">
// <button onclick="submitPassword()">验证</button>

async function submitPassword() {
  const userPassword = document.getElementById("userPassword").value;

  if (!userPassword) {
    alert('密码不能为空！');
    return;
  }

  try {
    // 使用 fetch API 发送 POST 请求到服务器
    // 确保您的网站使用 HTTPS
    const response = await fetch('/api/verifySecret', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // 告知服务器发送的是JSON数据
      },
      body: JSON.stringify({ password: userPassword }) // 将明文密码作为JSON数据发送
    });

    const data = await response.json(); // 解析服务器返回的JSON响应

    if (response.ok) { // HTTP状态码在200-299之间表示成功
      // 验证成功，服务器返回秘密内容
      document.body.innerHTML = data.secretContent; // 在页面上显示秘密内容
      document.title = '秘密区域';
      // 清除任何不必要的客户端状态，例如URL参数中的敏感信息
      window.history.replaceState({}, document.title, window.location.pathname);
    } else {
      // 验证失败，显示服务器返回的错误信息
      alert(data.message || '密码不正确或发生错误！');
    }
  } catch (error) {
    console.error('网络请求或处理错误:', error);
    alert('请求失败，请稍后再试。');
  }
}

<?php
// 确保您的服务器配置了HTTPS
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $input = json_decode(file_get_contents('php://input'), true);
    $submittedPassword = $input['password'] ?? '';

    // 实际应用中，这里应从安全数据库中获取用户的哈希密码和相关信息
    // 为演示目的，我们使用一个预设的哈希值
    // 假设存储的哈希是使用 password_hash() 函数生成的，例如：
    // $correctPasswordHash = password_hash('mySuperSecretPassword', PASSWORD_BCRYPT);
    $correctPasswordHash = '$2y$10$abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqr'; // 示例bcrypt哈希，实际应从数据库获取
    $secretContent = '<h1>欢迎来到秘密区域！</h1><p>这是高度机密的信息，仅限授权用户访问。</p>';

    // 1. 验证提交的密码是否为空
    if (empty($submittedPassword)) {
        http_response_code(400); // Bad Request
        echo json_encode(['success' => false, 'message' => '密码不能为空。']);
        exit();
    }

    // 2. 使用 password_verify() 函数安全地验证密码
    //    这个函数会自动处理盐值和哈希算法的细节
    if (password_verify($submittedPassword, $correctPasswordHash)) {
        // 密码正确，返回秘密内容
        http_response_code(200); // OK
        echo json_encode(['success' => true, 'secretContent' => $secretContent]);
    } else {
        // 密码不正确
        http_response_code(401); // Unauthorized
        echo json_encode(['success' => false, 'message' => '密码不正确！']);
    }
} else {
    // 不支持的请求方法
    http_response_code(405); // Method Not Allowed
    echo json_encode(['success' => false, 'message' => '不支持的请求方法。']);
}
?>