Serving a JavaScript file without obfuscation, simply means that the code in the file will be readable by anyone. So if that person understands JavaScript, your source code is public now. So if the JavaScript code works without server interaction, someone could just download the HTML of your page, the resources (JS and CSS) and will obtain the same result locally. So, if the code is readable as well, this person could steal your work and modify it at its will.
Consider the following example of JavaScript (example.js). The code is easily readable by someone that understands JavaScript, we do have a user object that is scoped within a function and there's a public object with methods in the window. In this case, one of the methods allows modifying the user level directly by providing its new level as the first argument:
(function(){
let user = {
level: 2,
username: "OrangeJuice"
};
window.helpers = {
updateUserLevel: function(newLevel){
user.level = newLevel;
},
getUser: function(){
return user;
}
};
})();Now, consider the same code obfuscated with this online obfuscator of JavaScript with a default obfuscation level:
const _0x1fae = ['1657105ujfQrT', '783669zubyer', '2nExDeM', '4643ShsyfD', '658462ySUEuO', 'OrangeJuice', 'helpers', '343VmTHdZ', 'level', '1pimDeL', '43499Rqvyyb', '5039785gBYsCy', '515042fRMLUY'];
const _0x536b = function(_0x2e032f, _0x335d22) {
_0x2e032f = _0x2e032f - 0xc3;
let _0x1fae27 = _0x1fae[_0x2e032f];
return _0x1fae27;
};
(function(_0x38eafd, _0x14ce8f) {
const _0x1bb8d6 = _0x536b;
while (!![]) {
try {
const _0x2d21cf = parseInt(_0x1bb8d6(0xc9)) * -parseInt(_0x1bb8d6(0xcd)) + parseInt(_0x1bb8d6(0xc7)) + parseInt(_0x1bb8d6(0xc5)) * -parseInt(_0x1bb8d6(0xc8)) + -parseInt(_0x1bb8d6(0xca)) + parseInt(_0x1bb8d6(0xcf)) * -parseInt(_0x1bb8d6(0xc6)) + parseInt(_0x1bb8d6(0xc3)) + parseInt(_0x1bb8d6(0xc4));
if (_0x2d21cf === _0x14ce8f) break;
else _0x38eafd['push'](_0x38eafd['shift']());
} catch (_0x4bd5f4) {
_0x38eafd['push'](_0x38eafd['shift']());
}
}
}(_0x1fae, 0xe2bf1), function() {
const _0x1b84be = _0x536b;
let _0x2b2698 = {
'level': 0x2,
'username': _0x1b84be(0xcb)
};
window[_0x1b84be(0xcc)] = {
'updateUserLevel': function(_0x3c3c76) {
const _0x1b5786 = _0x1b84be;
_0x2b2698[_0x1b5786(0xce)] = _0x3c3c76;
},
'getUser': function() {
return _0x2b2698;
}
};
}());Without knowing what the original code looks like, it will be difficult for the one who reads to identify that there's an object in the window named helpers. As mentioned, the special characteristic of the obfuscators is that the code works anyway as expected, if you inject the code into the console, you should be able to interact with the code just like the original one.
Advantages of obfuscating JS
- Prevent people from copying or modifying your code without authorization.
- The obfuscated JavaScript will be way larger and difficult to understand. Most obfuscators use control-flow flattening, an obfuscation technique that splits the source code basic blocks as loops and conditional branches and places them inside a single infinite loop with a switch statement, making the code harder to follow.
- Exact functionality, not because the code is different it will behave differently.
- Debug protection, useful if you don't want people to simply open the console to see what's going on with the JavaScript.
Disadvantages of obfuscating JS
- Although the output JavaScript is harder to read, this doesn't mean that it's impossible. If someone takes enough time, dedication, and knowledge to read it, in the end, he will.
- The speed of your code may be affected especially when using a high obfuscation level.
- The size of your code may increase drastically as well, which may affect the loading times of your webpage. Although usually, if you use GZIP to serve your files, as a big part of the code is repetitive, it may end up well compressed.
When should you obfuscate your JavaScript code?
The main condition to using an obfuscator is that the JavaScript code that can be obtained publicly, shouldn't be read by anyone. I know, it's difficult considering that serving JavaScript from your server makes it immediately public, so the least we can do is to obfuscate it. There are some real-life examples where your JavaScript should be obfuscated obligatorily:
Protect your Theme at Themeforest
Inside an important market of Website Templates, is important to protect your work. In Themeforest, is necessary to have a website that shows a preview of the template that you are trying to sell. This means, that you will serve HTML, CSS, and JS of your work. So if you don't obfuscate your JavaScript, ANYONE could simply download the resources from your website preview and work with that without buying your template. Especially, if you are naive enough to serve the same resources that you include in your template.
Don't publish a preview of your theme at ThemeForest without obfuscating your source code. Some obfuscators offer as well the possibility to lock your JavaScript to a domain. This means, that if your code isn't executed from yourdemowebsite.com, then the code will throw an exception, preventing it from being executed (just perfect for this situation).
Protect JavaScript in-browser games
If you develop videogames in the browser with any JavaScript game engine, then you will surely want to protect the code from being read by script kiddies or someone that's trying to break the rules in your game. It will be surely difficult to understand it, especially because the code of a game is quite complex and larger than any regular JavaScript code that runs on a website.
How to obfuscate your JavaScript code?
There are multiple solutions out there to obfuscate your code, depending on your needs you may:
- Obfuscate JavaScript online: the JavaScriptObfuscator.dev website allows you to obfuscate your JavaScript online, just paste or select multiple files directly from your device and you will obtain the obfuscated version. The advantage of this website is that you have an embedded version of the javascript-obfuscator library on the web. This means that your files aren't uploaded anywhere, they're obfuscated with the power of your own device.
- Integrate obfuscation with building task: nowadays most people use gulp, Webpack, or any bundler to keep their code unified. You may integrate as the last step, the obfuscation of the output files generated by your bundler (after the minifier if you use one, otherwise part of the protection may be removed from the obfuscation just as dead code). You can do it with the javascript-obfuscator module, and there are plugins for the tool that you use: webpack-obfuscator, gulp-javascript-obfuscator, and grunt-contrib-obfuscator. We wrote a tutorial about how to obfuscate your JavaScript code with Node.js here.
If you know another advantage or disadvantage of using an obfuscator to protect your JavaScript code, please let us know in the comment box.
