1. 項(xiàng)目概述為什么登錄頁(yè)面是滲透測(cè)試的“黃金入口”干了這么多年滲透測(cè)試我越來(lái)越覺得登錄頁(yè)面就像一棟大樓的正門。表面上看起來(lái)光鮮亮麗有保安驗(yàn)證碼、有門禁密碼但往往也是安全設(shè)計(jì)最容易被忽視、攻擊面最集中的地方。很多甲方在安全建設(shè)上投入不少搞WAF、上態(tài)勢(shì)感知但登錄頁(yè)面的安全邏輯尤其是前端JavaScriptJS源碼里藏著的那些“貓膩”卻常常被開發(fā)和安全團(tuán)隊(duì)忽略。這次我們就來(lái)一次深度實(shí)戰(zhàn)把登錄頁(yè)面從用戶點(diǎn)擊到后端驗(yàn)證的整個(gè)鏈條掰開揉碎了看重點(diǎn)就是那些藏在JS源碼里的攻擊面。你可能覺得登錄不就一個(gè)表單提交嗎用戶名、密碼、點(diǎn)登錄后端一查對(duì)就過(guò)錯(cuò)就拒。但現(xiàn)實(shí)遠(yuǎn)比這復(fù)雜?，F(xiàn)代Web應(yīng)用特別是前后端分離的架構(gòu)比如用Vue.js、React寫的單頁(yè)應(yīng)用大量的業(yè)務(wù)邏輯、數(shù)據(jù)校驗(yàn)、甚至部分認(rèn)證邏輯都被放在了前端。這固然提升了用戶體驗(yàn)但也把攻擊面大大前移了。攻擊者根本不需要一開始就去碰堅(jiān)固的后端API在前端JS代碼里就可能找到繞過(guò)認(rèn)證、竊取憑證、進(jìn)行邏輯漏洞攻擊的鑰匙。這次實(shí)戰(zhàn)我們就模擬一個(gè)攻擊者的視角目標(biāo)就是一個(gè)典型的、可能是Vue.js構(gòu)建的登錄頁(yè)面看看如何通過(guò)分析其JS源碼挖掘出那些常規(guī)掃描器發(fā)現(xiàn)不了的深層次漏洞。2. 攻擊面全景圖登錄流程的每一個(gè)環(huán)節(jié)都可能失守在動(dòng)手分析JS源碼之前我們得先建立全局視野。一個(gè)登錄頁(yè)面的攻擊面遠(yuǎn)不止一個(gè)“SQL注入”或“弱口令”那么簡(jiǎn)單。它是一個(gè)由多個(gè)環(huán)節(jié)串聯(lián)起來(lái)的鏈條任何一個(gè)環(huán)節(jié)的脆弱都可能導(dǎo)致整個(gè)認(rèn)證體系崩塌。我們可以把這個(gè)鏈條拆解為以下幾個(gè)關(guān)鍵攻擊面2.1 客戶端輸入與渲染邏輯這是最前端的一環(huán)也是JS源碼分析的主戰(zhàn)場(chǎng)。攻擊者在這里關(guān)注的是頁(yè)面如何生成表單如何校驗(yàn)數(shù)據(jù)如何組裝和發(fā)送源碼泄露與信息收集首先我們得拿到JS文件?，F(xiàn)代構(gòu)建工具如Webpack可能會(huì)把源碼打包、混淆但并非無(wú)懈可擊。通過(guò)瀏覽器開發(fā)者工具的“Sources”面板我們能直接看到當(dāng)前頁(yè)面加載的所有JS文件?；煜拇a雖然難讀但通過(guò)一些反混淆工具如de4js或耐心分析常能發(fā)現(xiàn)硬編碼的API端點(diǎn)、接口參數(shù)格式、甚至調(diào)試信息。例如一個(gè)config.js文件里可能寫著API_BASE_URL: https://api.target.com/internal/v1這就暴露了內(nèi)部API地址。客戶端輸入驗(yàn)證繞過(guò)這是經(jīng)典漏洞。登錄頁(yè)面常用JS在提交前檢查用戶名是否為空、密碼長(zhǎng)度、郵箱格式等。比如這樣的代碼function validateLogin() { let username document.getElementById(username).value; let password document.getElementById(password).value; if (username.length 6) { alert(用戶名至少6位); return false; } // ... 其他檢查 return true; // 只有所有檢查通過(guò)才觸發(fā)表單提交或axios請(qǐng)求 }攻擊思路這種校驗(yàn)純粹是“防君子不防小人”。攻擊者可以直接用Burp Suite攔截HTTP請(qǐng)求修改username為任意長(zhǎng)度比如admin或者直接禁用瀏覽器JS就可以輕松繞過(guò)。更隱蔽的是一些復(fù)雜的校驗(yàn)邏輯可能存在缺陷比如正則表達(dá)式過(guò)濾不嚴(yán)可能導(dǎo)致注入?？蛻舳藭?huì)話與狀態(tài)管理登錄狀態(tài)token如JWT是如何存儲(chǔ)的是localStorage、sessionStorage還是CookieJS代碼中如何讀取和發(fā)送它檢查是否有將敏感token記錄到日志、或通過(guò)console.log泄露的代碼。例如在調(diào)試代碼中看到console.log(Auth Token:, token)這就是一個(gè)低級(jí)但真實(shí)存在的信息泄露點(diǎn)。2.2 網(wǎng)絡(luò)通信與API接口當(dāng)表單數(shù)據(jù)離開瀏覽器飛向服務(wù)器的過(guò)程中又是一個(gè)充滿風(fēng)險(xiǎn)的階段。JS源碼決定了數(shù)據(jù)以何種形式、發(fā)往何處。API端點(diǎn)枚舉與探測(cè)分析JS中axios、fetch或$.ajax的調(diào)用找到登錄、注冊(cè)、找回密碼等接口的真實(shí)URL。有時(shí)開發(fā)會(huì)為了方便設(shè)計(jì)出有規(guī)律的API如/api/login,/api/register,/api/reset-password。攻擊者可以據(jù)此枚舉其他可能未在前端暴露的管理接口比如/api/admin/list-users。請(qǐng)求參數(shù)構(gòu)造與篡改JS源碼揭示了后端期望的數(shù)據(jù)結(jié)構(gòu)。是JSON格式還是FormData字段名是什么除了username和password還有沒有captcha、token、deviceId等隱藏或可選參數(shù)例如源碼顯示登錄請(qǐng)求體是{“user”: “xxx”, “pwd”: “yyy”, “rememberMe”: true}。那么攻擊者可以嘗試將rememberMe改為一個(gè)非布爾值或者添加一個(gè)額外的參數(shù)如role: admin測(cè)試后端是否存在參數(shù)解析或業(yè)務(wù)邏輯漏洞。認(rèn)證憑證的傳輸安全JS代碼是否強(qiáng)制使用HTTPS有沒有在明文HTTP下發(fā)送密碼的潛在分支比如用于開發(fā)環(huán)境檢查所有網(wǎng)絡(luò)請(qǐng)求的URL構(gòu)造邏輯。2.3 認(rèn)證與授權(quán)邏輯缺陷這是最致命的攻擊面之一往往源于前后端對(duì)業(yè)務(wù)邏輯理解的不一致而漏洞就藏在JS實(shí)現(xiàn)的邏輯中。密碼重置邏輯繞過(guò)找回密碼功能是重災(zāi)區(qū)。通過(guò)JS分析“發(fā)送驗(yàn)證碼”和“驗(yàn)證驗(yàn)證碼”的流程。是否存在“驗(yàn)證碼僅前端校驗(yàn)”或者驗(yàn)證碼與手機(jī)號(hào)/郵箱的綁定關(guān)系是否在客戶端驗(yàn)證我曾見過(guò)一個(gè)案例JS代碼中提交重置密碼請(qǐng)求時(shí)僅將用戶輸入的驗(yàn)證碼和當(dāng)前會(huì)話里存儲(chǔ)的驗(yàn)證碼做比較而完全沒在請(qǐng)求體中帶上要重置的賬號(hào)。這意味著只要我獲取到一個(gè)有效的驗(yàn)證碼比如通過(guò)自己的手機(jī)號(hào)獲取我就可以在請(qǐng)求中指定任意username參數(shù)從而重置他人密碼。登錄狀態(tài)維持與越權(quán)登錄成功后JS如何跳轉(zhuǎn)是根據(jù)后端返回的role字段動(dòng)態(tài)渲染菜單嗎檢查是否有這樣的代碼if (loginResponse.data.role admin) { window.location.href /admin/dashboard; } else { window.location.href /user/home; }如果攻擊者能篡改后端響應(yīng)或直接修改本地JS代碼邏輯將role字段改為admin就可能實(shí)現(xiàn)前端越權(quán)跳轉(zhuǎn)。雖然后端接口可能還有校驗(yàn)但這已經(jīng)打開了第一道門。競(jìng)態(tài)條件與并發(fā)攻擊JS發(fā)起的請(qǐng)求是否處理了并發(fā)場(chǎng)景比如在“修改郵箱”功能中通常流程是1請(qǐng)求發(fā)送驗(yàn)證碼到舊郵箱2驗(yàn)證舊郵箱的驗(yàn)證碼3綁定新郵箱。如果JS代碼沒有在步驟2成功后禁用“提交新郵箱”的按鈕或者沒有設(shè)置有效的狀態(tài)鎖攻擊者可能通過(guò)快速并發(fā)請(qǐng)求在驗(yàn)證舊郵箱的同時(shí)將郵箱替換為攻擊者控制的郵箱。2.4 第三方依賴與供應(yīng)鏈風(fēng)險(xiǎn)現(xiàn)代前端離不開npm包。JS源碼中引入的第三方庫(kù)如某個(gè)特定的vue-login-plugin、crypto-js的特定版本可能本身存在已知漏洞。通過(guò)分析package.json有時(shí)會(huì)被打包進(jìn)源碼或通過(guò)window對(duì)象查看全局變量可以識(shí)別出引用的庫(kù)及其版本進(jìn)而查找公開的CVE漏洞。3. 實(shí)戰(zhàn)演練親手解剖一個(gè)Vue.js登錄頁(yè)面的JS源碼光說(shuō)不練假把式。我們假設(shè)目標(biāo)是一個(gè)采用Vue.js 2.x Element UI構(gòu)建的典型管理后臺(tái)登錄頁(yè)面。我們將使用Chrome開發(fā)者工具作為主要手術(shù)刀。3.1 環(huán)境準(zhǔn)備與信息收集打開目標(biāo)登錄頁(yè)假設(shè)地址是https://target.com/login。啟動(dòng)開發(fā)者工具按F12重點(diǎn)關(guān)註“Network”網(wǎng)絡(luò)和“Sources”源代碼標(biāo)簽頁(yè)。清除并記錄在Network標(biāo)簽頁(yè)勾選“Preserve log”保留日志然后刷新頁(yè)面。這樣能看到頁(yè)面加載的所有靜態(tài)資源JS、CSS和初始的API請(qǐng)求。定位核心JS文件在Network的“JS”過(guò)濾器下尋找文件名中帶login、app、chunk-vendors這是Webpack打包的第三方庫(kù)、chunk-xxx業(yè)務(wù)代碼的文件。通常app.xxxx.js包含了主邏輯。同時(shí)查看Sources標(biāo)簽頁(yè)下的“Page” - “top” - “target.com” - “static/js”目錄這里存放著所有JS文件。注意很多生產(chǎn)環(huán)境會(huì)啟用代碼壓縮minify和混淆obfuscation。混淆后的變量名可能是單個(gè)字母但函數(shù)結(jié)構(gòu)和字符串常量通常保留。我們主要尋找的是硬編碼的URL、接口參數(shù)名、調(diào)試信息字符串如debug,error和特定的業(yè)務(wù)邏輯關(guān)鍵詞如login,password,token,validate。3.2 靜態(tài)源碼分析與關(guān)鍵信息提取我們找到了一個(gè)名為login.4a3b2c1d.js的文件哈希值用于緩存破壞。在Sources面板中打開它雖然代碼被壓縮成一行但我們可以使用格式化工具點(diǎn)擊左下角的{}圖標(biāo)使其可讀。格式化后我們開始搜索關(guān)鍵詞搜索API端點(diǎn)在格式化后的代碼中按CtrlF搜索/api,login,axios,fetch,url,request。可能發(fā)現(xiàn)const LOGIN_API /api/v1/auth/login;可能發(fā)現(xiàn)this.$axios.post(/api/user/signin, this.form)收獲我們確定了登錄請(qǐng)求的精確端點(diǎn)POST /api/v1/auth/login。搜索請(qǐng)求參數(shù)結(jié)構(gòu)繼續(xù)在附近代碼中查看data或params對(duì)象。// 可能發(fā)現(xiàn)的代碼片段 login() { this.$refs.form.validate(valid { if (valid) { let postData { username: this.form.username, password: this.$md5(this.form.password), // 注意前端MD5加密 captcha: this.form.captcha, deviceId: localStorage.getItem(deviceId) || web }; this.$axios.post(LOGIN_API, postData).then(...) } }) }關(guān)鍵發(fā)現(xiàn)1密碼在前端使用了MD5加密。這是一個(gè)重大安全信號(hào)。雖然避免了明文傳輸?shù)馕吨蠖藬?shù)據(jù)庫(kù)很可能存儲(chǔ)的是MD5哈希值而非加鹽的強(qiáng)哈希如bcrypt。攻擊者無(wú)需破解原始密碼只需獲取或碰撞MD5哈希即可登錄彩虹表攻擊。我們可以測(cè)試“密碼重置”功能看新密碼是否也以同樣方式處理這可能存在哈希傳遞攻擊Pass-the-Hash的風(fēng)險(xiǎn)。關(guān)鍵發(fā)現(xiàn)2請(qǐng)求體中包含deviceId且從localStorage讀取。如果localStorage中沒有則默認(rèn)為web。這給了我們一個(gè)參數(shù)操控點(diǎn)。我們可以嘗試修改或枚舉deviceId看后端是否依賴它進(jìn)行設(shè)備綁定或風(fēng)險(xiǎn)識(shí)別。搜索驗(yàn)證邏輯搜索validate,check,rule,if語(yǔ)句。可能發(fā)現(xiàn)客戶端驗(yàn)證規(guī)則如用戶名必須是郵箱格式。這再次確認(rèn)了我們可以繞過(guò)它?？赡馨l(fā)現(xiàn)對(duì)登錄響應(yīng)response的處理邏輯.then(response { if (response.data.code 200) { localStorage.setItem(access_token, response.data.data.token); localStorage.setItem(user_info, JSON.stringify(response.data.data.user)); // 根據(jù)角色跳轉(zhuǎn) if (response.data.data.user.role super_admin) { this.$router.push(/super-admin); } else { this.$router.push(/dashboard); } } else { this.$message.error(response.data.message); } })關(guān)鍵發(fā)現(xiàn)3跳轉(zhuǎn)邏輯依賴于后端返回的user.role字段。這本身沒問(wèn)題但結(jié)合后續(xù)的接口訪問(wèn)如果其他API的權(quán)限校驗(yàn)不嚴(yán)前端角色顯示可能誤導(dǎo)管理員。3.3 動(dòng)態(tài)調(diào)試與行為驗(yàn)證靜態(tài)分析給了我們地圖動(dòng)態(tài)調(diào)試則是實(shí)地勘探。我們使用“Debugger”功能。設(shè)置斷點(diǎn)在Sources面板找到我們關(guān)心的函數(shù)比如login()方法的那一行this.$axios.post...點(diǎn)擊行號(hào)設(shè)置斷點(diǎn)藍(lán)色標(biāo)記。觸發(fā)斷點(diǎn)在登錄頁(yè)面輸入測(cè)試賬號(hào)如test:test123點(diǎn)擊登錄。瀏覽器執(zhí)行會(huì)暫停在斷點(diǎn)處。觀察狀態(tài)在右側(cè)的“Scope”面板可以看到當(dāng)前作用域的所有變量值。我們可以查看postData對(duì)象的具體內(nèi)容確認(rèn)密碼的MD5哈希值。我們可以實(shí)時(shí)修改變量。比如右鍵點(diǎn)擊postData.deviceId選擇“Edit value”將其改為mobile_app_vip然后放行程序。這相當(dāng)于在請(qǐng)求發(fā)出前篡改了數(shù)據(jù)用于測(cè)試后端對(duì)deviceId參數(shù)的處理是否嚴(yán)格。攔截與修改請(qǐng)求更強(qiáng)大的工具是配合Burp Suite。將瀏覽器代理指向Burp。在登錄時(shí)Burp會(huì)攔截到POST /api/v1/auth/login請(qǐng)求。我們可以修改請(qǐng)求體中的任何字段。例如將username改為已知的管理員賬號(hào)如admin進(jìn)行用戶名枚舉測(cè)試觀察錯(cuò)誤信息差異。在JSON末尾添加額外的逗號(hào)和參數(shù)如extra_param:test測(cè)試后端JSON解析器的健壯性。嘗試將captcha參數(shù)置空或刪除測(cè)試驗(yàn)證碼是否在后端真正被校驗(yàn)。3.4 針對(duì)“前端MD5加密”的深入攻擊測(cè)試這是我們靜態(tài)分析發(fā)現(xiàn)的最有價(jià)值的一個(gè)點(diǎn)。我們?cè)O(shè)計(jì)以下測(cè)試用例測(cè)試密碼重置流程走一遍密碼重置流程用Burp攔截“設(shè)置新密碼”的請(qǐng)求。觀察新密碼是否也是以MD5哈希的形式發(fā)送如newPassword: e10adc3949ba59abbe56e057f20f883e。如果也是MD5那么攻擊者如果通過(guò)其他方式如SQL注入獲取了某個(gè)用戶的密碼哈希MD5他無(wú)需知道明文直接在重置密碼請(qǐng)求中提交這個(gè)舊的MD5哈希作為newPassword即可將該用戶的密碼重置為自己已知哈希對(duì)應(yīng)的密碼如果他知道明文的話或者更直接地他可以用這個(gè)哈希直接發(fā)起登錄請(qǐng)求如果后端只是比較哈希值。這就是一種前端哈希傳遞漏洞的雛形。測(cè)試登錄接口的哈希直接登錄首先用一個(gè)已知賬號(hào)密碼如user1:password1正常登錄用Burp攔截請(qǐng)求記下密碼字段的MD5值假設(shè)是e10adc...。然后嘗試用另一個(gè)賬號(hào)如user2但在密碼字段直接填入e10adc...即user1的密碼哈希。發(fā)送請(qǐng)求。如果登錄成功那將是災(zāi)難性的。這說(shuō)明后端只是簡(jiǎn)單比較數(shù)據(jù)庫(kù)存儲(chǔ)的MD5哈希和前端傳過(guò)來(lái)的MD5哈希是否一致完全喪失了“鹽”salt的保護(hù)意義使得哈希等同于密碼。實(shí)操心得在測(cè)試前端加密時(shí)一定要理解其背后的意圖。前端加密通常是為了避免密碼明文在傳輸中被嗅探提供有限的傳輸層安全但它絕不能替代后端的安全存儲(chǔ)必須使用帶鹽的、計(jì)算成本高的哈希算法如Argon2, bcrypt, PBKDF2。一旦發(fā)現(xiàn)前端使用MD5、SHA1等弱哈希幾乎可以肯定后端存儲(chǔ)也存在問(wèn)題這是一個(gè)需要深挖的高危信號(hào)。4. 常見漏洞模式與JS源碼中的蛛絲馬跡根據(jù)多年經(jīng)驗(yàn)我總結(jié)了一些在登錄頁(yè)面JS源碼中常見的漏洞模式你可以把它們當(dāng)作檢查清單漏洞模式在JS源碼中可能的表現(xiàn)滲透測(cè)試驗(yàn)證方法客戶端校驗(yàn)繞過(guò)存在validate()、checkForm()等函數(shù)僅在前端驗(yàn)證輸入格式、長(zhǎng)度、必填項(xiàng)。禁用瀏覽器JS或直接用Burp等工具發(fā)送請(qǐng)求跳過(guò)前端校驗(yàn)。硬編碼敏感信息代碼中出現(xiàn)明文API密鑰、內(nèi)部URL、默認(rèn)密碼、加密密鑰等字符串常量。全局搜索apiKey,secret,password,http://internal,key:等關(guān)鍵詞。不安全的憑證傳輸使用http://開頭的API URL或在development模式下使用明文日志打印token。檢查所有axios/fetch的baseURL搜索console.log、alert輸出敏感數(shù)據(jù)。邏輯缺陷/業(yè)務(wù)繞過(guò)密碼重置流程中驗(yàn)證“驗(yàn)證碼”的請(qǐng)求不攜帶待重置的賬號(hào)修改信息時(shí)身份標(biāo)識(shí)如user_id由前端提供。分析關(guān)鍵業(yè)務(wù)流程的函數(shù)調(diào)用順序和參數(shù)嘗試篡改、刪除或重排請(qǐng)求。依賴已知漏洞的第三方庫(kù)package.json中或全局變量顯示使用了存在CVE的jquery、lodash、vue等庫(kù)的舊版本。識(shí)別庫(kù)名和版本在NVD、Snyk等漏洞庫(kù)中查詢。不安全的跳轉(zhuǎn)/重定向登錄后跳轉(zhuǎn)的URLredirectUrl從前端URL參數(shù)獲取未經(jīng)凈化。尋找window.location.href、$router.push、redirect等參數(shù)來(lái)源測(cè)試是否可被控制。客戶端會(huì)話固定會(huì)話標(biāo)識(shí)如session token在登錄前就已生成并設(shè)置登錄后未更新。在未登錄狀態(tài)獲取Cookie或token登錄后觀察該值是否變化。5. 防御視角給開發(fā)者的安全編碼建議分析了這么多攻擊面我們反過(guò)來(lái)從防御者角度看看開發(fā)登錄頁(yè)面時(shí)在JS層面應(yīng)該注意什么牢記“前端無(wú)安全”所有前端代碼HTML、CSS、JS對(duì)用戶都是透明的、可篡改的。任何關(guān)鍵的安全校驗(yàn)身份認(rèn)證、權(quán)限檢查、輸入有效性最終裁決都必須在后端進(jìn)行。前端校驗(yàn)只是為了提升用戶體驗(yàn)和減少無(wú)效請(qǐng)求。避免前端密碼加密除非是與后端協(xié)商的、用于特定安全模型的方案如SRP協(xié)議否則不要在前端對(duì)密碼進(jìn)行哈希加密。應(yīng)始終使用HTTPS來(lái)保證傳輸安全讓密碼以明文形式到達(dá)后端由后端進(jìn)行加鹽哈希存儲(chǔ)。如果必須前端加密例如應(yīng)對(duì)中間人攻擊的額外措施也必須結(jié)合隨機(jī)鹽、并使用安全的算法且后端需有對(duì)應(yīng)的解密或二次哈希邏輯但這會(huì)極大增加復(fù)雜性。凈化所有輸入包括來(lái)自前端的參數(shù)即使參數(shù)是前端生成的如deviceId后端也必須進(jìn)行校驗(yàn)和凈化。不要信任任何來(lái)自客戶端的數(shù)據(jù)。安全的錯(cuò)誤處理登錄失敗時(shí)返回統(tǒng)一的、模糊的錯(cuò)誤信息如“用戶名或密碼錯(cuò)誤”避免提示“用戶名不存在”或“密碼錯(cuò)誤”這會(huì)幫助攻擊者進(jìn)行用戶名枚舉。使用安全的依賴定期使用npm audit或yarn audit檢查并更新第三方依賴移除不必要的包。代碼混淆與壓縮雖然不能防止攻擊但能提高分析門檻。使用Webpack、Terser等工具進(jìn)行代碼壓縮、混淆、打包移除源碼中的注釋和調(diào)試信息。關(guān)鍵操作服務(wù)端狀態(tài)鎖對(duì)于密碼重置、郵箱修改等敏感操作必須在服務(wù)端維護(hù)狀態(tài)機(jī)防止并發(fā)請(qǐng)求導(dǎo)致邏輯繞過(guò)。登錄頁(yè)面的攻防是一場(chǎng)永不停歇的貓鼠游戲。攻擊者不斷尋找前端邏輯與后端實(shí)現(xiàn)之間的縫隙而防御者需要建立起縱深防御的思維從前端代碼規(guī)范到后端業(yè)務(wù)邏輯校驗(yàn)每一個(gè)環(huán)節(jié)都不能掉以輕心。這次針對(duì)JS源碼的分析實(shí)戰(zhàn)希望能給你提供一個(gè)清晰的切入點(diǎn)和一套可操作的方法論。下次面對(duì)一個(gè)登錄框時(shí)別忘了它可能不只是個(gè)登錄框而是一個(gè)等待被探索的、充滿可能性的攻擊面集合。