发布于 由admin

JS `CAPTCHA` (验证码) 识别与绕过技术

各位观众老爷们，晚上好！今天咱就来聊聊这让人又爱又恨的“验证码”——CAPTCHA，以及如何用JS来识别它（当然，咱们只聊聊技术原理，别干坏事儿啊！）。

开场白：验证码这磨人的小妖精

话说这互联网江湖，鱼龙混杂，各种机器人爬虫横行霸道。为了保护咱们的网站不被它们薅羊毛，验证码（CAPTCHA）应运而生。这玩意儿，表面上看是几个歪七扭八的字母数字，实则肩负着区分人类和机器的重任。

但问题来了，验证码也经常误伤友军，让人类也得费劲巴拉地辨认，简直是“敌我不分，一律打倒”。更可气的是，有些坏家伙，想方设法地绕过验证码，搞得咱们防不胜防。

所以，今天咱就来扒一扒这验证码的底裤，看看JS能做些什么。

第一部分：验证码类型大观园

验证码的种类繁多，按难度等级可以简单分为：

验证码类型 难度等级 描述 常用技术
简单型 低 纯数字、纯字母、简单的算术题（比如 1+1=？） OCR (光学字符识别), 简单的字符串处理
复杂型 中 扭曲变形的字母数字、带干扰线的字母数字、滑动验证、点击验证 图像处理（二值化、去噪、分割）、机器学习（CNN）、模板匹配、行为分析
行为验证 高 拖动拼图、点击选择图像中的物体（比如“选出所有的汽车”）、空间推理（比如旋转物体到指定方向） 机器学习（图像识别、物体检测）、行为分析、强化学习
无感验证 极高 通过分析用户的行为特征（鼠标轨迹、键盘输入、设备指纹等）来判断是否为机器人，用户几乎无感知 行为分析、机器学习（各种分类算法）、浏览器指纹识别

第二部分：JS识别验证码的武器库

JS虽然不能直接调用底层操作系统，但配合一些库和API，也能在浏览器端识别一些简单的验证码。咱们先从最简单的开始：

  1. OCR (光学字符识别)

    OCR可以将图像中的文字识别出来。在JS中，常用的OCR库有：

    • Tesseract.js: 基于Google的Tesseract OCR引擎的JS封装。

    使用Tesseract.js的例子：

    // 引入Tesseract.js
const { createWorker } = Tesseract;

async function recognizeCaptcha(imageURL) {
  const worker = await createWorker();
  await worker.loadLanguage('eng'); // 加载英文语言包
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize(imageURL);
  await worker.terminate();
  return text;
}

// 使用例子：假设验证码图片的URL是 'captcha.png'
recognizeCaptcha('captcha.png')
  .then(text => {
    console.log('识别结果:', text);
  })
  .catch(error => {
    console.error('识别失败:', error);
  });

    注意事项：

    • Tesseract.js的识别精度受图片质量影响很大。对于扭曲变形严重的验证码，效果可能不佳。
    • 需要加载对应的语言包（比如 eng for English）。
    • 首次加载语言包可能需要一些时间。

  2. 图像处理：给OCR打辅助

    在将验证码图片交给OCR之前，我们可以先用JS做一些图像处理，提高识别率。常用的图像处理技术有：

    • 二值化: 将图像转换为只有黑白两种颜色，突出文字。
    • 去噪: 去除图像中的干扰线、噪点。
    • 分割: 将验证码中的每个字符分割开来，单独识别。

    这些图像处理操作可以用HTML5 Canvas来实现：

    function preprocessImage(imageURL, callback) {
  const img = new Image();
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 1. 二值化
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      const threshold = 128; // 可以调整阈值
      const color = avg < threshold ? 0 : 255;
      data[i] = data[i + 1] = data[i + 2] = color;
    }
    ctx.putImageData(imageData, 0, 0);

    // 2. 去噪（简单的均值滤波）
    // (这里只是一个简单的例子，实际应用中可能需要更复杂的算法)
    // ... (省略去噪代码，比较复杂，需要遍历像素点，计算周围像素的平均值)

    // 3. 分割字符（简单的垂直投影）
    // (这里只是一个简单的例子，实际应用中可能需要更复杂的算法)
    // ... (省略分割代码，比较复杂，需要分析图像的垂直像素分布)

    callback(canvas.toDataURL()); // 将处理后的图像转换为Data URL
  };
  img.src = imageURL;
}

// 使用例子：
preprocessImage('captcha.png', function(processedImageURL) {
  // processedImageURL 就是处理后的图像的Data URL
  // 可以将这个Data URL传给Tesseract.js进行识别
  recognizeCaptcha(processedImageURL)
    .then(text => {
      console.log('识别结果(经过预处理):', text);
    })
    .catch(error => {
      console.error('识别失败:', error);
    });
});

    注意事项：

    • 图像处理算法的选择取决于验证码的特点。不同的验证码需要不同的处理方式。
    • 二值化的阈值需要根据实际情况调整。
    • 去噪算法有很多种，比如均值滤波、中值滤波、高斯滤波等。
    • 字符分割是比较困难的一步，需要根据字符的形状、间距等特征进行分析。

  3. 模板匹配：简单粗暴但有效

    对于一些字体固定、变形不大的验证码，可以使用模板匹配。简单来说，就是事先准备好每个字符的模板，然后将验证码图片与模板进行比较，找出最匹配的字符。

    // 假设我们已经有了每个字符的模板（Data URL）
const templates = {
  '0': 'data:image/png;base64,...',
  '1': 'data:image/png;base64,...',
  '2': 'data:image/png;base64,...',
  // ...
  '9': 'data:image/png;base64,...',
  'A': 'data:image/png;base64,...',
  'B': 'data:image/png;base64,...',
  // ...
  'Z': 'data:image/png;base64,...'
};

function matchTemplate(captchaImageURL) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;

      let result = '';
      // 假设验证码有4个字符，并且每个字符的宽度是 img.width / 4
      const charWidth = img.width / 4;
      for (let i = 0; i < 4; i++) {
        let bestMatch = null;
        let bestScore = -1; // 匹配度，越高越好

        for (const char in templates) {
          const templateImage = new Image();
          templateImage.src = templates[char];
          templateImage.onload = function() {
            const templateCanvas = document.createElement('canvas');
            templateCanvas.width = templateImage.width;
            templateCanvas.height = templateImage.height;
            const templateCtx = templateCanvas.getContext('2d');
            templateCtx.drawImage(templateImage, 0, 0);
            const templateImageData = templateCtx.getImageData(0, 0, templateCanvas.width, templateCanvas.height);
            const templateData = templateImageData.data;

            // 计算匹配度（简单的像素比较）
            let score = 0;
            for (let y = 0; y < templateCanvas.height; y++) {
              for (let x = 0; x < templateCanvas.width; x++) {
                const index = (y * templateCanvas.width + x) * 4;
                // 比较验证码图片中对应位置的像素和模板图片的像素是否接近
                const captchaIndex = (y * img.width + x + i * charWidth) * 4;

                //简单计算像素差值的绝对值，差值越小，匹配度越高
                const diff = Math.abs(data[captchaIndex] - templateData[index]) +
                             Math.abs(data[captchaIndex+1] - templateData[index+1]) +
                             Math.abs(data[captchaIndex+2] - templateData[index+2]);

                //可以根据需求调整权重和阈值
                score += (255 * 3 - diff);
              }
            }

            if (score > bestScore) {
              bestScore = score;
              bestMatch = char;
            }

            if (Object.keys(templates).indexOf(char) === Object.keys(templates).length - 1) {
              // 所有模板都匹配完了
              result += bestMatch;
              if(i === 3){
                resolve(result);
              }
            }

          }
          templateImage.onerror = reject;
        }
      }
    };
    img.onerror = reject;
    img.src = captchaImageURL;
  });
}

// 使用例子：
matchTemplate('captcha.png')
  .then(text => {
    console.log('识别结果(模板匹配):', text);
  })
  .catch(error => {
    console.error('识别失败:', error);
  });

    注意事项：

    • 模板的质量非常重要。模板越清晰、越准确，匹配效果越好。
    • 模板匹配对验证码的变形、旋转、缩放等变化比较敏感。
    • 可以尝试使用更复杂的匹配算法，比如归一化互相关匹配。

第三部分：绕过验证码的奇技淫巧

识别验证码是一种方法，但有时候，我们可以直接绕过它。以下是一些常见的绕过技巧：

  1. 寻找API漏洞：

    有些网站的验证码逻辑存在漏洞，可以直接通过API提交空验证码或特定的值来绕过。

    例子：

    // 假设登录API是 /login
// 验证码字段是 captcha
fetch('/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'your_username',
    password: 'your_password',
    captcha: '' // 提交空验证码
  })
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    console.log('登录成功！');
  } else {
    console.log('登录失败:', data.message);
  }
});

    注意事项：

    • 这种方法需要对网站的API进行分析，找到漏洞所在。
    • 有些网站会对空验证码进行检测，需要尝试其他的值。

  2. Cookie大法：

    有些网站的验证码只在第一次访问时出现，之后会通过Cookie记录用户的状态。我们可以先手动通过一次验证码，然后保存Cookie，下次再访问时直接使用保存的Cookie。

    例子：

    // 获取当前页面的所有Cookie
function getCookies() {
  const cookies = document.cookie.split(';');
  const cookieObj = {};
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    const [name, value] = cookie.split('=');
    cookieObj[name] = value;
  }
  return cookieObj;
}

// 设置Cookie
function setCookie(name, value, days) {
  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
  document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}

// 使用例子：
// 1. 手动通过一次验证码后，获取Cookie
const cookies = getCookies();
console.log('Cookie:', cookies);

// 2. 将Cookie保存到本地存储（localStorage）或服务器端

// 3. 下次访问时，先检查是否存在保存的Cookie，如果存在，则设置Cookie
if (localStorage.getItem('myCookies')) {
  const savedCookies = JSON.parse(localStorage.getItem('myCookies'));
  for (const name in savedCookies) {
    setCookie(name, savedCookies[name], 30); // 设置30天有效期
  }
}

    注意事项：

    • Cookie的有效期有限，过期后需要重新获取。
    • 有些网站会对Cookie进行加密或校验，需要分析其加密算法。

  3. 打码平台：

    如果以上方法都失效了，可以考虑使用打码平台。打码平台提供人工识别验证码的服务，我们可以将验证码图片发送给打码平台，平台会将识别结果返回给我们。

    例子：

    // (以下代码只是一个示例，需要根据具体的打码平台API进行修改)
async function solveCaptcha(imageURL) {
  const apiKey = 'your_dama_api_key';
  const apiUrl = 'https://api.dama.com/solve';

  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      api_key: apiKey,
      image_url: imageURL
    })
  });

  const data = await response.json();

  if (data.success) {
    return data.result; // 返回识别结果
  } else {
    throw new Error('打码失败: ' + data.message);
  }
}

// 使用例子：
solveCaptcha('captcha.png')
  .then(text => {
    console.log('识别结果(打码平台):', text);
  })
  .catch(error => {
    console.error('识别失败:', error);
  });

    注意事项：

    • 打码平台需要付费。
    • 需要选择信誉良好的打码平台。
    • 有些网站会检测打码平台的IP地址，需要使用代理IP。

第四部分：行为验证码的攻防

对于行为验证码（比如滑动拼图、点击选择图像），JS的识别难度大大增加。因为这类验证码不仅需要识别图像，还需要模拟用户的行为。

  1. 模拟滑动轨迹：

    对于滑动拼图验证码，可以尝试模拟用户的滑动轨迹。

    // (以下代码只是一个示例，需要根据具体的验证码实现进行调整)
function simulateSlide(element, distance) {
  return new Promise(resolve => {
    // 1. 鼠标按下
    const mouseDownEvent = new MouseEvent('mousedown', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    element.dispatchEvent(mouseDownEvent);

    // 2. 模拟滑动轨迹
    const steps = 20; // 分成20步滑动
    const stepSize = distance / steps;
    let currentX = 0;

    const intervalId = setInterval(() => {
      currentX += stepSize;
      if (currentX >= distance) {
        currentX = distance;
        clearInterval(intervalId);
      }

      const mouseMoveEvent = new MouseEvent('mousemove', {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: element.getBoundingClientRect().left + currentX, // 模拟鼠标的X坐标
        clientY: element.getBoundingClientRect().top + element.offsetHeight / 2 // 模拟鼠标的Y坐标
      });
      element.dispatchEvent(mouseMoveEvent);

      if (currentX === distance) {
        // 3. 鼠标松开
        setTimeout(() => {
          const mouseUpEvent = new MouseEvent('mouseup', {
            bubbles: true,
            cancelable: true,
            view: window
          });
          element.dispatchEvent(mouseUpEvent);
          resolve();
        }, 50); // 稍微延迟一下
      }
    }, 20); // 每20毫秒滑动一步
  });
}

// 使用例子：
const slider = document.querySelector('.slider'); // 找到滑动条的DOM元素
const track = document.querySelector('.track'); // 找到滑动轨道的DOM元素
const distance = 100; // 需要滑动的距离 (需要自己计算)

simulateSlide(slider, distance)
  .then(() => {
    console.log('滑动完成！');
  });

    注意事项：

    • 需要找到滑动条的DOM元素。
    • 需要计算出需要滑动的距离。
    • 真实的滑动轨迹通常不是直线，可以模拟更复杂的轨迹，比如贝塞尔曲线。
    • 有些网站会对滑动速度、加速度等进行检测，需要模拟更真实的用户行为。

  2. 图像识别+点击：

    对于点击选择图像的验证码，可以先用机器学习算法（比如CNN）识别图像中的物体，然后模拟鼠标点击对应的位置。

    这种方法比较复杂，需要用到深度学习框架（比如TensorFlow.js），这里就不提供完整的代码了，只提供一些思路：

    • 数据准备： 收集大量的带标签的图像数据，比如“汽车”、“飞机”、“轮船”等。
    • 模型训练： 使用TensorFlow.js训练一个图像分类模型，能够识别图像中的物体。
    • 点击模拟： 根据模型识别结果，计算出需要点击的位置，然后模拟鼠标点击。

第五部分：无感验证码的挑战

无感验证码通过分析用户的行为特征来判断是否为机器人，用户几乎无感知。这种验证码的绕过难度极高，需要对用户的行为进行深入分析，并模拟出与真人相似的行为模式。

绕过无感验证码的难度非常大，一般需要：

  • 大量的用户行为数据： 需要收集大量的真人用户行为数据，包括鼠标轨迹、键盘输入、设备指纹等。
  • 复杂的机器学习模型： 需要训练复杂的机器学习模型，能够区分真人用户和机器人。
  • 持续的对抗和更新： 验证码的开发者会不断更新和改进验证码，需要持续地对抗和更新绕过方法。

总结：

今天咱们聊了验证码的各种类型，以及如何用JS来识别和绕过它们。当然，这些只是一些简单的例子，实际应用中会遇到各种各样的挑战。

记住，技术是把双刃剑，咱们要用它来做好事，而不是干坏事儿。 希望大家在学习技术的道路上越走越远，早日成为一名真正的编程大牛！

散会！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注