這周在看用puppeteer來做滑動驗證碼破解方面的東西己单，下面是常見的破解思路涕滋。不熟悉puppeteer的同學可以看下之前總結(jié)的入門文章合集惩嘉。

對于沒有完整圖片的浪耘，目前有了思路乱灵，但是用node還在探索如何實現(xiàn)，在java或者python中是有對應的api可以實現(xiàn)七冲。

依賴

  "dependencies": {
    "gm": "^1.23.1",
    "puppeteer": "^1.19.0",
    "rembrandt": "^0.1.3"
  }

dipbit

const puppeteer = require('puppeteer')

async function run() {
    // launch 發(fā)射
    // browser對應一個瀏覽器實例痛倚，一個 browser 可以包含多個 browserContext
    const browser = await puppeteer.launch({
        headless: false, // 在無界面的環(huán)境中運行 Chrome
        // slowMo: 100,       //放慢瀏覽器執(zhí)行速度，方便測試觀察
        defaultViewport: { width: 1366, height: 768 } // 默認寬高
    })
    const page = await browser.newPage()
    // 將navigator中webdriver屬性設為false澜躺，通過頁面監(jiān)測
    // 除此之外還有很多需要騙過監(jiān)測的地方
    // https://github.com/berstend/puppeteer-extra/tree/master/packages/puppeteer-extra-plugin-stealth?source=post_page---------------------------
    await page.evaluateOnNewDocument(() => {
        Object.defineProperty(navigator, 'webdriver', {
            get: () => false
        })
    })

    // 這個異步操作在這個頁面比較慢蝉稳。
    await page.goto('https://www.dipbit.com/auth/login')

    // type 打字
    await page.type('#email', 'js@automation.com')
    await page.type('#password', 'password123')

    let sliderElement = await page.$('.slidetounlock') // 整個滑動條節(jié)點
    let slider = await sliderElement.boundingBox() // 返回元素的x,y坐標以及寬高

    let sliderHandle = await page.$('.nc_iconfont.btn_slide') // 滑塊節(jié)點
    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: 250 })
    // 放開鼠標
    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')
    // 國內(nèi)注冊頁面需要點擊同意用戶協(xié)議 
    // await (await page.$('#J_AgreementBtn')).click()

    // 阿里國際站注冊頁面的表單是嵌入在一個iframe中
    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') // 比較圖片的庫
const fs = require('fs').promises

// 不斷進行截圖
async function run () {
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: true,
        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(() => {})
            originalImage && await fs.writeFile('./origin.jpeg', originalImage)
    })

    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') // 整個驗證碼最外層節(jié)點
        let sliderImage = await sliderContainer.screenshot() // 給整個驗證碼截圖
        await fs.writeFile('./moment.jpeg', sliderImage )
        const rembrandt = new Rembrandt({
            imageA: originalImage,
            imageB: sliderImage,
            thresholdType: Rembrandt.THRESHOLD_PERCENT
        })

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

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

        currentPosition += 5
    }
    // 每100毫秒執(zhí)行一次慢慢移動到目標位置
    await page.mouse.move(handle.x + bestSlider.position, handle.y + handle.height / 2, { steps: 100 })
    await page.mouse.up()

    await page.waitFor(3000)

    // success!

    // await browser.close()
}

run()

geetest

const puppeteer = require('puppeteer')
const Rembrandt = require('rembrandt') // 比較圖片的庫
const fs = require('fs').promises

async function run() {
  const page = await openPage()
  await trigger(page)
    await saveFullBg(page)
    const {sliderAttrs, barAttrs} = await getElAttrs(page)
    await mousedown(page, sliderAttrs)
    const {position} = await explorePosition(page, sliderAttrs, barAttrs)
    await gotoTargetPosition(page, position, barAttrs)
    await mouseup(page)
}

/**
 *
 * 打開頁面
 */
async function openPage() {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: true,
    defaultViewport: { width: 1366, height: 768 }
  })
  const page = await browser.newPage()
  await page.goto('https://www.geetest.com/demo/slide-float.html')
  return page
}

/**
 *
 * 點擊按鈕觸發(fā)驗證碼
 */
async function trigger(page) {
  const triggerBtnElementHandle = await page.waitForSelector('.geetest_btn') // 點擊觸發(fā)驗證碼的按鈕
  const triggerBtnAttrs = await triggerBtnElementHandle.boundingBox()
  await page.mouse.move(
    triggerBtnAttrs.x + triggerBtnAttrs.width / 2,
    triggerBtnAttrs.y + triggerBtnAttrs.height / 2
  )
  await page.mouse.down()
  await page.mouse.up()
}

/**
 *
 * 獲取canvas數(shù)據(jù)掘鄙，轉(zhuǎn)換成buffer
 */
async function getCanvasData(page, selector) {
  const handle = await page.waitForSelector(selector)
  const canvasData = await page.evaluate(el => {
    return el.toDataURL().replace('data:image/png;base64,', '')
  }, handle)

  const buffer = Buffer.from(canvasData, 'base64')
  return buffer
}

/**
 *
 * 將完整圖片保存到本地颠区，每次滑動進行對比。
 */
async function saveFullBg(page) {
  await page.waitForSelector('.geetest_canvas_fullbg')
    const fullBgBuffer = await getCanvasData(page, '.geetest_canvas_fullbg')

  await fs.writeFile('./assets/fullBg.png', fullBgBuffer).catch(e => {
    console.log(e)
    })
}

/**
 *
 * 獲取滑動按鈕通铲、滑動條的元素屬性和位置毕莱。
 */
async function getElAttrs (page) {
    const sliderElHandle = await page.$('.geetest_slider_button') // 滑塊
    const sliderAttrs = await sliderElHandle.boundingBox()

    const barElHandle = await page.$('.geetest_slider') // 滑動條
    const barAttrs = await barElHandle.boundingBox()
    console.log(sliderAttrs)
    return {
        sliderAttrs,
        barAttrs
    }
}

/**
 *
 * 按下鼠標
 */
async function mousedown (page, sliderAttrs) {
  await page.mouse.move(
    sliderAttrs.x + sliderAttrs.width / 2,
    sliderAttrs.y + sliderAttrs.height / 2
  )
    await page.mouse.down()
}

/**
 *
 * 按每次5px遞增，進行滑動颅夺。進行截圖朋截。
 * 比較原圖和每次截圖的diff，取最小的一次為目標位置
 */
async function explorePosition (page, sliderAttrs, barAttrs) {
    let currentPosition = 0
  let bestSlider = {
    position: 0,
    difference: 100
    }

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

    let bgWrapperHandle = await page.$('.geetest_window') // 驗證碼背景外層節(jié)點
    let sliderImage = await bgWrapperHandle.screenshot() // 給驗證碼背景截圖
    // await fs.writeFile('./assets/now.jpeg', sliderImage)
    const rembrandt = new Rembrandt({
      imageA: './assets/fullBg.png',
      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
    }
    return bestSlider
}

/**
 *
 * 將滑塊移動到目標位置
 */
async function gotoTargetPosition (page, position, barAttrs) {
  // 每100毫秒執(zhí)行一次慢慢移動到目標位置
  await page.mouse.move(
    barAttrs.x + position - 20,
    barAttrs.y + barAttrs.height / 2 + Math.random() * 10 - 5,
    { steps: 100 }
  )
}

/**
 *
 * 滑動結(jié)束吧黄，放起按鈕部服。
 */
async function mouseup (page) {
    await page.mouse.up()
}

run()

參考

how-to-bypass-slider-captcha-with-js-and-puppeteer