验证码是一种人机验证手段，用于防止恶意程序自动提交表单；文章提供了三种js生成动态验证码的解决方案：1. 简单随机字符串验证码，适合安全性要求不高的场景；2. 带简单数学运算的验证码，安全性略高但仍可被ocr破解；3. 结合canvas的图形验证码，安全性更高但用户体验稍差；此外，文章强调了必须结合后端验证来防止验证码被绕过，并探讨了验证码安全性与用户体验之间的平衡及其他生成验证码的方式。
验证码，简单来说，就是一种人机验证手段，防止恶意程序或机器人自动提交表单。JS生成动态验证码，意味着每次刷新或请求，验证码都会变化，增加了破解难度，提升了安全性。
直接上解决方案，从简单的到复杂的，三种JS验证码生成算法，总有一款适合你：
解决方案
-
简单随机字符串验证码:
这是最基础的，原理就是随机生成一串字符，用户输入匹配就验证通过。
function generateSimpleCaptcha(length) { let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const charactersLength = characters.length; for ( let i = 0; i < length; i++ ) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; } const captcha = generateSimpleCaptcha(6); // 生成6位验证码 console.log(captcha); // 输出生成的验证码 // 验证用户输入 function validateCaptcha(userInput, captcha) { return userInput === captcha; } // 示例 const userInput = prompt("请输入验证码：" + captcha); if (validateCaptcha(userInput, captcha)) { alert("验证成功！"); } else { alert("验证失败！"); }这种方式简单粗暴，容易被破解，适合对安全性要求不高的场景。
-
带简单数学运算的验证码:
稍微复杂一点，生成一个简单的数学表达式，让用户计算结果。
function generateMathCaptcha() { const num1 = Math.floor(Math.random() * 10); const num2 = Math.floor(Math.random() * 10); const operators = ['+', '-', '*']; const operator = operators[Math.floor(Math.random() * operators.length)]; let answer; switch (operator) { case '+': answer = num1 + num2; break; case '-': answer = num1 - num2; break; case '*': answer = num1 * num2; break; } return { question: `${num1} ${operator} ${num2} = ?`, answer: answer.toString() // 注意转换为字符串 }; } const captcha = generateMathCaptcha(); console.log(captcha.question); // 输出问题 console.log(captcha.answer); // 输出答案 // 验证用户输入 function validateMathCaptcha(userInput, answer) { return userInput === answer; } // 示例 const userInput = prompt("请计算：" + captcha.question); if (validateMathCaptcha(userInput, captcha.answer)) { alert("验证成功！"); } else { alert("验证失败！"); }这种方式比纯字符串稍微安全一点，但仍然可以通过OCR识别和简单计算破解。
-
结合Canvas的图形验证码:
利用Canvas绘制带有干扰线的图形验证码，增加破解难度。
function generateCanvasCaptcha(canvasId) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let captchaText = ''; // 生成随机字符串 for (let i = 0; i < 4; i++) { captchaText += characters.charAt(Math.floor(Math.random() * characters.length)); } // 设置背景色 ctx.fillStyle = '#f0f0f0'; ctx.fillRect(0, 0, width, height); // 绘制文字 ctx.font = '20px Arial'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(captchaText, width / 2, height / 2); // 绘制干扰线 for (let i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(Math.random() * width, Math.random() * height); ctx.lineTo(Math.random() * width, Math.random() * height); ctx.strokeStyle = '#ccc'; ctx.stroke(); } return captchaText; } // 使用示例 (HTML中需要有一个id为myCanvas的canvas元素) const captchaText = generateCanvasCaptcha('myCanvas'); console.log(captchaText); // 验证用户输入 (需要从用户输入框获取) function validateCanvasCaptcha(userInput, captchaText) { return userInput === captchaText; } // 示例 (假设userInput是用户输入的值) const userInput = prompt("请输入图片中的验证码："); if (validateCanvasCaptcha(userInput, captchaText)) { alert("验证成功！"); } else { alert("验证失败！"); }这种方式安全性较高，但用户体验稍差，需要用户识别图片内容。可以增加字体扭曲、颜色变化等来进一步增强安全性。
如何防止JS验证码被绕过？
JS验证码本身存在一个问题：验证逻辑在客户端，容易被绕过。所以，仅仅依靠JS生成验证码是不够的，必须结合后端验证。
- 后端存储验证码: 在生成验证码的同时，将验证码存储在Session、Redis等后端存储中，并设置过期时间。
- 后端验证: 用户提交表单时，将用户输入的验证码和后端存储的验证码进行比对。只有比对成功，才允许提交。
- 防止重放攻击: 验证成功后，立即销毁后端存储的验证码，防止重复提交。
验证码的安全性与用户体验如何平衡？
这是一个经典的问题。验证码越复杂，安全性越高，但用户体验越差。需要根据具体的应用场景进行权衡。
- 滑动验证: 用户只需要滑动滑块到指定位置，操作简单，安全性也较高。
- 点选验证: 用户需要点击图片中指定的物体，例如“点击所有包含汽车的图片”，安全性较高，用户体验也还不错。
- 无感验证: 通过分析用户的行为特征，判断是否为机器人。用户无需进行任何操作，体验最佳，但对算法要求较高。
除了JS，还有哪些生成验证码的方式？
- 后端生成: 后端生成验证码图片，前端直接显示。安全性较高，但需要后端配合。
- 使用第三方验证码服务: 例如Google reCAPTCHA、阿里云验证码等。这些服务通常提供多种验证方式，安全性较高，但需要付费。
选择哪种方式取决于你的具体需求和预算。如果对安全性要求不高，简单的JS验证码也够用。如果对安全性要求较高，建议使用后端生成或第三方验证码服务。
