Decoding JavaScript: A Guide to Deobfuscation

#webdev #javascript #beginners #programming

One of the most fascinating things you get taught in your early journey in web development is how to replicate a website by simply copying the source code from the developer tools page. Many developers find this helpful, but this isn’t the case with the developers who built these websites and the website owners.

These website owners are usually frightened and anxious about the theft of their client-side (HTML, CSS, and JavaScript) code. This leaves them with only one option: to search for solutions to deter unauthorized copying or misuse of their source codes.

One solution that meets these website owners' needs is a technique called JavaScript Obfuscation. In simple terms, JavaScript obfuscation is the act of converting human-readable JavaScript code into a complex format that’s difficult for humans to understand.

As there are two sides to a coin, JavaScript obfuscation also has its counterpart called JavaScript deobfuscation. From its name, you can already tell that it’s an act of doing the opposite of JavaScript obfuscation, thereby converting an already obfuscated JavaScript code into a human-readable format.

Note: In most cases, JavaScript deobfuscation doesn’t take an obfuscated code to its original form, though you sometimes get the original form. It’s safe to say that JavaScript deobfuscation isn’t promising you the original JavaScript code but a code you can read and understand.

Practical Explanation of JavaScript Deobfuscation and Obfuscation

We learn better by practicing, so let’s explore the practical side of all the theoretical explanations in the introductory part of this guide.

To test these techniques, you need a JavaScript code. With that said, let’s create a simple JavaScript code that defines a variable and outputs a string based on the number of times a for loop runs.

const no_loop_cycle = 5

for (let i = 0; i < no_loop_cycle; i++) {
    console.log("String ", i)
}

Now that you have JavaScript code for testing go to JavaScript Obfuscator Tool, a free tool for obfuscating JavaScript code.

Paste the sample JavaScript code into the tool and click the Obfuscate button.

Here’s what you’ll get as the output:

function _0xb78f(_0x2224cc,_0x217706){const _0x44095f=_0x4409();return _0xb78f=function(_0xb78f5c,_0x2ff516){_0xb78f5c=_0xb78f5c-0xd3;let _0x60ee28=_0x44095f[_0xb78f5c];return _0x60ee28;},_0xb78f(_0x2224cc,_0x217706);}const _0x5f75f2=_0xb78f;(function(_0x2c5162,_0x14873c){const _0x4e4ef7=_0xb78f,_0x5a8a62=_0x2c5162();while(!![]){try{const _0x1b7f08=parseInt(_0x4e4ef7(0xdb))/0x1*(-parseInt(_0x4e4ef7(0xdc))/0x2)+parseInt(_0x4e4ef7(0xdd))/0x3+-parseInt(_0x4e4ef7(0xd9))/0x4*(parseInt(_0x4e4ef7(0xd4))/0x5)+-parseInt(_0x4e4ef7(0xde))/0x6+parseInt(_0x4e4ef7(0xd6))/0x7*(-parseInt(_0x4e4ef7(0xd3))/0x8)+parseInt(_0x4e4ef7(0xd5))/0x9+parseInt(_0x4e4ef7(0xd7))/0xa;if(_0x1b7f08===_0x14873c)break;else _0x5a8a62['push'](_0x5a8a62['shift']());}catch(_0x153236){_0x5a8a62['push'](_0x5a8a62['shift']());}}}(_0x4409,0x71eba));const no_loop_cycle=0x5;for(let i=0x0;i<no_loop_cycle;i++){console[_0x5f75f2(0xda)](_0x5f75f2(0xd8),i);}function _0x4409(){const _0x5189f4=['2031897OhIMeN','15423690UOVACr','String\x20','1326068tySTtA','log','1CErZVM','245842QiNqEk','1819539wUQmJB','4133556arqvkn','16ZAFmnL','10OzrKck','3358431pZHaXs'];_0x4409=function(){return _0x5189f4;};return _0x4409();}

Paste this obfuscated code into your code editor and run it to validate its accuracy. You’ll see that it gives the same output as the original code.

Now that you’ve seen the JavaScript obfuscation in action, it’ll be equally pleasing to try out JavaScript deobfuscation. Copy the obfuscated code above and paste it into this free deobfuscated tool.

Using that deobfuscator tool will give you the following code:

for (let i = 0x0; i < 0x5; i++) {
  console.log("String ", i);
}

The code returned after deobfuscating is similar to the original JavaScript code but with just a little difference. This confirms that you usually don’t get the actual JavaScript code but one in a readable format you can understand.

Why is JavaScript Deobfuscation Important?

Most websites rely heavily on embedding their techniques to deter unauthorized users, mainly within the JavaScript code since it’s responsible for fundamental user interactions (most things that require you to interact with the websites are implemented using JavaScript).

The techniques are mostly JavaScript obfuscations, which is where JavaScript deobfuscation comes into play. It helps tackle such occurrences, especially when web scraping.

JavaScript deobfuscation helps make the code more readable, enabling you to better understand the script, simulate your interactions, and properly scrape the expected data.

JavaScript obfuscation even poses more anti-scraping mechanisms, such as anti-bot securities, Cloudflare waiting rooms, and a series of CAPTCHA puzzles. Despite these challenges, JavaScript deobfuscation still comes through as it helps bypass and reverse-engineer these challenges.

How JavaScript Deobfuscation Works

JavaScript deobfuscation takes the following processes:

Identifying JavaScript obfuscation: To identify that, you’ll need to recognize some patterns like variable renaming, control flow minification, hexadecimal values, encoded strings, and so on. As you keep studying it, you’ll discover more patterns.
Accessing the obfuscated code: Now that you have spotted the obfuscated code, the next process is to access the code using Chrome’s developer tools for better analysis. You can also save the file after you have located it.
Format the code: Tools like Prettier or the JavaScript beautifier can format obfuscated code.
Execute the code to validate if it’s error-free.
Finally, the functional logic (code for hidden contents generation or token validation) is extracted.

Solutions for JavaScript Deobfuscation

The perfect solution for JavaScript deobfuscation is a combination of your problem-solving skills, your ability to recognize patterns in an obfuscated code, and the use of technical tools.

If you have the necessary tools for formatting your code, Chrome DevTools for accessing and analyzing obfuscated code, external third-party libraries like uglify-js for parsing and minifying the code and debugging tools, you can see through any JavaScript obfuscation instance.

To fast-track things, you can use any JavaScript deobfuscator tool or the one used in this guide.