canvas验证码仅适合本地演示，因前端明文存储、逻辑可逆、无服务端校验而无法防爬；必须配合后端生成随机码、redis存储、一次性token校验才能用于生产环境。
纯 HTML + Canvas 画出来的文字验证码，浏览器里点几下 F12 就能绕过，根本防不住爬虫和暴力提交——它只适合本地演示或教学，不能用在真实注册、登录、评论等接口上。
Canvas 绘制的验证码为什么一查就露馅
Canvas 渲染的字符是前端 JS 生成的，比如 generateRandomString(4) 返回的值，往往直接存在变量里或塞进 localStorage，用户打开控制台输 console.log(captchaText) 就能看到明文；更糟的是，整个逻辑都在源码里，脚本可以自动截屏 + OCR 识别，或者干脆跳过输入框直接发请求。
常见错误现象包括：
- 刷新图片后验证码不变（JS 没重新生成）
- 输入正确却提示“错误”（前后端没同步状态，或比对逻辑写在前端）
- 点击提交时没传验证码字段，后端收不到
captcha参数
如果非要用 Canvas 做，至少得关掉三个漏洞口
不是不能画，而是画完必须切断前端可读路径：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 随机字符串必须用
secrets.choice()（Python）或crypto.getRandomValues()（JS），禁用Math.random()—— 后者可被预测，批量生成所有可能组合 - 绘制完成后立刻清空内存中的原始字符串，别存
let code = 'AB3X'这种变量，更别写进data-code属性 - Canvas 本身不提供校验能力，你必须配套一个服务端接口（如
/verify），表单提交时把用户输入 + 一次性 token（如captcha_id）一起发过去，由后端查数据库或 Redis 比对
前端 Canvas 验证码的最小可行代码结构
下面这段 JS 只负责“画”，不暴露答案，也不做判断：
function drawCaptcha() {
const canvas = document.getElementById('captcha');
const ctx = canvas.getContext('2d');
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
// 用 crypto 生成安全随机索引
const arr = new Uint8Array(4);
crypto.getRandomValues(arr);
const code = Array.from(arr, i => chars[i % chars.length]).join('');
<p>ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = 'bold 32px Arial';
ctx.fillStyle = '#333';
// 扭曲每个字符位置，避免直线排布
for (let i = 0; i 22 + (Math.random() - 0.5) 10;
const y = 40 + (Math.random() - 0.5) <em> 10;
ctx.save();
ctx.translate(x, y);
ctx.rotate((Math.random() - 0.5) </em> 0.3);
ctx.fillText(code[i], 0, 0);
ctx.restore();
}</p><p>// 关键：不返回 code，也不存到全局变量
// 后续靠服务端下发的 captcha_id 关联本次绘制
}</p>
注意：drawCaptcha() 执行完，code 变量就出了作用域，JS 引擎会回收。想拿到它？除非你在 DevTools 里打断点卡住执行流——这已经超出普通攻击者的常规手段。
真正上线必须补的服务端环节
Canvas 画图只是表象，验证逻辑全在后端。缺了这三步，Canvas 再花哨也是摆设：
- 每次调用
/captcha接口时，后端生成新字符串 + 唯一captcha_id，存入 Redis（带 2 分钟 TTL），并返回{ id: 'abc123', image: 'base64...' } - 前端把
captcha_id存进隐藏域<input type="hidden" name="captcha_id">，和用户输入一起提交 - 后端收到表单后，用
captcha_id查 Redis 获取原始字符串，比对成功则立即DEL该 key，防止重放
最容易被忽略的一点：前端 Canvas 的宽高、字体、干扰逻辑，和服务端生成图片的参数必须严格一致——否则用户肉眼看到的和后端存储的不是同一串字符，比对必然失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
