In this post you will learn about Javascript obfuscation and minification.

They will steal your code!

From time to time you can hear from your boss or your client "Javascript is visible for everybody. People can steal it.".

It is completely true that any person can download from our production website Javascript, CSS and HTML. This is why a lot of people think that anybody can steal your code and want to protect it somehow.

You can really jump to any website and download client files

But it is not that bad because they can steal only client side files and it will be minified code. You code won't be easily readable and will look like this

var r = n("CcnG")
  , o = n("Ip0R")
  , i = (n("vWSW"),
r.nb({
    encapsulation: 2,
    styles: [],
    data: {}
}));
function u(t) {
    return r.Ib(0, [(t()(),
    r.pb(0, 0, null, null, 1, "li", [], null, null, null, null, null)), (t()(),
    r.Gb(1, null, [" ", " "]))], null, function(t, e) {
        t(e, 1, 0, e.context.$implicit)
    })
}

You still can read this code and reverse engineer it but it takes a lot of time and effort.

But most importantly, nobody can steal your backend code.

Your server side code is not visible in browser and nobody can steal it from there. The result of backend code is just a web page. But we store all our secure data like users, emails, payments in the backend inside database.

You database is the most important thing which must be secured.

It doesn't really matter if somebody will steal your client side code because this is just rendering part of your application. Sure if we are talking about single page application, we have lots of logic on the client. But essentially what is really important for us is user data inside database.

How to secure the code

As I already said it is not that bad. But the question is if we can really prevent stealing of our Javascript code.

Your production code must always be minified. This is the standard.

It is not only to prevent stealing the code but because your code must be loaded faster and must work faster. This is why for the production website we typically minify all our client files (HTML, CSS, Javascript).

What is also possible to do with your Javascript code is obfuscate it. There are lots of tools online which can obfuscate your code.

Here is our initial Javascript. This is just a single property.

As you can see we get lots of symbols, conditions and loops that are not needed inside our code. This makes the out code much more difficult to reverse engineer.

But actually you can find some websites which try to deobfuscate your code and get normal code back. Realistically that don't work at all.

As you can see this is nothing close to the initial code.

You can deobfuscate code but you get too much code which is not needed for the project back.

Do you need it?

Now the question is if you need to obfuscate your code at all. The answer here is NO, you should not obfuscate your code. In all companies where I worked and in lots of other big companies I never heard that people obfuscate their code. Why?

With obfuscated code your bundle size will increase a lot

But the goal of any developer is to have a smaller bundle size so the website works faster. And you can't really do that if you have a bundle of 1mb which is obfuscated in 10mb. It simply doesn't make any sense because for the browser it makes more time to download and parse your files.

With obfuscated code your bundle size is much bigger and performance is much slower.

So obfuscation is exactly the opposite of what we are trying to do every day. It doesn't allow us to make our website faster. And most importantly it doesn't make a lot of sense to protect your client. You must really take your time to protect your server, your backend and your user data inside database.

Bonus: Learn to read

Here is my bonus point for you as a developer. If you want to improve your development skills you must know how to read your minified in production. Not obfuscated code but just minified.

Typically you have a situation that you have some project where you have access to the source code and then this project already runs in production.

import { Component, OnInit } from "@angular/core";

import { UserService } from "./core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.populate();
  }
}

And for example do don't have any source maps inside your application. This is why to debug a bug you need to find the piece of code in your application which probably has an error (like code that you can see about) and corresponding part in minified code.

In Chrome we can look for Javascript file on the left and try to find this part of code on the right.

Don't forget to click on prettify symbol so Chrome can intend the code correctly.

As you can see it is completely possible to read minified code. Here we found exactly the same piece of code. Yes it is much more difficult to understand but it will help you to debug tremendously. Now we can put a breakpoint inside this line of code and debug some properties in this line to understand where our bug is. This is much more important for you as a developer than code obfuscation and code protection.

And actually if you want to learn Angular with NgRx from empty folder to a fully functional production application make sure to check my Angular and NgRx - Building Real Project From Scratch course.