JavaScript Obfuscation - Protects JavaScript Code From Stealing
The obfuscation in JavaScript is a technique of encoding the JavaScript code into an unreadable format. It makes the code hard to understand and reverse engineer.
As we know, the JavaScript code is fetched from the server and rendered on the client-side by the browser. Therefore, this can be easily accessed and copied by anyone using the inspect tool inside the browser.
This is an issue since we don’t want everyone to view our written code. And it can also cause a security risk since if an attacker finds a vulnerability inside your JavaScript code; the website can easily be compromised.
This mostly happens when a website or web app does not have a backend. Its always recommended to keep the important logic at the backend (server-side) and never send it to the client-side.
But in some cases, you might have to send some critical part of the code to the client side. The goal of obfuscation of JavaScript code is to encrypt such code into a format that a human cannot understand.
In this way, even if the client can access your code, they may not understand it, and even if they copy the code, they may not be able to modify it. Below we have a JavaScript code snippet.
console.log('Hello World!');
After the above code is obfuscated, this is how it will look like, but you can hardly understand anything. If you run this code directly inside your browser, it will also give you the same output as the previous code.
var _0xf14d =
['\x48\x65\x6C\x6C\x6F\x20\x57\x6F\x72\x6C\x64\x21', '\x6C\x6F\x67'];
console[_0xf14d[1]](_0xf14d[0])
Output:
Hello World!
This process may not secure your code 100%, but it is better to have something in place rather than nothing. It is one of the security measures you could take to enhance your website’s security.
How to Obfuscate a JavaScript Code
Many tools that can help convert the code into an unreadable format are available online, and they allow you to perform an obfuscation process on your JavaScript code. Below are some of the obfuscation tools you can use to encode your JavaScript code.
JavaScriptObfuscator.com
This is a free website where you can obfuscate your JavaScript code. This website encodes the website into a smaller encoded string.
The only drawback of this website is that it does not encode every part of the code. And because of this, it can be a little easier to guess the code that has been obfuscated.
Obfuscator.io
The obfuscator.io is a free and open-source website that allows you to obfuscate every part of the JavaScript code. This will generate a large output string of characters, making the code very difficult to guess and reverse engineer.
Output:
function _0x2b7f(_0x4b6c11,_0x315769){var _0x1dc05a=_0x1dc0();return _0x2b7f=function(_0x2b7f7e,_0x228a95){_0x2b7f7e=_0x2b7f7e-0x64;var _0x45187e=_0x1dc05a[_0x2b7f7e];return _0x45187e;},_0x2b7f(_0x4b6c11,_0x315769);}(function(_0x5dd9bf,_0x334784){var _0xeea2f6=_0x2b7f,_0x3165e7=_0x5dd9bf();while(!![]){try{var _0x2b0404=parseInt(_0xeea2f6(0x6b))/0x1+parseInt(_0xeea2f6(0x6c))/0x2*(-parseInt(_0xeea2f6(0x66))/0x3)+-parseInt(_0xeea2f6(0x6d))/0x4+-parseInt(_0xeea2f6(0x6a))/0x5+-parseInt(_0xeea2f6(0x64))/0x6*(parseInt(_0xeea2f6(0x65))/0x7)+parseInt(_0xeea2f6(0x67))/0x8+parseInt(_0xeea2f6(0x69))/0x9;if(_0x2b0404===_0x334784)break;else _0x3165e7['push'](_0x3165e7['shift']());}catch(_0xc4f2f5){_0x3165e7['push'](_0x3165e7['shift']());}}}(_0x1dc0,0x58929));function myFun(){var _0x7d73e6=_0x2b7f;console[_0x7d73e6(0x68)]('Hello\x20World!');}myFun();function _0x1dc0(){var _0x35de3a=['127722huaALJ','119OpLtUQ','906fXgONm','3312880EZLkNB','log','11402298dsXQQu','129125FyqrTT','11454lIlZsK','1922GQtaJF','2607068kFkiIM'];_0x1dc0=function(){return _0x35de3a;};return _0x1dc0();}
To obfuscate the JavaScript code, copy it and paste it into the input box shown in the illustration above and press the Obfuscate
button.
Jscrambler.com
Jscrambler.com is another website that can help you to obfuscate the JavaScript code. This website will also generate a large output string of characters which can be difficult to copy and reverse engineer.
You need to create an account on this website to get started, and then only you can use this tool. The only concern is that it’s a paid service and the website also requires you to have a business email account.
After you log in to the Jscrambler website, click on the box below to create an app.
Then give an app any name and click on the create button.
Click on the Protect App
button, which will bring you to a new page.
Now click on the add button to create a JavaScript file. Then give it a name and click on create.
Here, you can paste the JavaScript code you want to obfuscate and click on the Protect App
button.
This will obfuscate your JavaScript code.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn