必须使用原生 type="password"，配合 HTTPS、服务端加盐哈希、限速与泛化错误等后端防护，辅以 autocomplete、autocapitalize 等属性减少泄露风险。
直接用 <input type="password"> 是基础，但仅靠它远远不够——它只隐藏显示，不加密、不防截获、不替代后端防护。真正起作用的是它如何配合传输、浏览器行为与服务端策略。
必须用原生 password 类型，别搞“伪密码框”
不能用 type="text" 加 CSS 遮盖（比如 text-security: disc 或透明光标），因为输入值仍是明文，JS 可随时读取、调试器可见、录屏或键盘记录器也能捕获。浏览器对 type="password" 有底层保护：禁用默认自动填充（除非显式允许）、不缓存明文、限制开发者工具直接访问 value（部分上下文中）。这是不可替代的安全基线。
搭配关键属性减少意外泄露
现代浏览器对 autocomplete="off" 基本忽略，应改用语义明确的值：
-
autocomplete="new-password"：用于注册页或修改密码页，明确告诉浏览器不要填旧密码 -
autocomplete="current-password"：用于登录页，支持密码管理器安全填充 -
autocapitalize="off" autocorrect="off" spellcheck="false"：防止 iOS 键盘首字母大写或拼写纠正，避免暴露密码长度或大小写模式 - 避免通用 name 值（如
name="pwd"），改用弱语义、高唯一性的名称（如name="user_auth_credential"），降低浏览器凭 name/id 匹配历史密码的风险
前端只是辅助，核心防线在传输与服务端
type="password" 本身不加密、不验证、不防抓包。它的价值在于配合整个链路：
立即学习“前端免费学习笔记（深入）”；
- 表单必须走 HTTPS：否则明文密码会在网络中裸奔，前端所有设置都归零
- 服务端收到后必须立即用 bcrypt 或 Argon2 加盐哈希，绝不可存明文或简单 MD5/SHA1
- 登录接口需限速（如 5 次/分钟/IP）并返回泛化错误（统一提示“用户名或密码错误”），避免泄露账户是否存在
- 密码强度规则（如最小长度、字符类型）必须前后端双重校验——前端 pattern 或 JS 校验可绕过，服务端才是最终把关者
可选增强：显示/隐藏切换与失焦清理
若需“查看密码”功能，只应动态切换 type 属性（"password" ↔ "text"），不要重建 input 元素。同时建议加失焦自动切回 password：
<input id="pwd" type="password" autocomplete="new-password" autocapitalize="off">
<script>
document.getElementById("pwd").addEventListener("blur", () => {
if (document.getElementById("pwd").type === "text") {
document.getElementById("pwd").type = "password";
}
});
</script>
