怎么突破CSS ::before 偽元素混淆反采集策略

本篇內(nèi)容主要講解“怎么突破CSS ::before 偽元素混淆反采集策略”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么突破CSS ::before 偽元素混淆反采集策略”吧!

分析參數(shù)列表，發(fā)現(xiàn)頁面上有部分字符在HTML源碼（運(yùn)行時(shí)）中卻找不到，很奇怪。仔細(xì)分析，原來是通過CSS :before 偽元素加了混淆，如下圖示例：

核心代碼如下所示：

view plain copy to clipboard print ?

1. HTML代碼：  

2.    

3.   

4. CSS代碼：   

5. .hs_kw5_configpl::before {  

6.     content: "上市";  

7. }  

熟悉DOM操作的同學(xué)知道，可以通過元素的getPropertyValue('content')方法來獲取CSS偽元素的content屬性，如下是示例代碼：

view plain copy to clipboard print ?

1. window.getComputedStyle(  

2. document.querySelector('.hs_kw5_configpl'), ':before'  

3. ).getPropertyValue('content');  

在Console里測(cè)試一下，你會(huì)發(fā)現(xiàn)很奇怪，竟然獲取不到有效值（如下圖所示），本應(yīng)該返回"上市"，卻返回了"content"。

看來哪里又被動(dòng)了手腳，TA是怎么做到的？

仔細(xì)分析發(fā)現(xiàn)一個(gè)路徑包含GetModelConfig1.ashx的Aajx應(yīng)答數(shù)據(jù)里含有JS代碼，分析代碼發(fā)現(xiàn)該上述SPAN元素是JS動(dòng)態(tài)創(chuàng)建的，并發(fā)現(xiàn)相關(guān)可疑代碼，如下所示(格式化后)：

view plain copy to clipboard print ?

1. function(element, pseudoElt) {  

2.     if (pseudoElt != undefined && typeof(pseudoElt) == 'string' && pseudoElt.toLowerCase().indexOf(':before') > -1) {  

3.         var obj = {};  

4.         // 重點(diǎn)是下面這句  

5.         obj.getPropertyValue = function(x) {  

6.             return x;  

7.         };  

8.         return obj;  

9.     } else {  

10.         return window.hs_fuckyou(element, pseudoElt);  

11.     }  

12. };  

原來是getPropertyValue()方法被偷梁換柱（改寫）了！難怪調(diào)用無法獲取預(yù)期的值。

繼續(xù)分析JS代碼，重點(diǎn)看SPAN元素的動(dòng)態(tài)創(chuàng)建的過程，其中有如下代碼：

view plain copy to clipboard print ?

1. function poL_(ctw_, RXe_) {  

2.     tPn_[\u0027\u0027 + ILC_ + iSW_ + uIo_ + pEA_ + GEv_ + Ewc_ + EPk_ + Zfo_ + sfd_ + UkX_](XZS_(ctw_) + URD_() + \u0027\"\u0027 + RXe_ + \u0027\" }\u0027, 0);  

3. // 可以將\u0027替換成'  

通過多次攔截應(yīng)答修改數(shù)據(jù)（例如，修改為如下代碼）測(cè)試發(fā)現(xiàn)，該函數(shù)的第二個(gè)參數(shù)Rxe_即為::before偽元素的content屬性值，第一個(gè)參數(shù)是一個(gè)索引。

view plain copy to clipboard print ?

1. function poL_(ctw_, RXe_) {  

2.     // 看看ctw_和Rxe_參數(shù)具體是什么  

3.     console.log(ctw_ + '->' + RXe_));  

4.     tPn_[\u0027\u0027 + ILC_ + iSW_ + uIo_ + pEA_ + GEv_ + Ewc_ + EPk_ + Zfo_ + sfd_ + UkX_](XZS_(ctw_) + URD_() + \u0027\"\u0027 + RXe_ + \u0027\" }\u0027, 0);  

PS：攔截修改HTTP應(yīng)答數(shù)據(jù)可以用Fiddler實(shí)現(xiàn)，也可以用mitmproxy，這里我們選擇后者，因?yàn)樗С滞鈷霵ython腳本來實(shí)現(xiàn)數(shù)據(jù)修改功能。

如下圖所示為控制臺(tái)打印出的"索引->字符"映射表：

現(xiàn)在離成功很近了。這個(gè)索引數(shù)字具體有什么意義呢？

例如，“上市”的索引為5，上面我們看到“上市”對(duì)應(yīng)SPAN元素是 ，大膽猜測(cè)，對(duì)應(yīng)的就是class中的數(shù)字5。經(jīng)多次驗(yàn)證，無誤。

現(xiàn)在思路有了：

（1）通過Selenium加載頁面（以自動(dòng)完成數(shù)據(jù)動(dòng)態(tài)加載，自動(dòng)執(zhí)行JS代碼），并配置所有流量走mitmproxy；

（2）使用mitmproxy捕獲GetModelConfig1.ashx的應(yīng)答數(shù)據(jù)，找到poL_(ctw_, RXe_)函數(shù)，注入我們的JS代碼，以曝出對(duì)應(yīng)的"索引和混淆字符"映射表；

（3）利用該表即可還原混淆為明文；

需要注意的是，上述代碼中的函數(shù)名（poL_）以及參數(shù)名(ctw_, RXe_)是動(dòng)態(tài)變化的，但是經(jīng)過多次觀察發(fā)現(xiàn)是有規(guī)律的，通過如下方法可以定位該函數(shù)：

view plain copy to clipboard print ?

1. 查找如下字符串:  

2. '+ \u0027\" }\u0027'  

3. 定位前面出現(xiàn)的第一個(gè)function，即要注入的目標(biāo)  

4. 例如 function poL_(ctw_, RXe_)  

5.   

6. 用正則表達(dá)式可以表述為：  

7. r'''''\s+(function\s+[^\{\}\(\)]+\(([^\{\}\(\)]+),([^\{\}\(\)]+)\)\{)[a-z\d\-\_]+\_\[.+?\+\s*\\u0027\\"\s*\}\\u0027'''  

代碼自動(dòng)注入這里我們采用mitmproxy來實(shí)現(xiàn)，注入腳本modify_response.py代碼如下所示：

view plain copy to clipboard print ?

1. # coding: utf-8  

2. # modify_response.py  

3.   

4. import re  

5. from mitmproxy import ctx  

6.       

7. def response(flow):  

8.     """修改應(yīng)答數(shù)據(jù) 

9.     """  

10.     if 'GetModelConfig' in flow.request.url:  

11.         # 汽車之家字符混淆（CSS :before 偽元素）破解  

12.         ctx.log.info('*' * 120 + '\n Found {}.'.format(flow.request.url))  

13.         m = re.compile(r'''''\s+(function\s+[^\{\}\(\)]+\(([^\{\}\(\)]+),([^\{\}\(\)]+)\)\{)[a-z\d\-\_]+\_\[.+?\+\s*\\u0027\\"\s*\}\\u0027''', re.IGNORECASE).search(flow.response.text)  

14.         if m:  

15.             # 提取函數(shù)名和參數(shù)  

16.             function_name = m.groups()[0]  

17.             param1 = m.groups()[1]  

18.             param2 = m.groups()[2]  

19.             ctx.log.info('Crack "CSS :before" in {}: "{}"'.format(function_name, flow.request.url))  

20.             # 替換后的內(nèi)容  

21.             replacement = function_name + "document.body.appendChild(document.createTextNode('[' + {} + ']->{{' + {} + '}};'));".format(param1, param2)  

22.             #replacement = function_name + "console.log({} + '->' + {});".format(param1, param2)  

23.             flow.response.text = flow.response.text.replace(function_name, replacement)  

注入成功，頁面加載完畢后，在頁面底部會(huì)打印出我們想要的映射表：

有了這個(gè)映射表，就可以還原出明文了，代碼如下所示：

view plain copy to clipboard print ?

1. def restore_css_confusion(html):  

2.     """還原混淆字符 

3.     html - 要處理的HTML文檔源碼; 

4.     """  

5.     confusions = {}  

6.     for index, string in re.compile(r'\[(\d+)\]->\{([^<>\;]+)\};').findall(html):  

7.         confusions[index] = common.normalize(string)  

8.     # 逐一替換  

9.     for span, index in re.compile(r'()').findall(html):  

10.         original_text = confusions[index]  

11.         print 'Restore "{}" into "{}"'.format(span, original_text)  

12.         html = html.replace(span, original_text)  

13.     return html  

還原之后就可以提取到正確的參數(shù)信息了，如下圖所示：

到此，相信大家對(duì)“怎么突破CSS ::before 偽元素混淆反采集策略”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！