前言
前端調試是安全測試的重要組成部分。它能夠幫助我們掌握網頁的運行原理，包括js腳本的邏輯、加解密的方法、網絡請求的參數等。利用這些信息，我們就可以更準確地發現網站的漏洞，制定出有效的攻擊策略。前端知識對於安全來說，不但可以提高測試效率，還可以拓寬測試思路。
以下的一個案例是我在測試一個後臺管理系統時遇到的問題，本來在登錄頁面通過js已經發現了接口和字段，但是請求的時候發現不是未授權漏洞，但是字段只有新密碼和用戶名，那麼這個大概率是存在漏洞的。
正文
本次爲授權測試，客戶有提供賬號密碼。在後臺的修改密碼處：
JavaScript分析
當我輸入正確密碼時，又消失，說明存在校驗。要麼後端校驗，要麼前端校驗。通過前面登錄前的js內容，大致可以猜到這個就是前端校驗。
我使用burp進行抓取數據包，發現沒有請求通過：
說明大概率前端校驗（也有可能是抓不到，但是概率很小）接下來就是要分析前端js了。這邊我主要分析的是文本框的"與初始密碼不一致"這個提示信息的判斷邏輯：
我這邊分析主要有兩種方法：
①事件監聽器：
通過事件監聽器去找對應的js事件，通過正向去查看js，跟着對應的函數一層一層進行代碼審計：
但是通過正向找過去，發現是經過多層調用的。且所有代碼經過高度壓縮混淆。
這時候還可以通過其他的按鈕去找，大概率處理邏輯的js都是在一起的。當然只是可能。
【----幫助網安學習，以下所有學習資料免費領！加vx：yj009991，備註 “博客園” 獲取！】
① 網安學習成長路徑思維導圖
② 60+網安經典常用工具包
③ 100+SRC漏洞分析報告
④ 150+網安攻防實戰技術電子書
⑤ 最權威CISSP 認證考試指南+題庫
⑥ 超1800頁CTF實戰技巧手冊
⑦ 最新網安大廠面試題合集（含答案）
⑧ APP客戶端安全檢測指南（安卓+IOS）
找到提交按鈕。
點擊是會報錯的。查看下這個提交的邏輯：
找到submit，去查看調用的js代碼：
很不幸，還是這個混淆過的看不懂的js。按住ctrl還進不去函數，不知道爲什麼。GG。
②直接搜對應的關鍵字，去js裏面翻
這個方法應該是大家比較常用的方法了。直接搜索關鍵字，比如加解密就直接搜索encrypt，一般都有效。
比如這邊，可以直接搜索報錯信息：與初始密碼不一致：
找過去都是0。這時候就應該考慮，他是否有可能保存在css裏面，或者使用urlencode或者Unicode編碼。
（PS：因爲沒有對於後端請求，我們就不做從後端響應的情況假設。不然正常的字符串在前端找不到的情況下，有可能是後端返回的。）
先把這些字符轉爲Unicode編碼查看。作爲字符去查詢的時候，建議不要全部字符去查詢，因爲有時候他可能會把對應的字符串分開放，或者做拼接。使用可以直接搜索比如不容易重複的幾個關鍵字。比如這邊的"一致"。
對於搜索，可以把js和html頁面都代理從burp出去，然後使用burp自帶的搜索，可能會比較方便。我這邊就是採用這種方法進行查詢：
很幸運，找到了！
+-----------------------------------------------------------------------+| function At(n, o) { || || 1 & n && (t.TgZ(0, "mat-hint"), || || t._uU(1, || "\u4e0e\u521d\u59cb\u5bc6\u7801\u4e0d\u4e00\u81f4"), || || t.qZA()) || || } || || function bt(n, o) { || || 1 & n && (t.TgZ(0, "mat-hint"), || || t._uU(1, || "\u4e0e\u8bbe\u7f6e\u7684\u5bc6\u7801\u4e0d\u4e00\u81f4"), || || t.qZA()) || || } |+=======================================================================++-----------------------------------------------------------------------+
可以看到js高度混淆。
對於審計很難。這邊我們只需要查看是誰調用了這個函數，網上找這個邏輯即可。
有幾種方法可以找到，這邊借用new bing的回答：
您好，這是Bing。
根據我的搜索結果，有幾種方法可以在Chrome中實現這個功能。我將爲您介紹其中的一些方法：
1、使用Chrome開發者工具的搜索功能¹。您可以按下`ctrl + shift +F`（Windows）或`cmd + optn +F`（macOS）打開一個跨所有腳本的搜索窗口。然後，您可以勾選"正則表達式"複選框，並搜索函數的名稱和定義方式。例如，如果您想要查找名爲`foo`的函數，您可以搜索`foo\s*=\s*function`（表示`foo=function`之間有任意數量的空格）或者`function\s*foo\s*\(`（表示`functionfoo(`之間有任意數量的空格）。搜索結果將顯示函數定義所在的腳本和位置，您可以點擊它們跳轉到相應的代碼行。
2、使用Chrome開發者工具的調用棧功能。如果您想要查找一個函數是從哪裏被調用的，您可以在函數體內部添加一個斷點，然後運行代碼。當代碼執行到斷點處時，開發者工具會暫停，並顯示當前的調用棧。您可以在調用棧面板中查看函數被調用的順序和位置，以及每個函數的參數和局部變量。
3、使用JavaScript代碼獲取函數的調用者³。如果您想要在代碼中獲取一個函數是從哪裏被調用的，您可以使用`arguments.callee.caller`屬性來訪問當前函數的調用者。這個屬性會返回一個函數對象，您可以使用它的`name`屬性來獲取函數的名稱，或者使用它的`toString()`方法來獲取函數的源代碼。如果當前函數是從全局作用域被調用的，那麼這個屬性會返回`null`，您可以使用條件判斷來處理這種情況。
我這邊採用了第二點，可以在這邊看到棧的調用。
成功找到密碼判斷點：
接下來就可以看你想改什麼就改什麼了。
JavaScript本地修改調試
找到對應函數後，接下來就是修改js裏面的內容了。如果想修改js，在前端調試，需要在替換裏面添加一個文件夾，然後在js編輯界面保存即可。保存成功會有紫色的小點點：
在js裏面添加一個console.log，測試調試。觸發該函數後，成功打印：
後續如果想通過前端繞過，可以同樣去調試提交按鈕。
結尾
可能有些人會說，這麼麻煩去繞過做什麼？本文只是講解一些調試思路，和本次的漏洞沒有太大關係，只是作爲案例講解。我本身不是做前端出身，主做分享使用。很多方面的知識我也是自己有接觸到纔去學習，可能對於一些大佬來說，這些都是很基礎，勿噴。給自己挖個坑，如果本文反響不錯的話，後續給大家分享一些遇到js前端加解密的web站點，該怎麼去進行調試和測試。
更多網安技能的在線實操練習，請點擊這裏>>