之前看過一篇腦洞大開的文章,介紹了各個大廠的前端反爬蟲技巧,但也正如此文所說,沒有100%的反爬蟲方法,本文介紹一種簡單的方法,來繞過所有這些前端反爬蟲手段。
下面的代碼以百度指數(shù)為例,代碼已經(jīng)封裝成一個百度指數(shù)爬蟲node庫: https://github.com/Coffcer/baidu-index-spider
note: 請勿濫用爬蟲給他人添麻煩
百度指數(shù)的反爬蟲策略
觀察百度指數(shù)的界面,指數(shù)數(shù)據(jù)是一個趨勢圖,當(dāng)鼠標(biāo)懸浮在某一天的時候,會觸發(fā)兩個請求,將結(jié)果顯示在懸浮框里
可以發(fā)現(xiàn),百度指數(shù)實(shí)際上在前端做了一定的反爬蟲策略。當(dāng)鼠標(biāo)移動到圖表上時,會觸發(fā)兩個請求,一個請求返回一段html,一個請求返回一張生成的圖片。html中并不包含實(shí)際數(shù)值,而是通過設(shè)置width和margin-left,來顯示圖片上的對應(yīng)字符。并且請求參數(shù)上帶有res、res1這種我們不知如何模擬的參數(shù),所以用常規(guī)的模擬請求或者h(yuǎn)tml爬取的方式,都很難爬到百度指數(shù)的數(shù)據(jù)。
爬蟲思路
怎么突破百度這種反爬蟲方法呢,其實(shí)也很簡單,就是完全不去管他是如何反爬蟲的。我們只需模擬用戶操作,將需要的數(shù)值截圖下來,做圖像識別就行。步驟大概是:
模擬登錄
打開指數(shù)頁面
鼠標(biāo)移動到指定日期
等待請求結(jié)束,截取數(shù)值部分的圖片
圖像識別得到值
循環(huán)第3~5步,就得到每一個日期對應(yīng)的值
這種方法理論上能爬任何網(wǎng)站的內(nèi)容,接下來我們來一步步實(shí)現(xiàn)爬蟲,下面會用到的庫:
puppeteer 模擬瀏覽器操作
node-tesseract tesseract的封裝,用來做圖像識別
jimp 圖片裁剪
安裝Puppeteer, 模擬用戶操作
Puppeteer是Google Chrome團(tuán)隊(duì)出品的Chrome自動化工具,用來控制Chrome執(zhí)行命令??梢阅M用戶操作,做自動化測試、爬蟲等。用法非常簡單,網(wǎng)上有不少入門教程,順著本文看完也大概可以知道如何使用。
API文檔: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
安裝:
npm install --save puppeteer
Puppeteer在安裝時會自動下載Chromium,以確??梢哉_\(yùn)行。但是國內(nèi)網(wǎng)絡(luò)不一定能成功下載Chromium,如果下載失敗,可以使用cnpm來安裝,或者將下載地址改成淘寶的鏡像,然后再安裝:
npm config set PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors npm install --save puppeteer
你也可以在安裝時跳過Chromium下載,通過代碼指定本機(jī)Chrome路徑來運(yùn)行:
// npm npm install --save puppeteer --ignore-scripts // node puppeteer.launch({ executablePath: '/path/to/Chrome' });
實(shí)現(xiàn)
為版面整潔,下面只列出了主要部分,代碼涉及到selector的部分都用了...代替,完整代碼參看文章頂部的github倉庫。
打開百度指數(shù)頁面,模擬登錄
這里做的就是模擬用戶操作,一步步點(diǎn)擊和輸入。沒有處理登錄驗(yàn)證碼的情況,處理驗(yàn)證碼又是另一個話題了,如果你在本機(jī)登錄過百度,一般不需要驗(yàn)證碼。
// 啟動瀏覽器, // headless參數(shù)如果設(shè)置為true,Puppeteer將在后臺操作你Chromium,換言之你將看不到瀏覽器的操作過程 // 設(shè)為false則相反,會在你電腦上打開瀏覽器,顯示瀏覽器每一操作。 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('...'); // 輸入百度賬號密碼然后登錄 await page.type('...','username'); await page.type('...','password'); await page.click('...'); await page.waitForNavigation(); console.log(':white_check_mark: 登錄成功');
模擬移動鼠標(biāo),獲取需要的數(shù)據(jù)
需要將頁面滾動到趨勢圖的區(qū)域,然后移動鼠標(biāo)到某個日期上,等待請求結(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(); // 滾動到圖表可視化區(qū)域 window.scrollBy(0, areaRect.top); return { x: imageRect.x, y: 200 }; }); // 移動鼠標(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 } });
截圖
計算數(shù)值的坐標(biāo),截圖并用jimp對裁剪圖片。
await page.screenshot({ path: imgPath }); // 對圖片進(jìn)行裁剪,只保留數(shù)字部分 const img = await jimp.read(imgPath); await img.crop(tooltipInfo.x, tooltipInfo.y, tooltipInfo.width, tooltipInfo.height); // 將圖片放大一些,識別準(zhǔn)確率會有提升 await img.scale(5); await img.write(imgPath);
圖像識別
這里我們用Tesseract來做圖像識別,Tesseracts是Google開源的一款OCR工具,用來識別圖片中的文字,并且可以通過訓(xùn)練提高準(zhǔn)確率。github上已經(jīng)有一個簡單的node封裝: node-tesseract ,需要你先安裝Tesseract并設(shè)置到環(huán)境變量。
Tesseract.process(imgPath, (err, val) => { if (err || val == null) { console.error(':x: 識別失敗:' + imgPath); return; } console.log(val);
實(shí)際上未經(jīng)訓(xùn)練的Tesseracts識別起來會有少數(shù)幾個錯誤,比如把9開頭的數(shù)字識別成`3,這里需要通過訓(xùn)練去提升Tesseracts的準(zhǔn)確率,如果識別過程出現(xiàn)的問題都是一樣的,也可以簡單通過正則去修復(fù)這些問題。
封裝
實(shí)現(xiàn)了以上幾點(diǎn)后,只需組合起來就可以封裝成一個百度指數(shù)爬蟲node庫。當(dāng)然還有許多優(yōu)化的方法,比如批量爬取,指定天數(shù)爬取等,只要在這個基礎(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); // 讀取抓取到的截圖,做圖像識別 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; } }
反爬蟲
最后,如何抵擋這種爬蟲呢,個人認(rèn)為通過判斷鼠標(biāo)移動軌跡可能是一種方法。當(dāng)然前端沒有100%的反爬蟲手段,我們能做的只是給爬蟲增加一點(diǎn)難度。
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!
推薦閱讀:
easyui日期時間框在IE中的兼容性如何處理
vue判斷input輸入內(nèi)容有否有空格
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com