用 Next.js 做登录/注册时，如何避免“密码出现在 URL”的灾难

// ❌ 错误：把密码拼到 URL
fetch(`/api/auth/login?username=${u}&password=${p}`)

// ❌ 错误：从 query 读，并打印
const { username, password } = req.query;
console.log('DEBUG login', username, password);

'use client';
import { useState } from 'react';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // ❌ 错误：把密码拼进 URL，用 GET 发送
  const handleLogin = async () => {
    const res = await fetch(`/api/auth/login?username=${username}&password=${password}`, {
      method: 'GET',
    });
    const data = await res.json();
    console.log(data);
  };

  return (
    <div>
      <h1>Login</h1>
      <input value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

import type { NextApiRequest, NextApiResponse } from 'next';

// ❌ 错误：从 query 取，并打印明文密码
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { username, password } = req.query;
  console.log('DEBUG login:', username, password); // 泄露日志

  if (username === 'admin' && password === '123456') {
    return res.status(200).json({ ok: true });
  } else {
    return res.status(401).json({ ok: false });
  }
}

'use client';
import { useState } from 'react';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // ✅ 正确：POST + JSON body；不要把密码放 URL
  const handleLogin = async () => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include', // 若使用 cookie session
      body: JSON.stringify({ username, password }),
    });
    const data = await res.json();
    console.log(data);
  };

  return (
    <div>
      <h1>Login</h1>
      <input value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

import type { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';

const fakeUserDB = {
  username: 'admin',
  passwordHash: bcrypt.hashSync('123456', 10), // 仅示例：真实项目请从 DB 读取
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).json({ error: 'Method Not Allowed' });

  const { username, password } = req.body; // ✅ 从 body 取
  // ❌ 切勿记录明文密码
  // console.log('DEBUG', username, password);

  if (username === fakeUserDB.username) {
    const ok = await bcrypt.compare(password, fakeUserDB.passwordHash);
    if (ok) {
      // TODO: 设置 HttpOnly 会话 cookie（建议使用专门会话库）
      return res.status(200).json({ ok: true, message: 'Login success' });
    }
  }
  return res.status(401).json({ ok: false, message: 'Invalid credentials' });
}

# 仅记录 $uri（不含 querystring）
log_format no_args '$remote_addr - $remote_user [$time_local] '
                   '"$request_method $uri $server_protocol" '
                   '$status $body_bytes_sent "$http_referer" "$http_user_agent"';
access_log /var/log/nginx/access.log no_args;

add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header Referrer-Policy "no-referrer" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "DENY" always;

# 1) 拆出原始 querystring
map $request_uri $raw_query {
    "~*\?(?<q>.*)$" $q;
    default "";
}

# 2) 逐项脱敏（注意大小写与别名）
map $raw_query $sanitized_query_step1 {
    "~*password=[^&]*" "$q";
    default $raw_query;
}

# 3) 可继续链式替换（示意）。
# 由于原生 Nginx 对复杂正则替换支持有限，建议用 sub_filter 或 Lua/OpenResty 更灵活地处理。
# 这里给出基于 OpenResty 的更强方案：

# http { ... }
lua_package_path "/usr/local/openresty/lualib/?.lua;;";

# 自定义日志格式，使用变量 $sanitized_request
log_format main_sanitized '$remote_addr - $remote_user [$time_local] '
                          '"$sanitized_request" $status $body_bytes_sent '
                          '"$http_referer" "$http_user_agent"';

# 在 server 或 location 里：
set $sanitized_request "";
rewrite_by_lua_block {
  local req = ngx.var.request or ""     -- e.g. "GET /path?password=123&token=abc HTTP/1.1"
  local uri = ngx.var.request_uri or "" -- e.g. "/path?password=123&token=abc"

  -- 只对 query 部分做替换
  local path, query = uri:match("^([^?]+)%??(.*)$")
  if query and #query > 0 then
    -- 定义敏感参数列表（可扩展）
    local patterns = {
      "password", "passwd", "pwd", "token", "authorization", "auth", "secret", "apikey", "api_key"
    }
    for _, key in ipairs(patterns) do
      -- 将 key=后面的值替换为 [REDACTED]，大小写不敏感
      -- 注意：此处简化处理，如需兼容多种编码/边界情况可增强正则
      local reg = "(" .. key .. ")=([^&]*)"
      query = query:gsub(reg, function(k, v) return k .. "=[REDACTED]" end)
      -- 大小写不敏感版本：用 ngx.re.gsub
      local new_query, n, err = ngx.re.gsub(query, "(" .. key .. ")=([^&]*)", "$1=[REDACTED]", "ijo")
      if not err and new_query then query = new_query end
    end
  end

  local method = ngx.var.request_method or "GET"
  local httpver = ngx.var.server_protocol or "HTTP/1.1"
  local sanitized = method .. " " .. (path or "/") .. (query and #query>0 and ("?"..query) or "") .. " " .. httpver

  ngx.var.sanitized_request = sanitized
}
access_log /var/log/nginx/access.log main_sanitized;