这周在看用puppeteer来做滑动验证码破解方面的东西，下面是常见的破解思路。不熟悉puppeteer的同学可以看下之前总结的入门文章合集。
对于没有完整图片的，目前有了思路，但是用node还在探索如何实现，在java或者python中是有对应的api可以实现。
依赖
"dependencies": {
"gm": "^1.23.1",
"puppeteer": "^1.19.0",
"rembrandt": "^0.1.3"
}
dipbit
const puppeteer = require('puppeteer')
async function run() {
// launch 发射
// browser对应一个浏览器实例，一个 browser 可以包含多个 browserContext
const browser = await puppeteer.launch({
headless: false, // 在无界面的环境中运行 Chrome
// slowMo: 100, //放慢浏览器执行速度，方便测试观察
defaultViewport: { width: 1366, height: 768 } // 默认宽高
})
const page = await browser.newPage()
// 将navigator中webdriver属性设为false，通过页面监测
// 除此之外还有很多需要骗过监测的地方
// 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') // 整个滑动条节点
let slider = await sliderElement.boundingBox() // 返回元素的x,y坐标以及宽高
let sliderHandle = await page.$('.nc_iconfont.btn_slide') // 滑块节点
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')
// 国内注册页面需要点击同意用户协议
// 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') // 整个验证码最外层节点
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毫秒执行一次慢慢移动到目标位置
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
}
/**
*
* 点击按钮触发验证码
*/
async function trigger(page) {
const triggerBtnElementHandle = await page.waitForSelector('.geetest_btn') // 点击触发验证码的按钮
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数据，转换成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') // 验证码背景外层节点
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毫秒执行一次慢慢移动到目标位置
await page.mouse.move(
barAttrs.x + position - 20,
barAttrs.y + barAttrs.height / 2 + Math.random() * 10 - 5,
{ steps: 100 }
)
}
/**
*
* 滑动结束，放起按钮。
*/
async function mouseup (page) {
await page.mouse.up()
}
run()
