這幾天一直在搞某團的一個滑動驗證碼，裡面有些變數的生成方式如果你不看完他的所有程式碼，一步一步除錯的話，是很難找到的，如果你說要看完他的全部的程式碼的話，這成本就太大了，所以，今天就教大家一個技巧，就是 HOOK， hook 可以理解為鉤子，我這裡的話就是捕捉到自己想要的變數的獲取值和設定值的地方。下面開始整體。

hook js 需要用到一個 js 的函式，Object.defineProperty()，這方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性， 並返回這個物件。裡面有三個引數，分別是：

• 要 hook 的物件
• 要 hook 物件的屬性
• 需要重新定義之後的屬性

下面開始舉例子。

我們之前搞過一些網站的 cookie，這些我當時是直接搜尋 cookie 的值來查詢它的生成位置的，但是不是所有的網站都可以直接尋找的，還有就是太浪費時間，這時候就需要我們用到 hook 了，我這裡就簡單貼一個 hook cookie 的程式碼：

(function() {
    'use strict';
​
    Object.defineProperty(document,'cookie',{
        get: function() {
            console.log('Getting cookie');
            return document.cookie;
        },set: function(val) {
            console.log('Setting cookie',val);
            debugger;
            return val
        },});
​
​
})();複製程式碼
 

這裡就直接捕捉了 cookie 的 get 和 set 方法，一般我們只需要捕捉 set 方法即可，把上面的程式碼放在油猴外掛上執行一遍即可，然後再重新整理網站你就會看到這個了：

這個時候看到自己想要的 cookie 的話，就去檢視右邊的呼叫棧就可以了，這樣子找出它的生成位置就很簡單了，剩下的就是自己的分析了。

上面這個方法雖然很方便，但不是萬能的。如果我們想要獲取某一個物件的某一個變數的話，而且這一個物件不是全域性物件，比如 window 或者 document，這樣子就獲取不到了，要不你看這裡：

這裡是想要獲取 _ 物件的 fL 的值的生成方式，如果你直接搜 fL 的話是找不到結果的，因為這些變數名字早就混淆過了，這時候你會想說，不是可以 hook 嗎？是啊，那我們試一試：

程式碼很容易，直接執行 + 重新整理網站，直接給你報錯，更別說會有斷點給你了。

這時候就需要另外一個東西了，需要用到我們的 fiddler，這可不只是一個抓包軟體，我們可以利用這個軟體，讓我們在指定網站上的請求重定向到我們自己指定的檔案，然後再配合我們剛剛學的 hook 技術，這樣子我們想要的變數的生成方式就直接浮出水面了。

這裡先把我們需要重定向的原檔案拷貝下來，然後把我們的 hook 程式碼 加在這個物件的定義的裡面：

又在 fiddler 上重定向：

如果不會的話，自己百度哈，這裡不是這篇文章的重點。

配置完了重新重新整理網站，這時候你想要的結果就來了：

是不是就出來了，這個時候再檢視右邊的呼叫棧的資訊就可以了，是不是非常容易？so easy。

hook 不止可以捕捉變數的值，還可以hook 指定的函式，這裡就暫時不說了，還沒有找到應用的例子，如果日後遇到，會寫出來給大家。

最後

以上就是本篇文章的所有內容了，如果對你有幫助，麻煩點個贊，謝謝啦！另外某團的滑動已經解出來了，由於不可抗力原因，就不公開原始碼了，但是我下週會寫篇文章說說裡面需要注意的點。最後，贊越多，更新越快，你懂得！

END

點贊越多，更新越快​