之前看過(guò)一篇腦洞大開的文章，介紹了各個(gè)大廠的前端反爬蟲技巧，但也正如此文所說(shuō)，沒有100%的反爬蟲方法，本文介紹一種簡(jiǎn)單的方法，來(lái)繞過(guò)所有這些前端反爬蟲手段。

下面的代碼以百度指數(shù)為例，代碼已經(jīng)封裝成一個(gè)百度指數(shù)爬蟲node庫(kù)： https://github.com/Coffcer/baidu-index-spider

note: 請(qǐng)勿濫用爬蟲給他人添麻煩

百度指數(shù)的反爬蟲策略

觀察百度指數(shù)的界面，指數(shù)數(shù)據(jù)是一個(gè)趨勢(shì)圖，當(dāng)鼠標(biāo)懸浮在某一天的時(shí)候，會(huì)觸發(fā)兩個(gè)請(qǐng)求，將結(jié)果顯示在懸浮框里面：

按照常規(guī)思路，我們先看下這個(gè)請(qǐng)求的內(nèi)容：

請(qǐng)求 1：

請(qǐng)求 2：

可以發(fā)現(xiàn)，百度指數(shù)實(shí)際上在前端做了一定的反爬蟲策略。當(dāng)鼠標(biāo)移動(dòng)到圖表上時(shí)，會(huì)觸發(fā)兩個(gè)請(qǐng)求，一個(gè)請(qǐng)求返回一段html，一個(gè)請(qǐng)求返回一張生成的圖片。html中并不包含實(shí)際數(shù)值，而是通過(guò)設(shè)置width和margin-left，來(lái)顯示圖片上的對(duì)應(yīng)字符。并且請(qǐng)求參數(shù)上帶有res、res1這種我們不知如何模擬的參數(shù)，所以用常規(guī)的模擬請(qǐng)求或者h(yuǎn)tml爬取的方式，都很難爬到百度指數(shù)的數(shù)據(jù)。

爬蟲思路

怎么突破百度這種反爬蟲方法呢，其實(shí)也很簡(jiǎn)單，就是完全不去管他是如何反爬蟲的。我們只需模擬用戶操作，將需要的數(shù)值截圖下來(lái)，做圖像識(shí)別就行。步驟大概是：

1. 模擬登錄
2. 打開指數(shù)頁(yè)面
3. 鼠標(biāo)移動(dòng)到指定日期
4. 等待請(qǐng)求結(jié)束，截取數(shù)值部分的圖片
5. 圖像識(shí)別得到值
6. 循環(huán)第3～5步，就得到每一個(gè)日期對(duì)應(yīng)的值

這種方法理論上能爬任何網(wǎng)站的內(nèi)容，接下來(lái)我們來(lái)一步步實(shí)現(xiàn)爬蟲，下面會(huì)用到的庫(kù)：

1. puppeteer 模擬瀏覽器操作
2. node-tesseract tesseract的封裝，用來(lái)做圖像識(shí)別
3. jimp 圖片裁剪

安裝Puppeteer, 模擬用戶操作

Puppeteer是Google Chrome團(tuán)隊(duì)出品的Chrome自動(dòng)化工具，用來(lái)控制Chrome執(zhí)行命令?？梢阅M用戶操作，做自動(dòng)化測(cè)試、爬蟲等。用法非常簡(jiǎn)單，網(wǎng)上有不少入門教程，順著本文看完也大概可以知道如何使用。

API文檔: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

安裝：

npm install --save puppeteer

Puppeteer在安裝時(shí)會(huì)自動(dòng)下載Chromium，以確?？梢哉＿\(yùn)行。但是國(guó)內(nèi)網(wǎng)絡(luò)不一定能成功下載Chromium，如果下載失敗，可以使用cnpm來(lái)安裝，或者將下載地址改成淘寶的鏡像，然后再安裝：

npm config set PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors
npm install --save puppeteer

你也可以在安裝時(shí)跳過(guò)Chromium下載，通過(guò)代碼指定本機(jī)Chrome路徑來(lái)運(yùn)行：

// npm
npm install --save puppeteer --ignore-scripts

// node
puppeteer.launch({ executablePath: '/path/to/Chrome' });

實(shí)現(xiàn)

為版面整潔，下面只列出了主要部分，代碼涉及到selector的部分都用了...代替，完整代碼參看文章頂部的github倉(cāng)庫(kù)。

打開百度指數(shù)頁(yè)面，模擬登錄

這里做的就是模擬用戶操作，一步步點(diǎn)擊和輸入。沒有處理登錄驗(yàn)證碼的情況，處理驗(yàn)證碼又是另一個(gè)話題了，如果你在本機(jī)登錄過(guò)百度，一般不需要驗(yàn)證碼。

// 啟動(dòng)瀏覽器，
// headless參數(shù)如果設(shè)置為true，Puppeteer將在后臺(tái)操作你Chromium，換言之你將看不到瀏覽器的操作過(guò)程
// 設(shè)為false則相反，會(huì)在你電腦上打開瀏覽器，顯示瀏覽器每一操作。
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();

// 打開百度指數(shù)
await page.goto(BAIDU_INDEX_URL);

// 模擬登陸
await page.click('...');
await page.waitForSelecto('...');
// 輸入百度賬號(hào)密碼然后登錄
await page.type('...','username');
await page.type('...','password');
await page.click('...');
await page.waitForNavigation();
console.log(':white_check_mark: 登錄成功');

模擬移動(dòng)鼠標(biāo)，獲取需要的數(shù)據(jù)

需要將頁(yè)面滾動(dòng)到趨勢(shì)圖的區(qū)域，然后移動(dòng)鼠標(biāo)到某個(gè)日期上，等待請(qǐng)求結(jié)束，tooltip顯示數(shù)值，再截圖保存圖片。

// 獲取chart第一天的坐標(biāo)
const position = await page.evaluate(() => {
 const $image = document.querySelector('...');
 const $area = document.querySelector('...');
 const areaRect = $area.getBoundingClientRect();
 const imageRect = $image.getBoundingClientRect();

 // 滾動(dòng)到圖表可視化區(qū)域
 window.scrollBy(0, areaRect.top);

 return { x: imageRect.x, y: 200 }；
});

// 移動(dòng)鼠標(biāo)，觸發(fā)tooltip
await page.mouse.move(position.x, position.y);
await page.waitForSelector('...');

// 獲取tooltip信息
const tooltipInfo = await page.evaluate(() => {
 const $tooltip = document.querySelector('...');
 const $title = $tooltip.querySelector('...');
 const $value = $tooltip.querySelector('...');
 const valueRect = $value.getBoundingClientRect();
 const padding = 5;

 return {
 title: $title.textContent.split(' ')[0],
 x: valueRect.x - padding,
 y: valueRect.y,
 width: valueRect.width + padding * 2,
 height: valueRect.height
 }
});

截圖

計(jì)算數(shù)值的坐標(biāo)，截圖并用jimp對(duì)裁剪圖片。

await page.screenshot({ path: imgPath });

// 對(duì)圖片進(jìn)行裁剪，只保留數(shù)字部分
const img = await jimp.read(imgPath);
await img.crop(tooltipInfo.x, tooltipInfo.y, tooltipInfo.width, tooltipInfo.height);
// 將圖片放大一些，識(shí)別準(zhǔn)確率會(huì)有提升
await img.scale(5);
await img.write(imgPath);

圖像識(shí)別

這里我們用Tesseract來(lái)做圖像識(shí)別，Tesseracts是Google開源的一款OCR工具，用來(lái)識(shí)別圖片中的文字，并且可以通過(guò)訓(xùn)練提高準(zhǔn)確率。github上已經(jīng)有一個(gè)簡(jiǎn)單的node封裝： node-tesseract ，需要你先安裝Tesseract并設(shè)置到環(huán)境變量。

Tesseract.process(imgPath, (err, val) => {
if (err || val == null) {
 console.error(':x: 識(shí)別失?。? + imgPath);
 return;
}
console.log(val);

實(shí)際上未經(jīng)訓(xùn)練的Tesseracts識(shí)別起來(lái)會(huì)有少數(shù)幾個(gè)錯(cuò)誤，比如把9開頭的數(shù)字識(shí)別成`3，這里需要通過(guò)訓(xùn)練去提升Tesseracts的準(zhǔn)確率，如果識(shí)別過(guò)程出現(xiàn)的問(wèn)題都是一樣的，也可以簡(jiǎn)單通過(guò)正則去修復(fù)這些問(wèn)題。

封裝

實(shí)現(xiàn)了以上幾點(diǎn)后，只需組合起來(lái)就可以封裝成一個(gè)百度指數(shù)爬蟲node庫(kù)。當(dāng)然還有許多優(yōu)化的方法，比如批量爬取，指定天數(shù)爬取等，只要在這個(gè)基礎(chǔ)上實(shí)現(xiàn)都不難了。

const recognition = require('./src/recognition');
const Spider = require('./src/spider');

module.exports = {
 async run (word, options, puppeteerOptions = { headless: true }) {
 const spider = new Spider({ 
 imgDir, 
 ...options 
 }, puppeteerOptions);

 // 抓取數(shù)據(jù)
 await spider.run(word);

 // 讀取抓取到的截圖，做圖像識(shí)別
 const wordDir = path.resolve(imgDir, word);
 const imgNames = fs.readdirSync(wordDir);
 const result = [];

 imgNames = imgNames.filter(item => path.extname(item) === '.png');

 for (let i = 0; i < imgNames.length; i++) {
 const imgPath = path.resolve(wordDir, imgNames[i]);
 const val = await recognition.run(imgPath);
 result.push(val);
 }

 return result;
 }
}

反爬蟲

最后，如何抵擋這種爬蟲呢，個(gè)人認(rèn)為通過(guò)判斷鼠標(biāo)移動(dòng)軌跡可能是一種方法。當(dāng)然前端沒有100%的反爬蟲手段，我們能做的只是給爬蟲增加一點(diǎn)難度。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論