首页 > 文章 > 前端

JS生成动态验证码的3种方式及安全优化

时间：2025-06-26 19:38:53 237浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS生成动态验证码的3种方法及安全提升技巧》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

验证码是一种人机验证手段，用于防止恶意程序自动提交表单；文章提供了三种JS生成动态验证码的解决方案：1. 简单随机字符串验证码，适合安全性要求不高的场景；2. 带简单数学运算的验证码，安全性略高但仍可被OCR破解；3. 结合Canvas的图形验证码，安全性更高但用户体验稍差；此外，文章强调了必须结合后端验证来防止验证码被绕过，并探讨了验证码安全性与用户体验之间的平衡及其他生成验证码的方式。

JS如何生成动态验证码 3种验证码生成算法增强表单安全

验证码，简单来说，就是一种人机验证手段，防止恶意程序或机器人自动提交表单。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生成验证码是不够的，必须结合后端验证。