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

This article will explain in detail how to quickly find the JavaScript encryption entry in Tampermonkey. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

In many cases, we may want to automate some code in a web page to help us do something. Such as automatic ticket grabbing, automatic brushing, automatic crawler and so on, most of these operations are realized with the help of JavaScript. So here comes the question? How can we easily execute the JavaScript code we expect to execute in the browser? A plug-in called Tampermonkey is recommended here. This plug-in is so powerful that we can execute almost any JavaScript code in the web page to achieve the function we want.

Of course, it's not just automatic ticket grabbing, automatic brushing, automatic crawler, the use of Tampermonkey is much more than that, as long as the function we want can be realized in JavaScript, Tampermonkey can help us do it. For example, we can apply Tampermonkey to JavaScript reverse analysis to help us analyze some JavaScript encryption and obfuscation code more easily.

In this section, we will introduce the use of this plug-in, and combined with an actual case, introduce the use of this plug-in in JavaScript reverse analysis.

Tampermonkey

Tampermonkey, also known as "Oil Monkey" in Chinese, is a browser plugin that supports Chrome. With it, we can automatically execute some JavaScript scripts when the browser loads the page. Because we are executing JavaScript, we can achieve almost any effect we want in the web page, such as automatic crawler, automatic page modification, automatic response to events, and so on.

Installation

First we need to install Tampermonkey, and the browser we use here is Chrome. You can download and install it directly from the Chrome App Store or from Tampermonkey's website https://www.tampermonkey.net/.

After the installation is complete, the Tampermonkey icon appears in the upper-right corner of the Chrome browser, which indicates that the installation is successful.

Get script

Tampermonkey runs JavaScript scripts, and each website can have corresponding scripts to run, and different scripts can perform different functions. We can customize these scripts, and we can also use a lot of scripts that have already been written. after all, we don't have to build any more wheels.

We can find some very useful scripts on https://greasyfork.org/zh-CN/scripts, such as full-network video advertising, Baidu cloud-wide search, and so on.

Script writing

In addition to using scripts that have been written by others, we can also write our own scripts to achieve the desired functions. Is it difficult to write scripts? In fact, it is to write JavaScript code, as long as you know some JavaScript syntax. In addition to knowing the JavaScript syntax, we also need to follow some script writing specifications, including the setting of some parameters.

Let's simply implement a small script to implement a function.

First of all, we can click the Tampermonkey plug-in icon and click the "Administration Panel" button to open the script management page.

The interface is similar to that shown in the following figure.

Some of the Tampermonkey scripts we already have are shown here, including those we created ourselves and those we downloaded and installed from third-party websites.

In addition, it also provides editing, debugging, deletion and other management functions, we can easily manage the script.

Next, let's create a new script to try. Click the "+" sign on the left, and the page shown in the figure will be displayed.

The initialization code is as follows:

/ / = UserScript==// @ name New Userscript// @ namespace http://tampermonkey.net/// @ version 0.1 description try to take over the / @ author You// @ match https://www.tampermonkey.net/documentation.php?ext=dhdg// @ grant none// = / UserScript== (function () {'use strict'; / / Your code here...}) ()

Here are some comments at the top, but these comments are very useful, this part is called UserScript Header, in which we can configure some script information, such as name, version, description, effective site, and so on.

Here is a brief introduction to some of the parameter definitions of UserScript Header.

Name: the name of the script, which is the name of the script displayed in the control panel. Namespace: the namespace of the script. @ version: the version of the script, which is mainly used for version updates. @ author: author. @ description: script description. @ homepage, @ homepageURL, @ website,@source: the author's home page, which is used to jump from the script name on the Tampermonkey options page. Note that if the @ namespace tag starts with http://, it will be the same here. @ icon, @ iconURL and @ defaulticon: low resolution icon. @ icon64 and @ icon64URL:64x64 high resolution icon. @ updateURL: check the updated URL, you need to define @ version. DownloadURL: update the URL of the download script. If it is defined as none, it will not check for updates. @ supportURL: the URL where the problem is reported. @ include: effective page. You can configure multiple pages, but note that URL Hash is not supported here. For example:

/ / @ include http://www.tampermonkey.net/*// @ include http://*// @ include https://*// @ include *

@ exclude: does not take effect on the page, but can be configured with multiple priority over @ include and @ match. @ require: append script URL, which is equivalent to introducing external scripts, which will be executed before custom scripts are executed, such as introducing some necessary libraries, such as jQuery, etc. Multiple @ require parameters can be configured here. For example:

/ / @ require https://code.jquery.com/jquery-2.1.4.min.js// @ require https://code.jquery.com/jquery-2.1.3.min.js#sha256=23456...// @ require https://code.jquery.com/jquery-2.1.2.min.js#md5=34567...,sha256=6789...

@ resource: preloaded resources, which can be read through GM_getResourceURL and GM_getResourceText. Connect: the domain name that is allowed to be accessed by GM_xmlhttpRequest, one per line. Run-at: the moment when the script is injected, such as when the page is first loaded, after an event occurs, and so on. For example: document-start: execute this script as early as possible. Executes when the body of document-body:DOM appears. Executes when or after the document-end:DOMContentLoaded event occurs. Execute after the document-idle:DOMContentLoaded event occurs, that is, after the DOM load is complete, which is the default option. Context-menu: if you click the script in the browser context menu (desktop Chrome browsers only), the script will be injected. Note: if you use this value, all @ include and @ exclude statements will be ignored. @ grant: used to add the GM function to the whitelist, which is equivalent to authorizing the use of some GM functions. For example:

/ / @ grant GM_setValue// @ grant GM_getValue// @ grant GM_setClipboard// @ grant unsafeWindow// @ grant window.close// @ grant window.focus

If the @ grant option is not defined, Tampermonkey guesses the required function usage.

Noframes: this tag causes the script to run on the main page, but not on iframe. Nocompat: because some of the code may have been written specifically for specialized browsers, through this tag, Tampermonkey will know where the script can run. For example:

/ / @ nocompat Chrome

This specifies that the script runs only in the Chrome browser.

In addition, Tampermonkey defines some API that make it easy for us to complete an operation, such as:

GM_log: outputs the log to the console. GM_setValue: save the content of the parameter to Storage. GM_addValueChangeListener: add a listener to a variable that triggers a callback when the value of the variable changes. GM_xmlhttpRequest: initiates an Ajax request. GM_download: download a file to disk. GM_setClipboard: save something to the pasteboard.

There are many other API, you can go to https://www.tampermonkey.net/documentation.php to see more content.

Below the UserScript Header is the code for JavaScript functions and calls, in which 'use strict' indicates that the code uses JavaScript's strict mode, which can eliminate some unreasonable and imprecise aspects of Javascript syntax in strict mode, and reduce some strange behaviors, such as not being able to use undeclared variables directly, which can ensure the safe operation of the code, while improving the efficiency and speed of the compiler. Below / / Your code here... Here we can write our own code.

Actual combat JavaScript reverse

Let's demonstrate the role of JavaScript through a simple reverse case of Tampermonkey.

When JavaScript is in reverse, we often need to trace stack calls to certain methods, but in many cases, some JavaScript variables or method names are very difficult to capture after confusion.

But if we can master certain ways or rules, with the aid of Tampermonkey, we can find out the breakpoint location of some JavaScript methods more easily, thus speeding up the reverse process.

In the reverse process, a very typical technology is Hook technology. Hook technology, also known as hook technology in Chinese, is to rewrite one of the methods in the process of running the program, adding our custom code before and after the original method. It is equivalent to that the hook program captures the message before the system calls the function, and the hook function gets control first. At this time, the hook function can not only process (change) the execution behavior of the function, but also force the delivery of the message to end.

If you think it's abstract, you can understand it after reading the following Hook case.

For example, we then use Tampermonkey to implement the Hook of a JavaScript method to easily find the location where the method is executed, thus quickly locating the reverse entry.

Let's go to such a simple website: https://scrape.cuiqingcai.com/login1, this website structure is very simple, is a user name password login, but the difference is that when you click Submit, the form submission POST content is not a simple user name and password, but an encrypted Token.

The page looks like this:

We casually enter the user name and password, click the login button, and observe the changes in the network request.

You can see the following results:

You can see that the console actually submitted a POST request, which read:

{"token": "eyJ1c2VybmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiJhZG1pbiJ9"}

Well, indeed, there is no such thing as username and password, so what on earth is this? If I were a reptile? How to simulate login?

The premise of simulated login is, of course, to find the logic generated by the current token, so the question is, what exactly is the relationship between this token and the user name and password? How can we find any clues?

Here we may think that we enter a user name and password, but when we submit it, it becomes a token, and the content of the token looks a lot like Base64 coding. This means that the site may first mix the username and password into a new string, then encode it once Base64, and finally assign it to token to submit. Therefore, we can get so much information from the preliminary observation.

OK, let's verify it and see how it is implemented in the JavaScript code of the website.

Next, let's take a look at the source code of the website, open the Sources panel, boy, it all looks like the content packaged by Webpack, after some confusion, similar results are as follows:

With so much confusing code, you can't look at it bit by bit, can you? We have to find the age of the monkey? So in this case, how do you find the location where token is generated?

There are actually two solutions.

Ajax breakpoint

Since this request happens to be an Ajax request, we can add a XHR breakpoint listener, add the POST URL to the breakpoint listener, and add such a XHR breakpoint on the right side of the Sources panel, as shown in the figure:

At this time, if we click the login button again and initiate an Ajax request, we will enter the breakpoint, and then look at the stack information to find the entry of the code step by step.

After clicking Submit, the page enters the Debug state and stops. The result is as follows:

Step by step, we can finally find that the entrance is actually here in the onSubmit method. But in fact, we observe that the top of the breakpoint here will also include some irrelevant contents such as async Promise, and what we really want to look for is the place where the user name and password are processed and then encoded by Base64. The call of these requests actually has nothing to do with the entry we are looking for.

In addition, this method will not work if the entry location we are looking for does not accompany this Ajax request.

This method works, but let's not talk about the logic in the onSubmit method first, but let's move on to the next method.

Hook Function

So, here's the second way to quickly locate the entry, which is to use the Tampermonkey custom JavaScript to implement the Hook of a JavaScript method. Where is Hook? Most obviously, the location of the Hook Base64 code is fine.

So here is a small knowledge point, how the Base64 coding in JavaScript is realized. Yes, it's the btoa method, so let's just go to the Hook btoa method.

OK, here we create a new Tampermonkey script, which reads as follows:

/ / = UserScript==// @ name HookBase64// @ namespace https://scrape.cuiqingcai.com/// @ version 0.1 description HookBase64 encode function// / @ description HookBase64 encode function// @ author Germey// @ match https://scrape.cuiqingcai.com/login1// @ grant none// = = / UserScript== (function () {'use strict' function hook (object) Attr) {var func = object [attr] object [attr] = function () {console.log ('hooked', object, attr) var ret = func.apply (object, arguments) debugger return ret}} hook (window,' btoa')}) ()

First of all, we define some UserScript Header, including @ name, @ match, and so on. The more important thing here is @ name, which represents the name of the script; the other is @ match, which represents the URL where the script takes effect.

The contents of the script are shown above. We define a hook method, passing in the object and attr parameters, which means the attr parameter of the Hook object object. For example, if we want to Hook an alert method, set object to window and attr to the alert string. Here we want the Hook Base64 encoding method. In JavaScript, Based64 encoding is implemented using the btoa method, so here we only need the btoa method of the Hook window object.

So how does Hook work? Let's take a look at the first sentence var func = object [attr], which is equivalent to assigning it to a variable first, and we can achieve the same function by calling the func method. Then, we directly rewrite the definition of this method, directly rewrite object [attr], and rewrite it into a new method, in which the original method is called again through the func.apply method. In this way, we can ensure that the implementation effect of the front and rear method will not be affected, and the previous method will do whatever it is supposed to do. But unlike before, after we customize the method, we can now add our own code before and after the execution of the func method, such as console.log outputs the information to the console, such as debugger enters the breakpoint, and so on. In this process, we temporarily save the func method, and then define a new method to take over the control of the program, customize the implementation we want, and then call back the func method in the new method to ensure that the results are not affected. Therefore, we can achieve the custom function before and after the method without affecting the effect of the original method, which is the process of Hook.

Finally, we call the hook method, pass in the window object and the btoa string, and save it.

Next, refresh the page, and then we can see that the script takes effect on the current page, as shown in the figure.

Next, open the console and switch to the Sources panel, where we can see that a directory called Tampermonkey has been added to the resources under the site. after expansion, we find that it is the script we just customized.

Then enter your user name and password, and click submit. When we find that we have successfully entered the breakpoint mode and stopped, the code is stuck in our custom debugger line of code, as shown in the following figure.

The Hook resides successfully, which means that the JavaScript code calls the btoa method during execution.

Look at the console, as shown in the following figure.

The window object and btoa method are also output here to verify that they are correct.

In this way, we can successfully find the intersection of Base64 coding operation, and then take a look at the stack information. There will be no calls such as async and Promise, which clearly shows the process of calling the btoa method layer by layer, as shown in the figure.

The underlying encode methods are skipped, so we find the processing logic in the onSubmit method very smoothly:

OnSubmit: function () {var e = c.encode (JSON.stringify (this.form)); this.$http.post (a ["a"] .state.url.root, {token: e}) .then ((function (e) {console.log ("data", e)}))}

If you take a closer look, the encode method is actually a call to the btoa method, which is a Base64 coding process.

In addition, in the stack information, you can clearly see the parameter value passed in by Hook's method before execution, namely arguments. In addition, the result of the execution ret can also be easily found, as shown in the figure:

So now we know what the relationship between token and user name and password is.

It is clear here that the form is serialized by JSON, and then the encode, that is, the btoa method is called, and the value is assigned to token, and the entry is unlocked smoothly. Later, we just need to simulate the process to OK.

Therefore, we implement the Hook of a method call by Tampermonkey custom JavaScript script, which makes us quickly locate the location of the encryption entry, which is very convenient.

If you observe some ways in the future, you can use this method to try more, such as Hook encode method, decode method, stringify method, log method, alert method and so on, which is simple and efficient.

The above is the basic operation of simple Hook through Tampermonkey, of course, this is only a common basic case, but we can also sum up some basic ways of Hook.

We will continue to introduce more related content later.

If you want to learn more, you can also follow the Night team's JavaScript retrograde course series, article:

Well, we have a set of JS reverse courses necessary for crawlers.

JavaScript reverse Advanced course to help you break through the crawler bottleneck!

This is the end of the method for Tampermonkey to quickly find the JavaScript encryption entry. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.