前端如何安全地处理多因素认证的验证码输入?

开发者琪帆 阅读 61

我正在开发一个需要多因素认证(MFA)的登录流程,后端用的是 TOTP 方式。现在前端要让用户输入 6 位验证码,但我不确定怎么处理才安全。比如,能不能把验证码存在 localStorage 里临时缓存?或者直接通过 fetch 发给后端就行?

我试过在表单提交时直接发验证码到 /verify-mfa 接口,但担心中间被拦截。有没有必要加额外加密?或者前端根本不需要关心这些,只要走 HTTPS 就行?

我来解答 赞 12 收藏
二维码
手机扫码查看
1 条解答
长孙依甜
验证码绝对别存localStorage,这东西存本地就是给自己挖坑。localStorage本质上是明文存储,XSS攻击分分钟给你拿走。

前端处理MFA验证码没那么复杂,你直接走HTTPS用POST把验证码发到后端就完事了。TOTP本身就是一次性密码,有效期就30秒左右,你加什么额外加密反而多余。HTTPS已经解决了传输层的安全问题,中间人攻击、流量劫持这些都被TLS挡掉了。

具体流程大概这样:用户输入6位数字,用form表单或者fetch发POST请求到你们的 /verify-mfa 接口,请求体里带验证码和用户标识(比如userId或者session里的token)。后端拿到验证码之后,用TOTP算法验证,验证通过就生成正式的登录session或者返回token。

有几个点注意一下:

后端验证TOTP的时候要处理好时间偏移,客户端和服务端时间不同步是常见问题,一般允许前后1-2个时间步长的偏差。

验证码错误几次之后要锁定账号或者要求重新走MFA流程,防止暴力破解。

接口层面最好加上速率限制,防止有人疯狂试验证码。

前端这边就正常做输入框,限制只能输入数字,到6位自动提交或者让用户点确认按钮。没有其他需要前端操心的安全问题了。
点赞
2026-03-18 16:00