注入eval，Function等系统函数，截获动态代码
正文
現在很多網站都上了各種前端反爬手段，無論手段如何，最重要的是要把包含反爬手段的前端javascript代碼加密隱藏起來，然后在運行時實時解密動態執行。
動態執行js代碼無非兩種方法，即eval和Function。那么，不管網站加密代碼寫得多牛，我們只要將這兩個方法hook住，即可獲取到解密后的可執行js代碼。
注意，有些網站會檢測eval和Function這兩個方法是否原生，因此需要一些小花招來忽悠過去。
掛鉤代碼
首先是eval的掛鉤代碼:
(function() {if (window.__cr_eval) returnwindow.__cr_eval = window.evalvar myeval = function (src) {console.log("========== eval begin: length=" + src.length + ",caller=" + (myeval.caller && myeval.caller.name) + " ===============")console.log(src);console.log("================== eval end =================")return window.__cr_eval(src)}var _myeval = myeval.bind(null) //注意:這句和下一句就是小花招本招了_myeval.toString = window.__cr_eval.toStringObject.defineProperty(window, 'eval', { value: _myeval })console.log(">>>>>>>>>>>>>> eval injected: " + document.location + " <<<<<<<<<<<<<<<<<<<") })();這段代碼執行后，之后所有的eval操作都會在控制臺打印輸出將要執行的js源碼。
同理可以寫出Function的掛鉤代碼:
(function() {if (window.__cr_fun) returnwindow.__cr_fun = window.Functionvar myfun = function() {var args = Array.prototype.slice.call(arguments, 0, -1).join(","), src = arguments[arguments.length - 1]console.log("==================== Function begin: args=" + args + ", length=" + src.length + ",caller=" + (myfun.caller && myfun.caller.name) + " ===============")console.log(src);console.log("===================== Function end ===============")return window.__cr_fun.apply(this, arguments)}myfun.toString = function() { return window.__cr_fun + "" } //小花招Object.defineProperty(window, 'Function', { value: myfun })console.log(">>>>>>>>>>>>>> Function injected: " + document.location + " <<<<<<<<<<<<<<<<<") })();注意:和eval不同，Function是個有變長參數的構造方法，需要處理this
另外，有些網站還會用類似的機制加密頁面內容，然后通過document.write輸出動態解密的內容，因此同樣可以掛鉤document.write,掛鉤方法類似eval，這里就不重復了。
注入方式
另外，這里有個問題需要關注，就是掛鉤代碼的注入方法。
最簡單的就是F12調出控制臺，直接執行上面的代碼，但這樣只能hook住執行之后的eval調用，如果希望從頁面剛加載時就注入，那么可以用以下幾種方式:
- 油猴注入，油猴可以監聽文檔加載的幾種不同狀態，并在特定時刻執行js代碼。我沒有太多研究，具體請參見油猴手冊
- 代理注入，修改應答數據，在<head>標簽內的第一個位置插入<script>節點，確保在其他js加載執行前注入;Fiddler，anyproxy等都可以編寫外部規則，具體請參見附錄部分
- 使用chrome-devtools-protocol,通過Page.addScriptToEvaluateOnNewDocument注入外部js代碼
附錄
不少人沒用過代碼規則，這里寫一下Fiddler和anyproxy的規則編寫方法:
1.如何添加Fiddler代理規則
? 1.Fiddler菜單里Rules > Customize Rules打開腳本編輯器
? 2.在腳本編輯器里找OnBeforeResponse方法，方法內添加下面C#代碼:
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html")) {oSession.utilDecodeResponse(); //Remove any compression or chunkingvar b = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);var r = /<head[^>]*>/i;var js = "..."; //要注入的js源碼，見正文b = b.replace(r, "$0<script>" + js + "</script>");oSession.utilSetResponseBody(b); //Set the response body back }? 3.這樣就會在所有html文檔頭部自動添加js代碼了
2.如何添加anyproxy代理規則
? 1.編輯一個rule.js保存在anyproxy根目錄下，內容如下:
function injectEval() {if (window.__cr_eval) return... //見正文，此處略console.log(">>>>>>> eval injected: " + document.location + " <<<<<<<<"); } module.exports = {summary: 'a rule to hook all eval',*beforeSendResponse(requestDetail, {response}) {if (response.header["Content-Type"].indexOf("text/html") >= 0) {response.body = (response.body + "").replace(/<head[^>]*>/i, `$&<script>(${injectEval})();</script>`)return {response}}}, };? 2.帶規則啟動anyproxy
? ?anyproxy -r rule.js
? 3.可以看到，使用基于js的工具鏈有其天然優勢，即注入代碼可以以源碼而不是字符串形式和規則代碼共存，這樣可以利用到IDE的語法檢查、自動完成等機制，能夠給大大提高生產力。
?
總結
以上是生活随笔為你收集整理的注入eval，Function等系统函数，截获动态代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何避免Puppeteer被前端JS检测
- 下一篇： nginx动态库加载出现is not b