账户安全中心必须用包裹,因其提供回车提交、tab聚焦、屏幕阅读器识别等原生安全能力;密码校验需js实时监听input事件并后端双重验证;高危操作须用隔离且服务端严格校验权限与状态码。

账户安全中心必须用 <form></form> 包裹,不是可选项
浏览器对 <form></form> 的原生支持是安全操作的底线:回车提交、Tab 键顺序聚焦、屏幕阅读器识别控件语义、自动禁用重复提交按钮——这些能力在纯 <div> 中全部丢失。哪怕你暂时不设 <code>action 或 method,<form></form> 本身已提供语义锚点和键盘交互逻辑。
常见错误是加了 onsubmit="return false",这会直接切断浏览器内置的防重复机制。正确做法是监听 submit 事件,调用 event.preventDefault() 后手动控制流程。
密码类字段不能只靠 pattern 和 minlength
pattern 只在表单提交时触发,且正则可被开发者工具一键删除;minlength 无法校验大小写字母、数字、特殊字符等真实强度要求。真正起作用的是 JS 实时监听 input 事件(不是 blur),配合后端双重校验。
- 给
<input type="password">加autocomplete="new-password",减少浏览器自动填充干扰 - 新密码和确认密码字段必须 JS 实时比对,不能只依赖
required属性 - 粘贴行为无法被
type="password"阻止,需在 JS 中监听paste事件并做同步校验
高危操作(如关闭两步验证)必须用 <fieldset disabled></fieldset> 隔离
这类操作不可逆,且易被钓鱼脚本批量触发。<fieldset></fieldset> + <legend></legend> 是唯一能被辅助技术识别为“逻辑操作组”的 HTML 原生方案,<div class="danger-section"> 只是视觉装饰,无语义保障。
<p>初始状态必须设 <code>disabled,仅当用户主动勾选“我理解风险”复选框后,才用 JS 移除 disabled 属性。注意:disabled 必须加在 <fieldset></fieldset> 上,若只加在单个 <input> 上,该字段仍会随表单提交。
所有前端禁用都是障眼法,服务端响应必须带明确状态码
JS 禁用按钮、CSS 隐藏高危区域、HTML disabled 属性……这些都只是降低误操作概率的提示手段。真实防护永远在服务端:解绑手机号必须校验当前登录态+短信验证码+操作间隔;关闭两步验证必须要求最近一次成功登录时间距今不超过 15 分钟;修改密码必须拒绝与历史密码雷同。
最容易被忽略的是 HTTP 状态码。返回 403 Forbidden 表示权限不足,422 Unprocessable Entity 表示校验失败,而不是统一返回 200 OK 再靠前端弹窗提示——后者会让自动化攻击完全绕过判断逻辑。











