HTML页面添加验证码的简单方法

本文深入剖析了HTML页面中验证码实现的核心原则与常见误区，强调真正有效的验证码必须依赖服务端生成与比对，前端纯JavaScript方案（如Math.random+Canvas）本质上形同虚设，极易被绕过和自动化识别；文章系统介绍了两种可靠实践路径：一是轻量级PHP+GD+Session自建图形验证码，并详解关键避坑点（如禁止输出、Session及时清理、强制禁用缓存等）；二是推荐采用Google reCAPTCHA v3进行无感后台风险评分验证，同时严肃指出——无论哪种方案，跳过服务端校验都等于完全放弃安全防线。

HTML 页面里加验证码，前端自己生成基本不安全

纯 HTML + JavaScript 实现的验证码（比如用 Math.random() 生成数字、Canvas 绘制干扰线）只是障眼法。用户能直接看懂源码、绕过校验、甚至用脚本自动识别——这类“验证码”对爬虫和恶意提交完全无效。

真正起作用的验证码必须满足两个条件：服务端生成、服务端比对。前端只负责展示和提交，验证逻辑绝对不能暴露在浏览器里。

• 常见错误：把验证码字符串写死在 JS 变量里，或通过 localStorage 存储后比对
• 典型现象：F12 打开控制台，几秒内就能找到验证码值，或直接跳过输入框提交表单
• 后果：注册/登录/评论接口被暴力刷，垃圾数据灌满数据库

推荐用现成服务端方案：PHP + Session 验证码最轻量

如果你用的是 PHP（哪怕只是本地测试），gd 扩展开启后，三步就能跑通一个可用的验证码流程：

• 后端生成：用 imagecreate() 绘图 + $_SESSION['captcha'] 存值
• 前端嵌入：
• 表单提交时，后端比对用户输入的 $_POST['captcha'] 和 $_SESSION['captcha'] 是否一致，再清空 session

注意：每次刷新图片必须重置 session 值，否则多次点击会失效；captcha.php 文件头部不能有任何输出（包括空格、BOM），否则图片无法显示。

不想搭后端？用 Google reCAPTCHA v3 是唯一靠谱选择

reCAPTCHA v3 不需要用户点选，它在后台打分（0.0–1.0），你只需在前端加载 JS，后端用密钥调 https://www.google.com/recaptcha/api/siteverify 校验 token。

• 前端关键代码：grecaptcha.execute('your-site-key', {action: 'submit'}) 获取 token
• 后端必须校验：把 token 和 secret 发给 Google 接口，解析返回的 score 字段（建议拒绝 score 的请求）
• 切勿跳过服务端校验——把 token 拿去前端 JS 里自己判断 score，等于没做

reCAPTCHA v2（勾选“我不是机器人”）兼容性更好，但体验略重；v3 更隐蔽，适合登录/注册等关键操作。

自建简单图形验证码要注意的三个坑

如果坚持自己画图（比如用 Python Flask 或 Node.js），这几个点不处理好，验证码就形同虚设：

• 字符必须混淆：不用纯数字，加入大小写字母（避开 0/O/l/I 等易混字符），长度 ≥ 4，加扭曲、噪点、干扰线
• Session 生命周期要短：$_SESSION['captcha'] 设 2 分钟过期，且验证成功后立即 unset()
• 同一 IP 短时间内失败超 3 次，应临时封禁该 IP 或强制弹出更难的验证码（如滑块）

最难被注意到的一点：验证码图片的 HTTP 响应头里，一定要加 Cache-Control: no-store, no-cache，否则浏览器或 CDN 可能缓存图片，导致同一个验证码反复使用。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML页面添加验证码的简单方法》文章吧，也可关注golang学习网公众号了解相关技术文章。