禁用浏览器自动填充无效，现代浏览器忽略autocomplete="off"并可能反向触发密码填充；软键盘可绕过按键监听但无法防粘贴和移动端原生输入；前端哈希不替代HTTPS，必须确保全链路HTTPS传输。
密码输入框直接禁用浏览器自动填充有用吗
没用。设置 autocomplete="off" 在现代浏览器（Chrome 80+、Edge 90+）中已被忽略，浏览器会优先按字段名（如 name="password"）或 type="password" 自动触发填充，甚至强制覆盖该属性。更糟的是，部分浏览器会把 autocomplete="off" 当作“需要填充”的信号，反而更积极地弹出密码管理器。
实操建议：
- 用非标准
name属性，比如name="usr_passwd_v2"而非name="password" - 动态生成
id和name，例如在组件挂载后通过 JS 修改，让静态扫描失效 - 避免在 DOM 初始渲染时就写死
type="password"，可先设为type="text"，聚焦后再切回type="password"（需配合视觉遮罩）
前端加一层“软键盘”真能防键盘记录吗
不能彻底防，但能绕过绝大多数基于 hook API 或底层按键监听的键盘记录器——因为软键盘不触发 keydown/input 事件，所有输入都走 DOM 操作。
关键限制和坑点：
立即学习“前端免费学习笔记（深入）”；
- 无法防御剪贴板粘贴（
paste事件仍可被捕获），必须同时监听并清洗clipboardData - 移动端软键盘会唤起原生输入法，失去控制权；所以软键盘更适合桌面端高敏场景（如银行后台）
- 需禁用右键菜单、拖放、选中文本（
onselectstart="return false"+user-select: none） - 示例核心逻辑：
document.getElementById('soft-keyboard-1').addEventListener('click', e => { const btn = e.target; if (btn.dataset.char) { const input = document.getElementById('pwd-field'); input.value += btn.dataset.char; // 手动触发 input 事件供 Vue/React 响应 input.dispatchEvent(new Event('input', { bubbles: true })); } });
用 inputmode 和 autocapitalize 会影响安全性吗
不影响安全，但错误配置反而暴露意图。比如 inputmode="numeric" + autocapitalize="none" 组合，会让 iOS 键盘只显示数字，明显暗示这是密码字段（尤其当旁边还有“登录”按钮时）。
更稳妥的做法：
- 密码字段统一用
inputmode="text"（默认值），不显式声明 - 禁用大小写切换提示：
autocapitalize="off"（注意不是"none"，后者在 Safari 旧版有兼容问题） - 避免使用
spellcheck="false"—— 它在密码场景无意义，且部分录屏类木马会把它当作“敏感字段”标记
为什么加密后传参或前端哈希不能替代 HTTPS
因为前端任何计算都可被调试器实时拦截：用户输入明文 → JS 计算哈希 → 发送前断点查看 hashValue 变量，和直接看密码框 value 没区别。
真正有效的边界是传输层：
- 必须确保页面本身由 HTTPS 加载（否则中间人可替换 JS 脚本）
- 密码字段必须绑定在
form中且提交到 HTTPS 接口，禁止用fetch+ HTTP URL - 服务端需校验
Referer和Origin，防止密码被恶意 iframe 提交
最容易被忽略的一点：本地开发时用 http://localhost 测试，很容易忘记上线后没配好证书，导致整个防护链在生产环境形同虚设。
