瀏覽器密碼框自動填充阻止與偽裝密碼框實現

核心需求對比

阻止自動填充的實戰方案

方案一：隱藏誘餌字段（最有效）

<form>
  <!-- 瀏覽器會優先填充第一個 password 類型字段 -->
  <input type="password" style="display:none" aria-hidden="true">
  
  <!-- 真實用戶名 -->
  <input type="text" name="username" autocomplete="username">
  
  <!-- 真實密碼 -->
  <input type="password" name="password" autocomplete="current-password">
</form>

方案二：動態切換 type（兼容舊瀏覽器）

<input type="text" id="pwd" name="password" autocomplete="new-password">
<script>
document.getElementById('pwd').addEventListener('focus', function() {
    this.type = 'password';  // 聚焦時切為密碼模式
});
</script>

偽裝密碼框（不推薦生產使用）

若堅持不用 `type=password`，需自行實現：

<style>
.secure-input {
    font-family: 'text-security-disc';  // 原生掩碼字體
    -webkit-text-security: disc;        // WebKit 內核
}
</style>

<input type="text" class="secure-input" id="fakePwd">

<script>
// 同步真實值到隱藏字段
const realPwd = document.createElement('input');
realPwd.type = 'hidden';
realPwd.name = 'password';
document.body.appendChild(realPwd);

document.getElementById('fakePwd').addEventListener('input', function() {
    realPwd.value = this.value;
    // 可選：光標位置同步、選中狀態同步等複雜邏輯
});
</script>

安全性警示

• 自定義組件**無法獲得瀏覽器密碼管理器的安全存儲、同步、生成功能**
• 可能破壞無障礙訪問（屏幕閱讀器識別困難）
• 複製/粘貼、拼寫檢查、自動填充等原生行為需全部手動實現
• **強烈建議使用原生 `type=password` + 誘餌字段方案**

現代最佳實踐

<form>
  <input type="text" name="username" autocomplete="username" required>
  <input type="password" name="password" autocomplete="current-password" required>
  <!-- 新密碼註冊/修改頁面用 autocomplete="new-password" -->
  <button type="submit">登錄</button>
</form>

配合 HTTPS、CSP、SameSite Cookie，才是真正的安全基線。