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 接口，并用私钥校验。前端只负责触发和传递，不参与判断。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 公钥（
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 图形、语音验证，都是纸糊的门。
