Thursday 16 April 2020

How do you make JavaScript hard to read? Obfuscating & de-obfuscating

Everyone wants to secure their code. So that no one can copy it and use it for commercial purposes without permission. But do JavaScript code hiding really works? Lets see.
obfuscate and deobfuscate js



JavaScript is a client side scripting language. It executes the JS code when runtime environment is available(eg. Browser). That means JavaScript is executed on browser. Hence the JS codes comes to the browser and runs, then we able to see the website.
Anything which comes to client side can be stored into local storage.
That means JS is easily accessible. Then there are chances of copying and using your JS code.

Current Scenario
Are there any copyright laws that protect a coders code? Is there any kind of protection available?
Yes! You are the copyright holder of your code and can get a license. This is legal method. But below I've discussed technical method that you can use.
Now lets see how you can encrypt the JavaScript so that other people can't be able to view or use it.

1. Javascript Obfuscator


JavaScript obfuscator is a great tool when it comes to hiding your code. Just go to below sites and paste your JS code and click 'Obfuscate'.
JS obfuscator with additional options
  1. Obfuscator.io
  2. javascriptobfuscator.com
Obfuscated JS will look something like below.
var _0x57c1=['log','Hello\x20World!'];(function(_0x330ad4,_0x57c1ca){var _0x128687=function(_0x434539){while(--_0x434539){_0x330ad4['push'](_0x330ad4['shift']());}};_0x128687(++_0x57c1ca);}(_0x57c1,0x13a));var _0x1286=function(_0x330ad4,_0x57c1ca){_0x330ad4=_0x330ad4-0x0;var _0x128687=_0x57c1[_0x330ad4];return _0x128687;};function hi(){console[_0x1286('0x0')](_0x1286('0x1'));}hi();
Now What is that JavaScript Obfuscation?
Obfuscation is the process of methodically going through straight-forward source code, renaming its variables, transforming and rearranging the code, hiding the original algorithm, data structures or the logic of the code, all with the goal of making it virtually impossible to read and understand from prying eyes but working exactly the same way.
With JavaScript Obfuscator, JavaScript code will become impossible to understand thus preventing anyone to steal and modify it.
These tools will rename all variables into complex names and sometimes it does pack that functions too.

2. JS Packer


The tool below will pack the JavaScript into a function such that it becomes hard to read.

Enable base64 encode so that code looks pretty hard to read.
JS packer

3. HTML & JS  Obfuscator

This tool will make your whole document - HTML, CSS and JavaScript unreadable. Observer will not even find any HTML tag. The obfuscated code will only work if JS is enabled in the browser.
This tool will use unescape() , which is deprecated in JavaScript. You can use decodeURI() or decodeURIComponent() instead.

Is it really worth it?

Now that you've learned how to compress JavaScript, let me tell you its far different than minifing. Minifying is the process to minify the JS or any other code to make it load faster(by making its size small). A lot of sites including Facebook and Google minify their code. You can try minifying your blog pages so that they load faster.

So obfuscation really worth it?

My answer would be NO. Its because it sometimes just make the code longer unnecessary. It only blocks anyone from having a quick glance to it. If anyone is serious about looking into your code, he can de-obfuscate it as explained below.

De-Obfuscating JavaScript code


When comes to de-obfuscating, there are many tool on the web. But I personally use the following tool. It works on almost every cases mentioned above.
  • beautifier.io (will not only de-obfuscate, but will beautify it too!)
The video below quickly shows how to obfuscate and de-obfuscate your JavaScript code(1min watch).


If you liked this post, mind sharing it :)

0 Please Share a Your Opinion.:

Comment something useful and creative :)