參考 Hao123 等導航站的「快捷郵箱登入」：使用者選擇郵箱提供商、輸入帳號密碼，點擊登入即自動導向對應郵箱登入頁並預填帳號。本文提供純前端 JavaScript 實作，無需後端代理。
核心原理
- 預先收集各大郵箱登入表單的 **Action URL、帳號欄位名、密碼欄位名、額外隱藏欄位**
- 使用者選擇郵箱 → 下拉選單 `value` 儲存解析所需資訊
- 點擊登入 → JS 解析 `value`、動態設定表單 `action`、填充所有可能的帳號/密碼欄位名 → `form.submit()`
完整頁面代碼
<%@ Page Language="C#" %>
<html xmlns="https://www.w3.org/1999/xhtml">
<head><title>快捷郵箱登入</title></head>
<body>
<script type="text/javascript">
function submitLogin() {
var form = document.mailForm;
var user = form.mail_name.value;
var pass = form.mail_password.value;
var provider = form.mailSelect.value; // 格式見下方選項
if (!user) { alert("請輸入帳號"); form.mail_name.focus(); return false; }
if (!pass) { alert("請輸入密碼"); form.mail_password.focus(); return false; }
var parts = provider.split(";");
var actionUrl = parts[0];
var extra = parts.length > 1 ? parts[1] : "";
var extraVal = parts.length > 2 ? parts[2] : "";
form.action = actionUrl;
// 處理帳號後綴（如 @163.com）
if (extra === "suffix") user += "@" + extraVal;
// 處理額外隱藏欄位
else if (extra) eval("form." + extra + ".value = '" + extraVal + "';");
// 遍歷所有常見帳號欄位名稱填充
var userFields = ["u","user","LoginName","username","UserName","login_name","login"];
userFields.forEach(f => { if (form[f]) form[f].value = user; });
// 遍歷所有常見密碼欄位名稱填充
var passFields = ["psw","pass","passwd","password","Password","login_password"];
passFields.forEach(f => { if (form[f]) form[f].value = pass; });
form.submit();
form.mail_password.value = ""; // 清空密碼欄
return false;
}
</script>
<form method="post" target="_blank" name="mailForm" onsubmit="return submitLogin()">
<table cellspacing="0" style="border:1px solid #c0c0c0;font-size:13px">
<tr style="color:#fff;background:#336699">
<td>常用郵箱快速登錄</td><td align="right"></td>
</tr>
<tr><td colspan="2">
<select name="mailSelect">
<option value="">選擇您的郵局</option>
<option value="https://mail.sina.com.cn/cgi-bin/login.cgi">@sina.com</option>
<option value="https://reg.163.com/in.jsp?url=https://fm163.163.com/coremail/fcg/ntesdoor2?username=wd.dm.mailForm.name.value;url;https://fm163.163.com/coremail/fcg/ntesdoor2">@163.com</option>
<option value="https://login.mail.sohu.com/chkpwd.php">@sohu.com</option>
<option value="https://login.chinaren.com/zhs/servlet/Login;url;http:/mail.chinaren.com">@ChinaRen.com</option>
<option value="https://mail.163.net/cgi/163/login_pro.cgi">@163.net</option>
<option value="https://mail.tom.com/cgi/163/login_pro.cgi">@Tom.com</option>
<option value="https://webmail.21cn.com/NULL/NULL/NULL/NULL/NULL/SignIn.gen">@21cn.com</option>
<option value="https://login.yahoo.com/config/login">@yahoo.com.cn</option>
<option value="https://mail.126.com/entry/cgi/login">@126.com</option>
<option value="https://g2wm.263.net/xmweb">@263.net</option>
<option value="https://freemail.eyou.com/cgi-bin/login">@eyou.com</option>
<option value="https://vip.sina.com/cgi-bin/login.cgi">@vip.sina.com</option>
<option value="https://vip.163.com/payment/VipLogon.jsp">@vip.163.com</option>
<option value="https://paymail.china.com/extend/gb/NULL/NULL/NULL/SignIn.gen">@China.com</option>
<option value="https://mw1.elong.com/cgi-bin/weblogon.cgi">@elong.com</option>
<option value="https://login.etang.com/servlet/login;BackURL;http:/mail.etang.com/cgi/door">@etang.com</option>
<option value="https://www.citiz.net/login.jsp">@citiz.net</option>
<option value="https://202.106.186.230/extend/newgb1/NULL/NULL/NULL/SignIn.gen">@email.com.cn</option>
</select>
<input type="submit" value="登錄" style="background:#FFD700">
</td></tr>
<tr><td colspan="2">用戶名：<input name="mail_name" size="12"></td></tr>
<tr><td colspan="2">密碼：<input name="mail_password" type="password" size="12"></td></tr>
</table>
<!-- 隱藏欄位預埋所有可能名稱 -->
<input type="hidden" name="u" value="">
<input type="hidden" name="user" value="">
<input type="hidden" name="LoginName" value="">
<input type="hidden" name="username" value="">
<input type="hidden" name="UserName" value="">
<input type="hidden" name="login_name" value="">
<input type="hidden" name="login" value="">
<input type="hidden" name="psw" value="">
<input type="hidden" name="pass" value="">
<input type="hidden" name="passwd" value="">
<input type="hidden" name="password" value="">
<input type="hidden" name="Password" value="">
<input type="hidden" name="login_password" value="">
<input type="hidden" name="url" value="">
<input type="hidden" name="BackURL" value="">
</form>
</body></html>
選項 Value 格式規範
| 格式 | 範例 | 解析邏輯 |
|---|
| 單純 Action URL | `https://mail.sina.com.cn/cgi-bin/login.cgi` | 直接設為 form.action |
| 需額外隱藏欄位 | `actionUrl;fieldName;fieldValue` | `eval("form.fieldName.value='fieldValue'")` |
| 帳號需加後綴 | `actionUrl;suffix;@domain.com` | `user += "@domain.com"` |
| 複雜重導向 | `actionUrl;url;redirectUrl` | 設定隱藏欄位 `url=redirectUrl` |
現代環境限制與替代方案
| 限制 | 影響 | 現代替代 |
|---|
| 同源策略 (CORS) | 無法跨域讀取登入結果、Cookie | OAuth 2.0 / OpenID Connect 統一登入 |
| CSRF Token / 隱藏欄位動態生成 | 靜態 Value 失效 | 後端代理登入 API、或 Selenium/Puppeteer 自動化 |
| 雙因子驗證 (2FA) | 無法自動完成 | QR Code 掃碼、推播通知 |
| 瀏覽器密碼管理器 | 自動填充優於手工 | 正確設定 `autocomplete="email/username/current-password"` |
| HTTPS 混合內容 | HTTP Action 被阻擋 | 全站 HTTPS、升級郵箱提供商連結 |
安全性警示
- ⚠️ **明文傳輸密碼**：表單提交至第三方，中間人可竊聽（需 HTTPS）
- ⚠️ **密碼洩露風險**：使用者在你的頁面輸入密碼，違反「不在非官方頁面輸入密碼」原則
- ⚠️ **釣魚風險**：惡意網站可仿造此介面盜取帳密
現代最佳實務：引導使用者至官方登入頁、支援瀏覽器密碼管理器、實作 OAuth 2.0 社交登入（Google、Microsoft、Apple、Facebook、GitHub）、或使用 Passkey/WebAuthn 無密碼認證。
本範例適合理解表單自動提交原理、維護極舊專案、或內網受信環境下的整合入口。對外公開網站**強烈不建議**使用此模式。
- 上一篇文章： ASP.NET 2.0 手寫 JSON 序列化與反序列化完整實作：無第三方依賴
- 下一篇文章： ASP.NET (C#) 桌面應用程式自動更新元件完整實作
Copyright ©
程式碼之家 All Rights Reserved
