Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What Is JavaScript Obfuscation and When Is it Used?

DZone's Guide to

What Is JavaScript Obfuscation and When Is it Used?

This quick primer into JavaScript obfuscation will help you determine what it is, what its benefits are, what separates it from encryption, and where it is often seen.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

In this post, we will discuss more obfuscation, where it is used, and its advantages.

Image title

What Is Obfuscation?

Obfuscation is the deliberate act of creating obfuscated code, i.e. source or machine code that is difficult for humans to understand. It is something similar to encryption, but a machine can understand the code and is able to execute: it.

The URLs we will use to obfuscate JavaScript code:

  1. http://closure-compiler.appspot.com/home
  2. http://www.danstools.com/javascript-obfuscate/

Obfuscation using danstools.

Original code:

function hello(name) {
    console.log('Hello, ' + name);
}
hello('New user');


After obfuscation:

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d=k||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k)}}return p}('3 0(1){2.4(\'5, \'+1)}0(\'7 6\');',8,8,'hello|name|console|function|log|Hello|user|New'.split('|'),0,{}))


The output of both programs will be the same:

Image title

Obfuscation can be used to hide business logic from the outside world, and it will drastically reduce the size of the file, so data transfers between server and client will be fast.

Minification is also a type of obfuscation where empty spaces are removed and variables will be renamed.

Examples:

Why Are Open Source Projects Obfuscated?

  • Code size will be reduced
  • In JavaScript, download time will reduce

Most open source JavaScript projects are minified to reduce download time and code size. During minification, a minified file and a map file will get generated. Using a map file, actual code can be retrieved. The map file for the above Angular file will is here: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js.map

Why Obfuscation?

  • Code size will be reduced
  • Hide the business logic and your code from others
  • Reverse engineering is highly difficult
  • In JavaScript, download time will be reduced

Example:

Obfuscation Example


Obfuscation == Encryption?

No, obfuscation != encryption.

  • In JavaScript, the browser can’t execute encrypted code, whereas the browser will execute obfuscated code.
  • Encrypted code always needs decryption to be executed.
  • The obfuscated code doesn’t require deobfuscation to execute.

Bottom line, it is good to obfuscate JavaScript code.

If you are developing enterprise application, Then I believe you can use a product like Jscrambler for obfuscating your code. Reverse engineering of obfuscated code is really difficult hence we can hide the business logic and core logic from outside world.

Next article: Start Using Map and Set In Your Javascript Application.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
obfuscation ,web dev ,javascript ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}