HTML验证码不支持人机识别怎么办_人机识别运行HTML验证码关联手册

HTML无法实现人机识别，验证码校验必须由后端完成；前端仅负责展示与传递token或行为数据，所有判定逻辑、风控评分、会话绑定均需服务端执行。

HTML 本身不能运行验证码，也根本不支持人机识别——这不是配置问题，而是根本性误解。 所谓“HTML验证码”，实际是把服务端生成的验证逻辑（如 reCAPTCHA、极验、阿里云滑动验证）嵌入 HTML 页面展示，但校验动作必须由后端完成。纯前端用 <img> 标签加载一个静态图片、或用 Canvas 绘制扭曲文字，没有任何防机器能力。

为什么直接写 HTML 标签加图片无法实现人机识别

常见错误现象：页面里放了个 <img src="captcha.png">，用户输入后前端直接比对字符串，结果爬虫绕过 JS、伪造请求、批量爆破全无压力。

• 无会话绑定：captcha.png 没关联用户 session，同一张图可被无限重放
• 无随机性：若图片路径固定或参数可控（如 /captcha?n=123），攻击者可预生成所有可能输出
• 无服务端校验：前端 if (input === 'abc') { submit() } 是典型漏洞，JS 可被禁用或绕过
• 无行为采集：现代人机识别依赖鼠标轨迹、触屏压力、页面停留时长等，纯 HTML 零采集能力

reCAPTCHA v2/v3 或国产 SDK 必须后端接入才能生效

以 Google reCAPTCHA 为例，grecaptcha.execute() 返回的 token 只是临时凭证，必须传给后端调用 https://www.google.com/recaptcha/api/siteverify 接口，并用私钥校验。前端只负责触发和传递，不参与判断。

• 公钥（sitekey）放在 HTML 的 data-sitekey 或 JS 初始化中，公开无害
• 私钥（secret）绝对不可出现在前端代码、HTML 注释、或浏览器控制台中
• v3 不显示 UI，但返回的 score 仍需后端结合业务阈值决策（如 score < 0.5 则要求补二次验证）
• 国产 SDK（如极验 initGeetest、阿里云 initAliyunCaptcha）同理，validate 结果是 Base64 字符串，必须 POST 到服务端 SDK 接口解密并风控判定

蜜罐字段（Honeypot）是唯一能纯 HTML 实现的“轻量人机过滤”

它不叫验证码，但能在不引入第三方 SDK 的前提下筛掉基础爬虫，适合联系表单、订阅入口等低风险场景。

立即学习“前端免费学习笔记（深入）”；

• 在表单中加一个隐藏字段，比如 <input type="text" name="phone" style="display:none;">
• 正常用户因 CSS 隐藏看不到，不会填写；而多数表单自动提交脚本会遍历所有 input 并填值
• 后端收到请求时检查该字段是否为空：非空即判定为机器人，直接拒收
• 注意：不能仅靠 type="hidden"，必须用 style="display:none" 或 visibility:hidden，否则部分爬虫会跳过 hidden 字段
• 别用常见字段名（如 email、url），改用迷惑性名称（如 company_fax、user_agent_hint）

真正卡住人的从来不是“怎么加验证码”，而是“谁来校验、校验什么、校验后怎么响应”。前端只管呈现和传递，所有判定逻辑、行为分析、风险评分、会话状态管理，都压在后端。漏掉这一环，再炫的滑块动画、AI 图形、语音验证，都是纸糊的门。