专栏首页某熊的全栈之路Cendertron,动态爬虫的滑动验证码绕过策略

Cendertron,动态爬虫的滑动验证码绕过策略

Cendertron,动态爬虫的滑动验证码绕过策略

Cendertron 安全动态爬虫系列中我们依次介绍了安全爬虫的设计、爬虫的集群搭建,本篇则是讨论有关于滑动验证码的绕过策略。

本文采用的策略与代码来自 How to bypass “slider CAPTCHA” with JS and Puppeteer 一文。

爬虫中滑动验证的绕过

验证是常见的反爬虫策略之一,在现在的很多站点中我们会引入滑动验证的方式,来校验访问者的真实性。譬如下面著名的 jQuery 滑动插件:

在模拟登陆时,我们往往需要绕过这样的滑动验证,而基于 Puppeteer 的动态爬虫也给予了便利;往往我们需要进行以下步骤:移动到滑条中间,按下鼠标,移动鼠标,释放鼠标。

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: { width: 1366, height: 768 }
  });
  const page = await browser.newPage();

  await page.goto('http://kthornbloom.com/slidetosubmit/');
  await page.type('input[name="name"]', 'Puppeteer Bot');
  await page.type('input[name="email"]', 'js@automation.com');

  let sliderElement = await page.$('.slide-submit');
  let slider = await sliderElement.boundingBox();

  let sliderHandle = await page.$('.slide-submit-thumb');
  let handle = await sliderHandle.boundingBox();

  await page.mouse.move(
    handle.x + handle.width / 2,
    handle.y + handle.height / 2
  );
  await page.mouse.down();
  await page.mouse.move(handle.x + slider.width, handle.y + handle.height / 2, {
    steps: 10
  });
  await page.mouse.up();

  await page.waitFor(3000);

  // success!

  await browser.close();
}

run();

在实际的案例中,我们可以以淘宝的注册界面为例:

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: { width: 1366, height: 768 }
  });
  const page = await browser.newPage();

  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => false
    });
  });

  await page.goto('https://world.taobao.com/markets/all/sea/register');

  let frame = page.frames()[1];
  await frame.waitForSelector('.nc_iconfont.btn_slide');

  const sliderElement = await frame.$('.slidetounlock');
  const slider = await sliderElement.boundingBox();

  const sliderHandle = await frame.$('.nc_iconfont.btn_slide');
  const handle = await sliderHandle.boundingBox();
  await page.mouse.move(
    handle.x + handle.width / 2,
    handle.y + handle.height / 2
  );
  await page.mouse.down();
  await page.mouse.move(handle.x + slider.width, handle.y + handle.height / 2, {
    steps: 50
  });
  await page.mouse.up();

  await page.waitFor(3000);

  // success!

  await browser.close();
}

run();

另一种常见的滑块则是如下这种拼图性质的滑块:

const puppeteer = require('puppeteer');
const Rembrandt = require('rembrandt');

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: { width: 1366, height: 768 }
  });
  const page = await browser.newPage();

  let originalImage = '';

  await page.setRequestInterception(true);
  page.on('request', request => request.continue());
  page.on('response', async response => {
    if (response.request().resourceType() === 'image')
      originalImage = await response.buffer().catch(() => {});
  });

  await page.goto('https://monoplasty.github.io/vue-monoplasty-slide-verify/');

  const sliderElement = await page.$('.slide-verify-slider');
  const slider = await sliderElement.boundingBox();

  const sliderHandle = await page.$('.slide-verify-slider-mask-item');
  const handle = await sliderHandle.boundingBox();

  let currentPosition = 0;
  let bestSlider = {
    position: 0,
    difference: 100
  };

  await page.mouse.move(
    handle.x + handle.width / 2,
    handle.y + handle.height / 2
  );
  await page.mouse.down();

  while (currentPosition < slider.width - handle.width / 2) {
    await page.mouse.move(
      handle.x + currentPosition,
      handle.y + handle.height / 2 + Math.random() * 10 - 5
    );

    let sliderContainer = await page.$('.slide-verify');
    let sliderImage = await sliderContainer.screenshot();

    const rembrandt = new Rembrandt({
      imageA: originalImage,
      imageB: sliderImage,
      thresholdType: Rembrandt.THRESHOLD_PERCENT
    });

    let result = await rembrandt.compare();
    let difference = result.percentageDifference * 100;

    if (difference < bestSlider.difference) {
      bestSlider.difference = difference;
      bestSlider.position = currentPosition;
    }

    currentPosition += 5;
  }

  await page.mouse.move(
    handle.x + bestSlider.position,
    handle.y + handle.height / 2,
    { steps: 10 }
  );
  await page.mouse.up();

  await page.waitFor(3000);

  // success!

  await browser.close();
}

run();

这里我们采用了简单的图片对比的方式,即在滑动过程中,如果发现了有符合阈值的差异,则认为是已经滑动成功。

Spider 配置

Cendertron 中,提供了一类特殊的 Slider Captcha Monkey,在传入的 SpiderOption 中添加如下参数即可:

export interface SpiderOption {
  allowRedirect: boolean;
  depth: number;
  // 页面插件
  monkies?: {
    sliderCaptcha: {
      sliderElementSelector: string;
      sliderHandleSelector: string;
    };
  };
}

延伸阅读

您可以通过以下任一方式阅读笔者的系列文章,涵盖了技术资料归纳、编程语言与理论、Web 与大前端、服务端开发与基础架构、云计算与大数据、数据科学与人工智能、产品设计等多个领域:

  • 在 Gitbook 中在线浏览,每个系列对应各自的 Gitbook 仓库。

Awesome Lists

Awesome CheatSheets

Awesome Interviews

Awesome RoadMaps

Awesome-CS-Books-Warehouse

编程语言理论

Java 实战

JavaScript 实战

Go 实战

Python 实战

Rust 实战

软件工程、数据结构与算法、设计模式、软件架构

现代 Web 开发基础与工程实践

大前端混合开发与数据可视化

服务端开发实践与工程架构

分布式基础架构

数据科学,人工智能与深度学习

产品设计与用户体验

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cendertron,动态爬虫与敏感信息泄露检测

    Cendertron https://url.wx-coder.cn/HinPM 是基于 Puppeteer 的 Web 2.0 动态爬虫与敏感信息泄露检测工具...

    王下邀月熊
  • Cendertron,安全爬虫的分布式与稳定性优化之路

    Cendertron 是基于 Puppeteer 的 Web 2.0 动态爬虫与敏感信息泄露检测工具,其为 Chaos-Scanner 后续的基础扫描与 POC...

    王下邀月熊
  • 常见的爬虫的攻防策略

    从网络开始的那一刻起,爬虫就肩负了她的使命,数据收集!尤其是大数据时代的到来,越来越多的企业认识到数据的重要性,数据成了一个企业的重要资产,数据的多样性给了爬虫...

    C4rpeDime
  • 安全报告 | 2018上半年互联网恶意爬虫分析:从全景视角看爬虫与反爬虫

    云鼎实验室
  • 从全景视角看爬虫与反爬虫

    导语:互联网最激烈的对抗战场,除了安全专家与黑客之间,大概就是爬虫与反爬虫领域了。据统计,爬虫流量早已超过了人类真实访问请求流量。互联网充斥着形形色色的爬虫,云...

    C4rpeDime
  • 【报告】2018上半年互联网恶意爬虫分析

    导语:互联网最激烈的对抗战场,除了安全专家与黑客之间,大概就是爬虫与反爬虫领域了。据统计,爬虫流量早已超过了人类真实访问请求流量。互联网充斥着形形色色的爬虫,云...

    腾讯云基础安全
  • 反爬虫和反反爬虫(上篇)

    公众号爬取今日头条的那一期,不少小伙伴反应爬取下来的图片无法查看或者爬取不了,小詹也重新试了下,的确是的,写那篇推文的时候,头条还比较友好,没有添加反爬措施,大...

    小小詹同学
  • 反爬虫常见策略总结

    反爬虫,即应对爬虫进行反制的统称,主要区分“正常用户”与“机器人”的一种策略统称。

    PayneWu
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐...

    C4rpeDime
  • 30 | 安全运营:“黑灰产”打了又来,如何正确处置?

    在前面的课程中,我们介绍了 IPDRR 的前三个部分,并且着重讲解了风控系统的框架、算法以及设备指纹的相关技术。学会了这些机制和手段,你已经能够识别出大部分的黑...

    斑马
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐...

    C4rpeDime
  • 只会爬虫不会反爬虫?动图详解利用 User-Agent 进行反爬虫的原理和绕过方法!

    随着 Python 和大数据的火热,大量的工程师蜂拥而上,爬虫技术由于易学、效果显著首当其冲的成为了大家追捧的对象,爬虫的发展进入了高峰期,因此给服务器带来的压...

    崔庆才
  • 反爬虫机制和破解方法汇总

    什么是爬虫和反爬虫? 爬虫:使用任何技术手段,批量获取网站信息的一种方式。 反爬虫:使用任何技术手段,阻止别人批量获取自己网站信息的一种方式。 ? 常见的反...

    Python中文社区
  • 一个爬虫的故事:这是人干的事儿?

    说起来还要感谢HTTP协议,因为它,全世界的网站和浏览器才能够连接通信,而我也是借助HTTP协议,获取我想要的数据。

    轩辕之风
  • 浅谈网路爬虫

    爬虫,又称为网页蜘蛛(spider),就是能够在互联网中检索自己需要的信息的程序或脚本。

    bigsai
  • AI in WAF︱腾讯云网站管家 WAF:爬虫 Bot 程序管理方案

    腾讯云安全
  • 如何突破反爬虫?看这篇就够了!

    之前给大家写了那么多的爬虫案例,今天来给大家讲讲大部分网站反爬虫的一些措施以及我们如何去突破他们得反爬虫!当然这次有点标题党,技术是日益进步的,反爬虫技术也是如...

    Python进击者
  • 反击爬虫,前端工程师的脑洞可以有多大?

    1. 前言 对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网...

    IMWeb前端团队
  • 反击爬虫,前端工程师的脑洞可以有多大?

    对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额,...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券