html本身不具备验证码功能，验证码必须依赖服务端生成、校验并绑定会话，纯前端实现（如静态图片或canvas绘图）因无随机性、无会话绑定、逻辑暴露而无法防自动化攻击。
HTML 本身不能改善人机识别，也完全不具备验证码功能——所谓“HTML验证码”是个常见误解。验证码（CAPTCHA）必须依赖服务端逻辑生成、校验，并配合客户端渲染，纯 HTML 静态代码连随机性都没有，更谈不上防自动化攻击。
为什么 <input type="text"> + <img src="xxx.png"> 不是验证码
很多人把一个静态图片加一个输入框就叫“HTML验证码”，这本质上只是个表单布局。问题在于：
-
src指向的图片若为固定路径（如/static/captcha.png），所有用户看到同一张图，攻击者一次识别就能批量通过 - 没有服务端生成的 token 或 session 绑定，提交时无法验证“用户看到的图”和“提交的答案”是否匹配
- 浏览器直接 F12 就能查到图片 URL，甚至用脚本自动下载、OCR 识别、回填
fetch() 调用后端接口生成验证码的最小可行流程
真正起作用的环节全在服务端，前端只是触发和展示。典型流程如下：
- 页面加载后，用
fetch('/api/captcha')请求后端，返回 {captchaId: "abc123",imageBase64: "data:image/png;base64,..." } - 前端把
imageBase64填入<img>的src，同时把captchaId存进隐藏域或localStorage - 用户提交表单时，连同
captchaId和用户输入的captchaText一起发给/api/login等接口 - 后端根据
captchaId查出原始答案，比对后返回成功或失败
关键点：每次请求 /api/captcha 必须生成新图片+新 ID+新答案，且答案只在服务端内存/缓存中暂存 2–5 分钟。
用 canvas 在前端画简单字符图？不推荐
有人尝试用 JavaScript 在 <canvas></canvas> 上画扭曲字母，再转成 toDataURL() 显示。这种做法看似“免后端”，但实际很脆弱：
- 所有逻辑暴露在前端，爬虫可直接读取绘图代码，还原字符生成规则
- 无法绑定用户会话，同一段 JS 刷新后答案不变，容易被重放
- 缺乏噪声、干扰线、旋转等基础防护，现代 OCR（如 Tesseract）几乎 100% 识别
- 移动端缩放、DPR 导致字体模糊，反而降低真实用户识别率
除非是内网测试页或完全无安全要求的场景，否则别用纯前端生成方式。
最易被忽略的一点：验证码的校验必须是一次性的。同一个 captchaId 允许重复校验，等于把锁换成贴纸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
