網(wǎng)頁數(shù)據(jù)如何獲取，帶你走近JS逆向，完全入門級！

這個大數(shù)據(jù)時代，我們眼睛所看到的百分之九十的數(shù)據(jù)都是通過頁面呈現(xiàn)出現(xiàn)的，不論是PC端、網(wǎng)頁端還是移動端，數(shù)據(jù)渲染還是基于html/h5+javascript進(jìn)行的，而大多數(shù)的數(shù)據(jù)都是通過請求后臺接口動態(tài)渲染的。而想成功的請求成功互聯(lián)網(wǎng)上的開放/公開接口，必須知道它的URL、Headers、Params、Body等數(shù)據(jù)是如何生成的。但是在此之前我們需要了解瀏覽器開發(fā)者工具的功能，入門JS逆向。

1、瀏覽器面板認(rèn)識

瀏覽器F12開發(fā)者工具面板

Elements（元素）

HTML源代碼頁面，可以進(jìn)行動態(tài)查詢、修改、刪除，影響頁面顯示

Network（網(wǎng)絡(luò)）

最常使用的功能，俗稱抓包界面。可以捕獲當(dāng)前頁面的所有資源請求，包括URL、協(xié)議、端口、請求和響應(yīng)等

保留日志：勾選每次刷新不會清除之前的請求
停用緩存：勾選后不會從緩存里面拉數(shù)據(jù)，方便后續(xù)JS動態(tài)調(diào)試

Sources（源代碼）

存放網(wǎng)頁源代碼的地方，這里可以看到訪問站點(diǎn)所有依賴的域名資源，包括html、css、js等

page ：所有資源文件
filesystem：關(guān)聯(lián)本地文件
overrides：可以做文件替換，比如替換JS
代碼段：可以編寫腳本，影響頁面,代碼記錄
斷點(diǎn)介紹

斷點(diǎn)

1. 跳過子函數(shù)（次態(tài)函數(shù)）執(zhí)行（只在主函數(shù)內(nèi)一步一步執(zhí)行，不進(jìn)入子函數(shù)內(nèi)部）；
2. 進(jìn)入子函數(shù)（次態(tài)函數(shù)）執(zhí)行（在主函數(shù)內(nèi)部一步一步執(zhí)行，如果遇到子函數(shù)，會跳轉(zhuǎn)到子函數(shù)內(nèi)部一步一步執(zhí)行）；
3. 跳出當(dāng)前函數(shù)，回到調(diào)用位置；
4. 單步執(zhí)行，會進(jìn)入到函數(shù)內(nèi)部更加的細(xì)致；
最后一個圖標(biāo)：屏蔽斷點(diǎn)

Application（應(yīng)用）

相當(dāng)于一個瀏覽器本地?cái)?shù)據(jù)庫，可查看本地會話存儲、Cookies等信息

2、JS逆向的目標(biāo)

如果想要逆向網(wǎng)頁的某個API，需要以下關(guān)鍵信息：

請求信息

頭部簽名
請求體簽名
cookie反爬
響應(yīng)數(shù)據(jù)反爬
查詢參數(shù)簽名

3、斷點(diǎn)介紹

斷點(diǎn)的主要作用是對數(shù)據(jù)進(jìn)行監(jiān)聽，就跟平時開發(fā)代碼Debug調(diào)試一樣，跟值進(jìn)行分析

網(wǎng)站運(yùn)行時間軸：

數(shù)據(jù)流程

DOM事件斷點(diǎn)

執(zhí)行的比較靠前距離加密函數(shù)比較遠(yuǎn)

XHR斷點(diǎn)

執(zhí)行比較靠后距離加密函數(shù)相對較近，可以根據(jù)棧快速定位

注意：非XHR發(fā)送的就斷不住

4、方法棧

棧是一種先進(jìn)后出的特殊線性表結(jié)構(gòu)

調(diào)用棧是解析器的一種機(jī)制，可以在腳本調(diào)用多個函數(shù)時，跟蹤每個函數(shù)在完成執(zhí)行時應(yīng)該返回控制的點(diǎn)

當(dāng)腳本要調(diào)用一個函數(shù)時，解析器把該函數(shù)添加到棧中并且執(zhí)行這個函數(shù)。
任何被這個函數(shù)調(diào)用的函數(shù)會進(jìn)一步添加到調(diào)用棧中，并且運(yùn)行到它們被上個程序調(diào)用的位置。
當(dāng)函數(shù)運(yùn)行結(jié)束后，解釋器將它從堆棧中取出，并在主代碼列表中繼續(xù)執(zhí)行代碼。

棧

5、debug原理

無限debbugger不會真正得死循環(huán)，而是有規(guī)律得執(zhí)行邏輯，一般用定時器

Function("debugger;").call()

樣例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<h1 id="IMS"></h1>

<body>

<script>
    var ss=document.getElementById('IMS')
    function test() {
        debugger;
    }
    setInterval(test,100);

    ss.innerHTML="HELLO WORLD";

</script>
</body>
</html>

瀏覽器過debugger

當(dāng)定義器運(yùn)行到這個debugger這個代碼的時候，可以點(diǎn)擊“一律不再此處暫停”

Debugger斷點(diǎn)處理

編輯斷點(diǎn)（條件斷點(diǎn)）

寫個1===0的先驗(yàn)條件，永遠(yuǎn)為假，就永遠(yuǎn)不會進(jìn)入這個斷點(diǎn)了。

方法置空

無限debugger產(chǎn)生的原因是代碼里 test 這個函數(shù)造成的,所以我們可以重寫這個函數(shù),使無限debugger失效.在控制臺中輸入function test(){}即可

注：一定要在debugger進(jìn)入之前

setInterval=function test(){}

通用過OB混淆debugger

Function.prototype.__constructor_back=Function.prototype.constructor;
Function.prototype.constructor=function() {
    if(arguments && typeof arguments[0]==='string'){
        if("debugger"===arguments[0]){
            return
        }
    }
   return Function.prototype.__constructor_back.apply(this,arguments);
}

6、hook技術(shù)

Hook 是一種鉤子技術(shù)，在系統(tǒng)沒有調(diào)用函數(shù)之前，鉤子程序就先得到控制權(quán)，這時鉤子函數(shù)既可以加工處理（改變）該函數(shù)的執(zhí)行行為，也可以強(qiáng)制結(jié)束消息的傳遞。簡單來說，修改原有的 JS 代碼就是 Hook。

Hook 技術(shù)之所以能夠?qū)崿F(xiàn)有兩個條件：

客戶端擁有 JS 的最高解釋權(quán)，可以決定在任何時候注入 JS，而服務(wù)器無法阻止或干預(yù)。服務(wù)端只能通過檢測和混淆的手段，另 Hook 難度加大，但是無法直接阻止。
除了上面的必要條件之外，還有一個條件。就是 JS 是一種弱類型語言，同一個變量可以多次定義、根據(jù)需要進(jìn)行不同的賦值，而這種情況如果在其他強(qiáng)類型語言中則可能會報(bào)錯，導(dǎo)致代碼無法執(zhí)行。js 的這種特性，為我們 Hook 代碼提供了便利。

注意：JS 變量是有作用域的，只有當(dāng)被 hook 函數(shù)和 debugger 斷點(diǎn)在同一個作用域的時候，才能 hook 成功。

Hook步驟：

尋找hook的點(diǎn)
編寫hook邏輯
調(diào)試

注：最常用的是hook cookie

HOOK cookie操作

WebAPI地址：https://developer.mozilla.org/zh-CN/docs/Web/API

Object.defineProperty為對象的屬性賦值，替換對象屬性

基本語法：Object.defineProperty(obj, prop, descriptor)，它的作用就是直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，接收的三個參數(shù)含義如下：

obj：需要定義屬性的當(dāng)前對象；
prop：當(dāng)前需要定義的屬性名；

Object.defineProperty(user,"uuid",{
 get:function(){
      console.log("xxx來獲取值了！！");
      return count;
 },

 set:function(newVal){
      console.log("xxx來設(shè)置值了！！");
      count=newVal+1;
 }
})

cookie 示例

cookie 鉤子用于定位 cookie 中關(guān)鍵參數(shù)生成位置，以下代碼演示了當(dāng) cookie 中匹配到了 v，則插入斷點(diǎn)：

(function () {
  var cookieTemp='';
  Object.defineProperty(document, 'cookie', {
    set: function (val) {
      if (val.indexOf('v') !=-1) {
        debugger;
      }
      console.log('Hook捕獲到cookie設(shè)置->', val);
      cookieTemp=val;
      return val;
    },
    get: function () {
      return cookieTemp;
    },
  });
})();

注：正常hook cookie操作的時候需要清除下cookie

hook 方法

我們知道在 JavaScript 中 JSON.stringify() 方法用于將 JavaScript 對象或值轉(zhuǎn)換為 JSON 字符串，JSON.parse() 方法用于將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象，某些站點(diǎn)在向 web 服務(wù)器傳輸用戶名密碼時，會用到這兩個方法

(function() {
        var stringify=JSON.stringify;
        JSON.stringify=function(params) {
            console.log("Hook JSON.stringify ——> ", params);
            debugger;

            return stringify(params);
        }
    })();

首先定義了一個變量 stringify 保留原始 JSON.stringify 方法，然后重寫 JSON.stringify 方法，遇到 JSON.stringify 方法就會執(zhí)行 debugger 語句，會立即斷下，最后將接收到的參數(shù)返回給原始的 JSON.stringify 方法進(jìn)行處理，確保數(shù)據(jù)正常傳輸

hook XHR請求

(function () {
    var open=window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open=function (method, url, async) {
        if (url.indexOf("analysis") !=1) {
            debugger;
        }
        return open.apply(this, arguments);
    };
})();

定義了一個變量 open 保留原始 XMLHttpRequest.open 方法，然后重寫 XMLHttpRequest.open 方法，判斷如果 rnd 字符串值在 URL 里首次出現(xiàn)的位置不為 -1，即 URL 里包含 analysis字符串，則執(zhí)行 debugger 語句，會立即斷下。

7、python執(zhí)行JS的方式

PyExecJS

模塊地址：https://github.com/doloopwhile/PyExecJS

PyExecJS 是使用最多的一種方式，底層實(shí)現(xiàn)方式是：在本地 JS 環(huán)境下運(yùn)行 JS 代碼

pip install PyExecJS

讀取JS代碼

with open(file_name, 'r', encoding='UTF-8') as file:
    result=file.read()

execjs 類的compile()方法編譯加載上面的 JS 字符串，返回一個上下文對象

context1=execjs.compile("JS代碼")

調(diào)用上下文對象的call() 方法執(zhí)行 JS 方法

result1=context1.call("函數(shù)", "參數(shù)1", "參數(shù)2")

注意：由于 PyExecJS 運(yùn)行在本地 JS 環(huán)境下，使用之前會啟動 JS 環(huán)境，最終導(dǎo)致運(yùn)行速度會偏慢

eval執(zhí)行

eval() 函數(shù)計(jì)算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行

print(execjs.eval('Date.now()'))

8、瀏覽器環(huán)境補(bǔ)充方法

document={
    cookie:'uuid_tt_dd=10_29360271920-1658044222535-945484; __gads=ID=5b925b796ab29466-22740a5938d50041:T=1658044224:RT=1658044224:S=ALNI_MYZZ3qnATdjgh4YHRlZaBk3TnwTFw; p_uid=U010000',
    location : {
        href:'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=87135040_oem_dg&wd=eval%20JS%20&fenlei=256&oq=eval&rsv_pq=e1b3f2520003297e&rsv_t=7e58%2ByqRgVEysyNAVRctyGmKUct9An%2B6da7wzdVJDXgo7qaAS1DKyn86mLazGA1IqBPpY359&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_btype=t&inputT=860&rsv_sug3=56&rsv_sug1=35&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1037'
    }
}
navigator={userAgent:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'}

window={
    document : document,
    navigator:navigator
}
console.log(document.location.href);
document.getElementsByTagName=function(){};

結(jié)語

用陽光樂觀的心態(tài)去面對生活和工作，它們一樣也會回報(bào)給你陽光。

習(xí)Python的人絕大部分都是在用Python做爬蟲，畢竟對于爬蟲而言Python是不二選。

但是一般簡單的靜態(tài)頁面網(wǎng)站還是很好爬取的，對于很多動態(tài)加載的網(wǎng)站就不知道怎么辦了，今天小編就給大家介紹兩種爬取js加載的動態(tài)數(shù)據(jù)，希望對爬蟲方面有所幫助！

今天咱們就以高考查詢網(wǎng)站為例！

如何知道這個網(wǎng)站是動態(tài)加載的數(shù)據(jù)？

用瀏覽器，這里小編建議使用火狐或者谷歌這個想必大家都知道的

打開你網(wǎng)頁，右鍵查看頁面源代碼，ctrl +F 查詢輸入293，源代碼里面并沒有這個值，說明是動態(tài)加載數(shù)據(jù)。

它的網(wǎng)址是：數(shù)字代表的第幾頁。它一共是165頁

所以想要獲取全部的url地址就非常簡單了

對于動態(tài)加載數(shù)據(jù)，我們常用的兩個方法：

使用selenium
分析網(wǎng)頁元素，找出該數(shù)據(jù)的原始網(wǎng)頁，提交表單，獲取不同的數(shù)據(jù)，用來達(dá)到爬取的目的。

方法一selenium：

為什么要這么寫，代碼里面表明了注釋！

小結(jié)：

通過對數(shù)據(jù)的分析，寫出上面的查找方法，即可獲取所有數(shù)據(jù)。
通過這種方法獲取數(shù)據(jù)，簡單，也比較直觀，缺點(diǎn)是太慢了。

方法二分析網(wǎng)頁元素，找出該數(shù)據(jù)的原始網(wǎng)頁，提交表單，獲取不同的數(shù)據(jù)，用來達(dá)到爬取的目的。：

既然要分析網(wǎng)頁元素，首先我們肯定是要用到了開發(fā)者工具，按F12就可以打開瀏覽器自帶的開發(fā)者工具。如下圖

分析得知類型為json的那一欄即是我們需要的數(shù)據(jù)

查看消息頭里面的請求網(wǎng)站：

https://data-gkcx.eol.cn/soudaxue/queryProvince.html?messtype=jsonp&callback=jQuery183005011523805365803_1512185796058&luqutype3=&province3=&year3=&luqupici3=&page=2&size=10&_=1512185798203

真正的請求網(wǎng)站：

https://data-gkcx.eol.cn/soudaxue/queryProvince.html

參數(shù) ：

messtype=jsonp&callback=jQuery183005011523805365803_1512185796058&luqutype3=&province3=&year3=&luqupici3=&page=2&size=10&_=1512185798203

也可以點(diǎn)擊右側(cè)的參數(shù)欄參看參數(shù)

詳情代碼

方法很簡單，主要還是自己動手去實(shí)踐，實(shí)踐才能出真知，在岸上學(xué)游泳是永遠(yuǎn)也學(xué)不會的。就這么簡單的兩種方法就可以爬取JS加載的動態(tài)數(shù)據(jù)了，方法都挺簡單的，你學(xué)會了么？趕緊去試試吧！

avaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

JavaScript 顯示數(shù)據(jù)

JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：

使用 window.alert() 彈出警告框。

使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。

使用 innerHTML 寫入到 HTML 元素。

使用 console.log() 寫入到瀏覽器的控制臺。

使用 window.alert()

你可以彈出警告框來顯示數(shù)據(jù)：

實(shí)例

nbsp;html>

我的第一個頁面

我的第一個段落。

操作 HTML 元素

如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。

請使用 “id” 屬性來標(biāo)識 HTML 元素，并 innerHTML 來獲取或插入元素內(nèi)容：

實(shí)例

nbsp;html>

我的第一個 Web 頁面

"demo">我的第一個段落

以上 JavaScript 語句（在標(biāo)簽中）可以在 web 瀏覽器中執(zhí)行：

document.getElementById(“demo”) 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼。

innerHTML=“段落已修改。” 是用于修改元素的 HTML 內(nèi)容(innerHTML)的JavaScript 代碼。

在本教程中

在大多數(shù)情況下，在本教程中，我們將使用上面描述的方法來輸出：

上面的例子直接把 id=”demo” 的

元素寫到 HTML 文檔輸出中：

寫到 HTML 文檔

出于測試目的，您可以將JavaScript直接寫在HTML 文檔中：

實(shí)例

nbsp;html>

我的第一個 Web 頁面

我的第一個段落。

Fri Apr 22 2022 16:20:12 GMT+0800 (中國標(biāo)準(zhǔn)時間)

請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。

如果在文檔已完成加載后執(zhí)行 document.write，整個 HTML 頁面將被覆蓋。

實(shí)例

nbsp;html>

我的第一個 Web 頁面

我的第一個段落。

"MYFUNCTION()">點(diǎn)我

寫到控制臺

如果您的瀏覽器支持調(diào)試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。

瀏覽器中使用 F12 來啟用調(diào)試模式，在調(diào)試窗口中點(diǎn)擊 “Console” 菜單。

nbsp;html>

我的第一個 Web 頁面

實(shí)例 console 截圖：

您知道嗎?

程序中調(diào)試是測試，查找及減少bug(錯誤)的過程。

在線咨詢

上一篇：產(chǎn)品評測-對摹客RP交互設(shè)計(jì)的體驗(yàn)與建議
下一篇：復(fù)合事件處理CEP簡介

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁數(shù)據(jù)如何獲取，帶你走近JS逆向，完全入門級！

1、瀏覽器面板認(rèn)識

Elements（元素）

Network（網(wǎng)絡(luò)）

Sources（源代碼）

Application（應(yīng)用）

2、JS逆向的目標(biāo)

3、斷點(diǎn)介紹

DOM事件斷點(diǎn)

XHR斷點(diǎn)

4、方法棧

5、debug原理

樣例

瀏覽器過debugger

編輯斷點(diǎn)（條件斷點(diǎn)）

方法置空

通用過OB混淆debugger

6、hook技術(shù)

Hook步驟：

HOOK cookie操作

hook 方法

hook XHR請求

7、python執(zhí)行JS的方式

PyExecJS

8、瀏覽器環(huán)境補(bǔ)充方法

結(jié)語

今天咱們就以高考查詢網(wǎng)站為例！

方法一selenium：

小結(jié)：

方法二分析網(wǎng)頁元素，找出該數(shù)據(jù)的原始網(wǎng)頁，提交表單，獲取不同的數(shù)據(jù)，用來達(dá)到爬取的目的。：

詳情代碼

您的項(xiàng)目需求