爬蟲系列(二) Chrome抓包分析

時間 2019-11-18

標籤爬蟲系列 chrome 抓包分析欄目網絡爬蟲简体版

原文原文鏈接

在這篇文章中，咱們將嘗試使用直觀的網頁分析工具（Chrome 開發者工具）對網頁進行抓包分析，更加深刻的瞭解網絡爬蟲的本質與內涵javascript

一、測試環境

瀏覽器：Chrome 瀏覽器php

瀏覽器版本：67.0.3396.99 (正式版本) (32 位)html

網頁分析工具：開發者工具java

二、網頁分析

（1）網頁源代碼分析

咱們知道，網頁有靜態網頁和動態網頁之分，不少人會誤認爲靜態網頁就是沒有動態效果的網頁，其實這種說法是不對的chrome

靜態網頁 是指沒有後臺數據庫的不可交互網頁，常以 .htm、.html、.xml 爲後綴數據庫
動態網頁 是指能與後臺數據庫進行數據傳遞的可交互網頁，常以 .aspx、 .asp、.jsp、 .php 爲後綴瀏覽器

另外，目前不少動態網站都採起了 異步加載技術 (Ajax)，這就是不少時候抓取到的源代碼和網站顯示的源代碼不一致的緣由，至於如何爬取動態網頁，這裏提供兩種方法：網絡

一是下面即將講到的經過抓包分析 Ajax 請求異步
二是利用 Selenium 等工具進行動態渲染，這個能夠參考個人另外一篇文章 —— selenium的基本使用jsp

下面咱們以京東商品爲例，分析如何經過 Chrome 進行抓包，咱們首先打開某個商品的首頁

https://item.jd.com/10072615543.html

來到網頁空白處單擊鼠標右鍵，選擇 查看網頁源代碼（或者使用快捷鍵 Ctrl+U 直接打開）

請注意，查看網頁源代碼 獲得的是網站最原始的源代碼，也就是一般咱們抓取到的源代碼

再次來到網頁空白處單擊鼠標右鍵，選擇 檢查（或者使用快捷鍵 Ctrl+Shift+I / F12直接打開）

請注意，檢查獲得的是是通過 Ajax 加載和 JavaScript 渲染的源代碼，也就是當前網站顯示內容的源代碼

通過對比以後，咱們能夠發現二者的內容是不同的，這就是 異步加載技術 (Ajax) 的典型例子

就目前來講至少京東商品的價格是經過異步加載生成的，這裏提供三種方法判斷網頁中某個內容是否爲動態生成：

一是分析查看網頁源代碼生成的源代碼，能夠在其中尋找動態請求的典型語句，也能夠將其與檢查生成的源代碼進行比較
二是經過如下將要講解的網頁抓包分析來判斷，這種方法最爲經常使用，應當好好掌握
三是一種取巧的方法，就是禁用 Chrome 瀏覽器的 JavaScript 加載

具體能夠在 Chrome 的地址欄中輸入 chrome://settings/content/javascript 來到 JavaScript 的設置頁面

而後將 JavaScript 的選項關閉，這時候從新刷新網頁，就會看到原來顯示價格的地方出現了空白

這就代表原來的價格是經過 JavaScript 動態生成的

（2）網頁抓包分析

咱們仍是以京東商品爲例進行講解，打開某個商品的首頁，嘗試抓取動態加載的商品價格數據

https://item.jd.com/10072615543.html

使用快捷鍵 Ctrl+Shift+I 或 F12打開開發者工具，而後選擇 Network 選項卡 進行抓包分析

此時按下快捷鍵 F5 刷新頁面，能夠看到開發者工具中出現了各類各樣的包，咱們使用 Filter 對包進行過濾

首先，咱們選中 Doc，能夠看到列表中只出現了一個包

通常來講，這個就是瀏覽器接收到的第一個包，用於獲取請求網站的原始源代碼

點擊 Header 能夠看到它的頭部參數設置

點擊 Response 能夠看到返回的源代碼，容易發現，它其實和 查看網頁源代碼 返回的信息是一致的

下面讓咱們從新回到正題，對於動態加載的抓包分析，主要看 XHR 和 JS 選項卡便可

選中 JS 進行過濾，發現列表中出現了好多包，通過分析，咱們篩選出下圖中加標記的包

這個包返回的是關於價格的信息，但是通過仔細分析發現，這些價格並非屬於當前商品的，而是屬於相關商品的

可是怎麼說這個包仍是和價格相關的，咱們仍是先看看這個包的請求 URL 吧

https://p.3.cn/prices/mgets?callback=jQuery1609108&type=1&area=1_72_2799_0&pdtk=&pduid=1539779074977382417990&pdpin=&pin=null&pdbp=0&skuIds=J_25630711066%2CJ_26395831446%2CJ_20823451030%2CJ_11332156897%2CJ_14020547214%2CJ_26498549638&ext=11100000&source=item-pc

對包括 callback 等沒必要要的參數進行篩選，能夠獲得簡單而有效的 URL

https://p.3.cn/prices/mgets?skuIds=J_25630711066%2CJ_26395831446%2CJ_20823451030%2CJ_11332156897%2CJ_14020547214%2CJ_26498549638

直接用瀏覽器打開該 URL，能夠看到返回的的確是包含價格信息的 JSON 數據（只惋惜是其餘商品的價格）

分析該 URL 的參數，能夠推測 skuId 應該就是每個商品獨一無二的標誌了，那麼咱們所須要的商品的 skuId 究竟能夠在哪裏找到呢？

事實上，SKU 是一個在物流、運輸等產業中經常使用的縮寫，其全稱是 Stock Keeping Unit（庫存量單位），即庫存進出計量的基本單元，如今已經被引伸爲產品統一編號的簡稱，每種產品均對應有惟一的 SKU

回顧咱們剛開始進入的商品首頁，https://item.jd.com/10072615543.html

這其中不是就隱藏着當前商品的惟一號碼標識（10072615543）了嗎？不妨一試！

果真，訪問商品價格的完整 URL 咱們就能夠獲得了，https://p.3.cn/prices/mgets?skuIds=10072615543

經過直接訪問該網址咱們就能夠獲得當前商品的價格信息

事實上，咱們還能夠對該 URL 進行適當的泛化以適應京東全部商品的價格爬取

很簡單，只須要將 skuIds 做爲參數獨立分離出來便可，https://p.3.cn/prices/mgets?skuIds={ID}

經過泛化後的 URL ，理論上只要能獲得商品的 skuId，咱們就能夠訪問對應商品的價格

【爬蟲系列相關文章】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。