Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to break through the anti-collection strategy of CSS:: before pseudo-element confusion". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to break through CSS:: before pseudo-element confusion anti-collection strategy"!

It's strange to analyze the parameter list and find some characters on the page that can't be found in the HTML source (runtime). After careful analysis, it turns out that the confusion is caused by CSS: before pseudo elements, as shown in the following illustration:

The core code is as follows:

View plain copy to clipboard print?

HTML Code:

CSS Code:

.hs _ kw5_configpl::before {

Content: "listed"

}

Students who are familiar with the DOM operation know that the content attribute of the CSS pseudo-element can be obtained through the element's getPropertyValue ('content') method, as shown in the sample code:

View plain copy to clipboard print?

Window.getComputedStyle (

Document.querySelector ('.hs _ kw5_configpl'),': before'

). GetPropertyValue ('content')

If you test it in Console, you will find it strange that you can't get a valid value (as shown in the following figure). Instead of returning "listed", you return "content" instead.

It seems that it has been tampered with again, and how does TA do it?

After careful analysis, it is found that the Aajx response data of a path containing GetModelConfig1.ashx contains JS code. After analyzing the code, it is found that the above SPAN element is dynamically created by JS, and the relevant suspicious code is found, as shown below (after formatting):

View plain copy to clipboard print?

Function (element, pseudoElt) {

If (pseudoElt! = undefined & & typeof (pseudoElt) = 'string' & & pseudoElt.toLowerCase (). IndexOf (': before') >-1) {

Var obj = {}

/ / the key point is the following sentence

Obj.getPropertyValue = function (x) {

Return x

}

Return obj

} else {

Return window.hs_fuckyou (element, pseudoElt)

}

}

It turns out that the getPropertyValue () method has been stolen and rewritten! No wonder the call cannot get the expected value.

Continue to analyze the JS code, focusing on the process of dynamic creation of SPAN elements, with the following code:

View plain copy to clipboard print?

Function poL_ (ctw_, RXe_) {

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

/ / can replace\ u0027 with'

By intercepting the response modification data several times (for example, modified to the following code), it is found that the second parameter of the function, Rxe_, is the content attribute value of the pseudo element:: before, and the first parameter is an index.

View plain copy to clipboard print?

Function poL_ (ctw_, RXe_) {

/ / see what the ctw_ and Rxe_ parameters are.

Console.log (ctw_ +'>'+ RXe_))

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

PS: intercepting and modifying HTTP reply data can be implemented with Fiddler or mitmproxy. Here we choose the latter because it supports plug-in Python scripts to implement data modification.

The following figure shows the Index-> character mapping table printed by the console:

Now it's very close to success. What exactly is the significance of this index number?

For example, the index of "listed" is 5, and above we see that "listed" corresponds to the SPAN element, which, boldly guesses, corresponds to the number 5 in class. After many times of verification, it is correct.

Now I have the idea:

(1) load the page through Selenium (to automatically complete the dynamic loading of data and execute JS code automatically), and configure all traffic to go to mitmproxy.

(2) use mitmproxy to capture GetModelConfig1.ashx reply data, find the poL_ (ctw_, RXe_) function, and inject our JS code to expose the corresponding "index and obfuscation character" mapping table.

(3) the table can be used to restore confusion to plain text.

It should be noted that the function name (poL_) and parameter name (ctw_, RXe_) in the above code are dynamic, but after many observations, it is found to be regular, and the function can be located in the following ways:

View plain copy to clipboard print?

Look for the following string:

'+\ u0027\ "}\ u0027'

Locate the first function that appears earlier, that is, the target to be injected

For example, function poL_ (ctw_, RXe_)

Regular expressions can be expressed as:

R'\ s + (function\ s + [^\ {\}\ (\)] +), ([^\ {\}\ (\)] +), ([^\ {\}\ (\)])\)\ {) [az\ d\ -\ _] +\ _ [. +?\ +\ s*\ u0027\ "\"\ s*\}\\ u0027'

Automatic code injection here we use mitmproxy to implement, the injection script modify_response.py code is as follows:

View plain copy to clipboard print?

# coding: utf-8

# modify_response.py

Import re

From mitmproxy import ctx

Def response (flow):

"" modify reply data

"

If 'GetModelConfig' in flow.request.url:

# Auto House character obfuscation (CSS: before pseudo element) cracking

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

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

If m:

# extract function names and parameters

Function_name = m.groups () [0]

Param1 = m.groups () [1]

Param2 = m.groups () [2]

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

# content after replacement

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

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

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

After the injection is successful, after the page is loaded, the desired mapping table will be printed at the bottom of the page:

With this mapping table, you can restore the plaintext, as shown in the following code:

View plain copy to clipboard print?

Def restore_css_confusion (html):

"" restore obfuscation characters

Html-Source code of the HTML document to be processed

"

Confusions = {}

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

Confusions [index] = common.normalize (string)

# replace one by one

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

Original_text = confusions [index]

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

Html = html.replace (span, original_text)

Return html

After restore, you can extract the correct parameter information, as shown in the following figure:

At this point, I believe you have a deeper understanding of "how to break through the anti-collection strategy of CSS:: before pseudo-element confusion". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.