一：介紹

一些網站為了區分人機行為，在網站的一些操作上添加驗證碼機制，來實現反爬蟲。

目前比較常見的驗證碼類型有：

　　1：傳統式驗證碼

• 主要通過用戶輸入圖片中的字母，數字，漢字等來驗證。
• 特點：簡單易操作，人機交互性較好，但安全系數比較低。
• 目前通過機器學習技術對傳統驗證碼的識別率已經可以達到90%以上。

　　2：行為式驗證碼

• 行為式驗證碼是一種較為流行的驗證碼。從字面來理解，就是通過用戶的操作行為來完成驗證，而無需去讀懂扭曲的圖片文字。常見的有兩種：拖動式與點觸式。
• 特點：操作簡單，體驗好，但容易被逆向模擬
• 代表：極驗驗證碼

　　3：圖標選擇與行為輔助

• 給出一組圖片，按要求點擊其中一張或者多張。借用萬物識別的難度阻擋機器。
• 特點：安全性強。對於圖片、圖庫、技術要求高。
• 代表：12306驗證碼

二：分析

目前博客園采用的就是極驗的驗證碼

推薦使用Chrome瀏覽器進行研究

　　1：初步了解

　　進入博客園的登陸界面：https://passport.cnblogs.com/user/signin?ReturnUrl=https%3A%2F%2Fwww.cnblogs.com%2F

　　輸入賬號密碼以後點擊登陸

　　這就是極驗的滑塊驗證碼，最開始顯示的是一幅完整的圖片，當鼠標按住滑塊時

　　出現缺口位置，需要通過鼠標滑動到缺口位置，釋放鼠標完成驗證

　　2：抓包分析

　　可以猜想到，圖片是從網絡讀取過來的，我們打開開發者工具（F12）進行抓包

　　點擊刷新按鈕，再加載一張新的驗證碼圖片

　　抓到了4個數據包，第一個是js文件,後面三個是圖片文件(webp格式不了解的可以去查一下)

　　我們首先點開這個js文件，切換到Preview視圖中

　　可以看出這是js的一個回調函數，參數中有幾個url，逐個復制到瀏覽器中打開，可以發現應該是驗證碼圖片

　　打開後面幾個數據包可以查看到相同結果

　　但是我們又發現這圖片並不是在瀏覽器上看到的一樣，被打亂了，應該是在加載以後在瀏覽器中進行還原的

　　我們點擊開發者工具中的選擇元素按鈕（快捷鍵Ctrl+Shift+C）

　　將鼠標放到圖片驗證碼上單擊

　　開發者工具鎖定到了對應的元素位置，我們發現是一個canvas元素，可以猜想到，應該是通過js計算之後畫到瀏覽器上面的

　　（在早期的極驗版本中，驗證碼使用的是無數個div塊進行拼接，網上文章也很多，本文不再講解）

　　3：js代碼分析

　　進行代碼分析的第一步就是需要定位到核心代碼位置，再進行分析

　　我在定位代碼時候嘗試了兩種方法

• ajax斷點
• 事件監聽斷點

　　下面將這兩種方法都說一下

　　　　（1）：ajax斷點

　　　　 很多網站都是通過ajax異步加載服務器的數據用來提高用戶的體驗

　　　　 我們也可以通過ajax斷點來中斷到發送請求的地方

　　　　 選擇開發者工具的Sources視圖

　　　　在右側的xhr/fetch breakpoints 中點擊+號

　　　　回車，即下了一個斷點

　　　　現在要觸發這個斷點，我們進行刷新驗證碼

　　　　我們發現，代碼並沒有斷下，網站可能不是通過這種方式加載代碼的

　　　　接下來嘗試進行事件監聽斷點

下面內容請看極驗滑塊坐標識別(二)

極驗滑塊坐標識別(一)