瀏覽器 Basic Auth 自動登入 phpMyAdmin 實戰方案：從原理到跨域解決全攻略

需求背景

現有系統採用 HTTP Basic Authentication 保護 phpMyAdmin，期望實現「一鍵自動登入」，免去用戶重複輸入帳密，同時保留原有手動登入作為備用方案。

一、phpMyAdmin 四種認證模式對照

現狀為 http 模式，本文針對此模式提供自動登入方案。

二、HTTP Basic Auth 原理速覽

1. 客戶端請求受保護資源
2. 伺服器回應 401 Unauthorized，附帶 Header：
   WWW-Authenticate: Basic realm="My Realm"
3. 瀏覽器彈出登入對話框
4. 用戶輸入帳密，瀏覽器重發請求，附帶 Header：
   Authorization: Basic base64(username:password)
5. 伺服器驗證通過，返回資源

三、自動登入三大技術路線對比

方案 A：URL 嵌入憑證 (最簡單，但有缺陷)

https://username:password@phpmyadmin.example.com/

• ✅ 零代碼，直接跳轉
• ❌ IE/Edge 不支援 (安全策略)
• ❌ 憑證明文出現在瀏覽器歷史、代理日誌、Referer 中
• ❌ 現代瀏覽器地址列隱藏 userinfo，用戶困惑

方案 B：前端 JavaScript 注入 Authorization Header (同域可行)

<script>
function autoLogin() {
    var username = 'db_user', password = 'db_pass';
    var xhr = new XMLHttpRequest();
    // 關鍵：withCredentials 傳送憑證，第三個參數 false 同步阻塞
    xhr.open('GET', 'https://phpmyadmin.example.com/', false, username, password);
    xhr.withCredentials = true;
    xhr.send();
    if (xhr.status === 200) {
        // 登入成功，導航或嵌入 iframe
        window.location.href = 'https://phpmyadmin.example.com/';
    }
}
window.onload = autoLogin;
</script>

• ✅ 不暴露憑證於 URL
• ❌ 同源策略限制：主系統與 phpMyAdmin 必須同域 (或配置 CORS Access-Control-Allow-Credentials: true + Access-Control-Allow-Origin: 具體域)
• ❌ 同步請求阻塞 UI，體驗差

方案 C：表單中轉 + JS 自動提交 (跨域通用)

1. 主系統頁面輸出一個隱藏表單，action 指向 phpMyAdmin 域
2. 表單包含帳密隱藏欄位 (或由後端簽名 Token)
3. 頁面 onload 自動 form.submit()
4. phpMyAdmin 接收 POST，驗證通過後建立 Session，重導向至主介面

前提： phpMyAdmin 需支援表單登入 (cookie 模式) 或自定義 signon 端點。http 模式無法直接處理 POST 登入。

四、針對 http 模式的實用折中方案

1. 後端代理轉發 (推薦，最穩健)

• 主系統後端 (PHP/Java/Go) 發起 HTTP 請求至 phpMyAdmin，附帶 Authorization: Basic ... Header
• 取得 phpMyAdmin 返回的 Set-Cookie (若支援 cookie 回寫) 或 Session ID
• 將 Cookie 種植到用戶瀏覽器 (同域或父域)
• 前端跳轉 phpMyAdmin，瀏覽器攜帶 Cookie 直接通過驗證

優勢： 繞過瀏覽器同源限制、憑證不經前端、可審計日誌、支援雙因子驗證擴展。

2. Nginx/Apache 反向代理注入 Header (基礎設施層)

# Nginx 配置片段
location /pma/ {
    proxy_pass https://phpmyadmin_backend/;
    proxy_set_header Authorization "Basic base64(db_user:db_pass)";
    proxy_set_header Host $host;
    proxy_hide_header WWW-Authenticate;  # 隱藏 401 挑戰
}

• 用戶訪問 /pma/ 直接透過代理帶入憑證
• 需確保 phpMyAdmin 信任代理傳遞的 Header (配置 $cfg['Servers'][$i]['AllowDeny']['order'] 等)

3. 修改 phpMyAdmin 來源碼 (不建議，維護成本高)

• 在 libraries/auth/http.auth.lib.php 中檢測特定 Token/IP/Header，自動設定 $_SERVER['PHP_AUTH_USER']/PHP_AUTH_PW
• 升級 phpMyAdmin 時需重複修改

五、安全性考量清單

六、最佳實踐建議

1. 長期方案： 遷移 phpMyAdmin 至 signon 模式，實作標準 SSO 流程 (OAuth2/OIDC/SAML 或自簽 Token)，徹底解決自動登入與權限管理
2. 過渡方案： 採用 後端代理 + Cookie 種植 (方案 4.1)，主系統控制權限邏輯，phpMyAdmin 僅作為受信任下游
3. 基礎設施方案： Nginx 反向代理注入 Header (方案 4.2)，零代碼改動，適用於內網受控環境
4. 棄用： URL 嵌入 (方案 A)、前端 JS 同步請求 (方案 B)、修改核心碼 (方案 4.3)

七、驗證腳本：Basic Auth 測試端點

<?php
// login.php - 測試 Basic Auth 行為
if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="Test Realm"');
    header('HTTP/1.1 401 Unauthorized');
    exit('需要登入');
}
echo "<p>Hello, {$_SERVER['PHP_AUTH_USER']}.</p>";
echo "<p>Password: {$_SERVER['PHP_AUTH_PW']}</p>";
?>

瀏覽器訪問觀察彈窗；Chrome DevTools Network 面板查看 Authorization Header 格式。

總結

HTTP Basic Auth 的自動登入本質是 如何安全地將 Authorization: Basic ... Header 注入請求。瀏覽器同源策略與安全機制封殺了簡單前端方案，**後端代理轉發** 或 **反向代理注入** 是工程上正確的解法。長遠規劃應遷移至 signon/SSO 架構，從根源解決認證整合問題。