利用puppeteer破解極驗的滑動驗證

上一篇文章寫了一個puppeteer的簡單入門，出於好奇想了一個問題，puppeteer能破解驗證碼嗎？？？因而，正好就拿前端網來試試 （純粹出於學習）

基本的流程：

1. 打開前端網，點擊登陸。

2. 填寫帳號，密碼。

3. 點解驗證按鈕，經過滑動驗證，最後成功登錄。

代碼實現：

github上能夠checkout。

run.js

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6 Plus'];
let timeout = function (delay) {
     return new Promise((resolve, reject) => {   
           setTimeout(() => {   
                  try {
                      resolve(1)
                  } catch (e) {
                      reject(0)
                   }
           }, delay);
     })
 }

 let page = null
 let btn_position = null
 let times = 0 // 執行從新滑動的次數
 const distanceError = [-10,2,3,5] // 距離偏差

 async function run() {
  const browser = await puppeteer.launch({
      headless:false //這裏我設置成false主要是爲了讓你們看到效果，設置爲true就不會打開瀏覽器
  });
  page = await browser.newPage();

  // 1.打開前端網
  await page.emulate(iPhone);
  await page.goto('https://www.qdfuns.com/');
  await timeout(1000);
  
  // 2.打開登陸頁面
  page.click('a[data-type=login]')
  await timeout(1000);

  // 3.輸入帳號密碼
  page.type('input[data-type=email]','你的帳號')
  await timeout(500);
  page.type('input[placeholder=密碼]','你的密碼')
  await timeout(1000);
  
  // 4.點擊驗證
  page.click('.geetest_radar_tip')
  await timeout(1000);

  btn_position = await getBtnPosition();

  // 5.滑動
  drag(null)
 }

 /** * 計算按鈕須要滑動的距離 * */ 
 async function calculateDistance() {
  const distance = await page.evaluate(() => {

    // 比較像素,找到缺口的大概位置
    function compare(document) {
      const ctx1 = document.querySelector('.geetest_canvas_fullbg'); // 完成圖片
      const ctx2 = document.querySelector('.geetest_canvas_bg');  // 帶缺口圖片
      const pixelDifference = 30; // 像素差
      let res = []; // 保存像素差較大的x座標

      // 對比像素
      for(let i=57;i<260;i++){
        for(let j=1;j<160;j++) {
          const imgData1 = ctx1.getContext("2d").getImageData(1*i,1*j,1,1)
          const imgData2 = ctx2.getContext("2d").getImageData(1*i,1*j,1,1)
          const data1 = imgData1.data;
          const data2 = imgData2.data;
          const res1=Math.abs(data1[0]-data2[0]);
          const res2=Math.abs(data1[1]-data2[1]);
          const res3=Math.abs(data1[2]-data2[2]);
              if(!(res1 < pixelDifference && res2 < pixelDifference && res3 < pixelDifference)) {
                if(!res.includes(i)) {
                  res.push(i);
                }
              }  
        }
      }
      // 返回像素差最大值跟最小值，通過調試最小值往左小7像素，最大值往左54像素
      return {min:res[0]-7,max:res[res.length-1]-54}
    }
    return compare(document)
  })
  return distance;
 }

 /** * 計算滑塊位置 */
 async function getBtnPosition() {
  const btn_position = await page.evaluate(() => {
    const {clientWidth,clientHeight} = document.querySelector('.geetest_popup_ghost')
    return {btn_left:clientWidth/2-104,btn_top:clientHeight/2+59}
  })
  return btn_position;
 }

 /** * 嘗試滑動按鈕 * @param distance 滑動距離 * */  
 async function tryValidation(distance) {
  //將距離拆分紅兩段，模擬正常人的行爲
  const distance1 = distance - 10
  const distance2 = 10

  page.mouse.click(btn_position.btn_left,btn_position.btn_top,{delay:2000})
  page.mouse.down(btn_position.btn_left,btn_position.btn_top)
  page.mouse.move(btn_position.btn_left+distance1,btn_position.btn_top,{steps:30})
  await timeout(800);
  page.mouse.move(btn_position.btn_left+distance1+distance2,btn_position.btn_top,{steps:20})
  await timeout(800);
  page.mouse.up()
  await timeout(4000);
  
  // 判斷是否驗證成功
  const isSuccess = await page.evaluate(() => {
    return document.querySelector('.geetest_success_radar_tip_content') && document.querySelector('.geetest_success_radar_tip_content').innerHTML
  })
  await timeout(1000);
  // 判斷是否須要從新計算距離
  const reDistance = await page.evaluate(() => {
    return document.querySelector('.geetest_result_content') && document.querySelector('.geetest_result_content').innerHTML
  })
  await timeout(1000);
  return {isSuccess:isSuccess==='驗證成功',reDistance:reDistance.includes('怪物吃了拼圖')}
 }

 /** * 拖動滑塊 * @param distance 滑動距離 * */ 
 async function drag(distance) {
  distance = distance || await calculateDistance();
  const result = await tryValidation(distance.min)
  if(result.isSuccess) {
    await timeout(1000);
    //登陸
    console.log('驗證成功')
    page.click('#modal-member-login button')
  }else if(result.reDistance) {
    console.log('從新計算滑距離錄，從新滑動')
    times = 0
    await drag(null)
  } else {
    if(distanceError[times]){
      times ++
      console.log('從新滑動')
      await drag({min:distance.max,max:distance.max+distanceError[times]})
    } else {
      console.log('滑動失敗')
      times = 0
      run()
    }
  }
 }

 run()


複製代碼

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "dependencies": {
    "puppeteer": "^1.0.0"
  }
}

複製代碼

運行

1. 將這個兩個文件保存到文件夾下面，終端切換到當前路徑下

2. npm i

3. 補上前端網的帳號，密碼

4. node run

演示

下圖演示能夠分爲四步：

1. 打開登錄頁面，輸入事先寫好的 帳號密碼 。

2. 第一次拖動滑塊提示「 被怪獸吃了」，因此從新計算了新的圖片的缺口距離。

3. 第二，三次拖動提示 「沒正確合拼」，因此從新拖動。

4. 驗證成功，登陸。

（請將鼠標放到gif上查看演示效果，或者請拖到新窗口打開gif）

說明

1. 滑動驗證有三個canvas，其中只須要 classname爲 ‘geetest_canvas_fullbg’ 以及 ‘geetest_canvas_bg’ 的進行像素差對比。ps: 前者是完整圖片，後者是帶缺口的圖片。

2. 每一個帶缺口的圖片都有一塊誤導的陰影，因此對比像素差的時候，計算出的距離分別是誤導陰影以及缺口的。所以，滑動距離的取值，我取‘{min:res[0]-7,max:res[res.length-1]-54}’。當缺口比誤導陰影靠左時，min（距離最小值）值就是滑動距離，不然就是max（距離最大值）減去滑塊寬度。

3. 滑動結果分三種狀況：驗證成功，被吃了，失敗。「被吃了」會從新請求圖片，因此從新計算了距離再滑動；「失敗」則從新滑動，若是執行4次依然失敗，則從新run整個流程。

整個流程大概就是這樣，有興趣的朋友能夠交流交流