纯前端验证码仅作体验优化，必须由后端校验：用白名单字符生成验证码，canvas 添加旋转/噪点干扰，将值存于dataset；提交时连同时间戳发往后端，服务端须绑定session、限频、用完即焚。
怎么用纯 HTML + JS 生成简单图形验证码？
纯前端验证码只能防低级爬虫或误操作，不能替代服务端校验。它本质是：用 canvas 或 SVG 动态画出干扰文字，把真实值存在 JS 变量或 data- 属性里，用户输入后比对——但这个比对必须由后端最终确认。
实操建议：
- 别用
Math.random()直接拼字符串当验证码，容易重复或含易混淆字符（如 0/O、1/l）；改用白名单数组：['2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','J','K','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'] - canvas 绘制时务必加旋转、噪点、划线干扰，否则 OCR 一扫就破；示例关键步骤：
ctx.rotate((Math.random() - 0.5) * 0.5)、ctx.fillRect(Math.random()*w, Math.random()*h, 1, 1) - 每次点击刷新验证码，要同时重置输入框和隐藏的校验值：
input.value = ''+captchaEl.dataset.value = generatedCode
怎么让输入框和验证码联动校验？
用户输完点提交时，JS 可做初步提示，但仅用于体验优化。重点在于：不阻断表单提交，而是把验证码值作为额外字段发给后端，并在后端比对 session 中存的原始值。
常见错误现象：
- 前端直接用
if (input.value === captchaEl.dataset.value)就放行——这等于没校验，绕过 JS 就能发请求 - 把验证码明文写进 HTML 注释或
console.log——爬虫一眼可见 - 没清空
dataset.value或没设过期时间，导致同一验证码被反复使用
正确做法：表单提交时，收集 input.value 和当前时间戳，连同其他字段一起 POST；后端收到后查 session，比对成功才继续处理业务逻辑。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
为什么不能只靠前端生成验证码？
因为浏览器环境完全可控。攻击者可以：
- 禁用 JS 后手动填固定值（如果后端没校验）
- 用 Puppeteer 打开页面，自动读取
dataset.value，再填入表单 - 反复请求 index.html，批量提取所有可能的验证码组合
所以服务端必须做三件事：session 存原始值、限制单 IP 每分钟请求数、验证码用完即失效（哪怕用户没提交）。前端那套 canvas 只是第一道门帘，不是锁。
有没有更省事又不太弱的方案？
用现成的轻量级服务，比如 https://api.geetest.com/get.php（极验滑动）、或自建一个返回 base64 图片 + token 的接口。自己写后端接口时，推荐用 svg-captcha（Node.js）或 python-simple-captcha（Python），它们默认带干扰、字体随机、session 绑定。
如果硬要零后端，至少做到：localStorage 不存验证码原文，改存哈希（如 sha256(generatedCode + timestamp)），后端校验时用同样逻辑反推——但这仍不如真 session 安全。
真正容易被忽略的点：验证码图片的 src 必须带时间戳参数（如 ?t=1715823492），否则浏览器缓存会导致多次点击显示同一个图，而 dataset.value 却已更新，前后对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
