HTML表单密码控件防止浏览器记住密码的设置-html教程-PHP中文网

autocomplete="off"在密码框失效是浏览器主动干预，为保障密码管理体验；有效策略是用非标准name、初始type="text"再js切换为password，并设autocomplete="new-password"。

html表单密码控件防止浏览器记住密码的设置

为什么 `autocomplete="off"` 在密码框上经常失效

现代浏览器（Chrome、Firefox、Edge）会忽略密码输入框的 autocomplete="off"，尤其当页面中存在其他可自动填充的表单字段时。这不是 bug，而是浏览器主动干预——它们优先保障用户密码管理体验，防止网站“禁用”密码保存功能。强行绕过可能触发更激进的自动填充逻辑（比如把用户名填进密码框）。

真正有效的绕过策略：用非标准 name + 动态 type 切换

核心思路是让浏览器「认不出这是密码字段」。关键不是隐藏属性，而是破坏其自动填充上下文：

name 值不能是 password、passwd、pwd 等常见关键词，建议用语义无关名如 auth_token 或 user_secret
初始 type 设为 text（而非 password），等 DOM 加载完成后再用 JS 改为 password
配合 autocomplete="new-password"（注意不是 off），这是目前最被广泛支持的「明确声明这是新密码输入」的标准值

示例片段：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

<input id="pwd-field" name="auth_token" type="text" autocomplete="new-password"><script>
  document.getElementById('pwd-field').type = 'password';
</script>

服务端验证才是防记住密码的最终防线

前端所有设置都只是提示或干扰，无法真正阻止浏览器行为。真正需要关注的是后端逻辑：

登录成功后，务必清空 session 中的明文密码缓存（如有）
避免在响应头或 HTML 中泄露密码字段的原始值（比如表单回显时误输出 value="***"）
若使用 WebAuthn 或 OTP，应彻底移除传统密码字段，从源头规避自动填充问题

Chrome 120+ 的新限制：`autocomplete="current-password"` 会强制启用填充

如果你本意是让用户填写「当前账户密码」（例如修改密码页的旧密码），用 autocomplete="current-password" 是正确做法；但反过来，如果想阻止填充，绝对不要用这个值——它会直接触发浏览器将已保存的密码注入该字段。此时必须用 new-password，哪怕用户实际输的是旧密码（只要逻辑上属于「本次新建/重置流程」）。

最易被忽略的一点：多个密码字段共存时（如「新密码」「确认新密码」），两个都必须设 autocomplete="new-password"，否则第二个可能被当成「重复字段」而被跳过或错误填充。