Angular code obfuscation made easy

If you ever had to code a real-life project, the concern for security was there—or at least should have been. As technologies advance, we can code amazing, robust, high-performance systems within short time schedules, but that also means that malicious people and techniques become more powerful and tricky to overcome. That's why nowadays securing all common breaches is a must when developing systems.

Angular handles a lot of security out of the box: it has its own variable protection system and sanitization to prevent malicious code from running in your app. Another feature is code minification.

Minification vs. Obfuscation

Code minification is a technique that reduces the size of source code by removing unnecessary characters like whitespace and comments, improving the load performance of the source code. This process is common in web development for JavaScript, CSS, and HTML files and, somehow, adds a layer of security by obfuscating the code. Minified code is extremely hard to read, and that's why it is considered some sort of obfuscation. However, tools can de-minify code, making it readable and then reverse-engineerable. This is where obfuscation is useful.

Complementary to minification, code obfuscation is a technique used to make source code difficult to understand and reverse-engineer. This is often used to protect intellectual property, prevent tampering, and deter reverse engineering by making it challenging for attackers to understand the code's logic and identify potential vulnerabilities. It transforms readable code into a more complex and obscure version without altering its functionality. Code obfuscation tools can also add dead code to mislead attackers and make it even more difficult to understand the software codebase.

Well, if you have use for it, let's obfuscate our Angular app.

Webpack Obfuscator

Angular uses Webpack during its bundle phase and has its own default setup to pack the modules you develop. We are going to take advantage of this and customize the way Webpack will bundle your Angular app. First, install these packages:

npm i javascript-obfuscator webpack-obfuscator --save-dev

The javascript-obfuscator is

a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.

while webpack-obfuscator makes use of it as a plugin to provide functionality for Webpack. You can find the JavaScript obfuscator code here and Webpack obfuscator plugin here.

After that, create a custom-webpack.config.js file that will contain the custom configurations we want to apply during our bundle process. Here's a simple one:

var JavaScriptObfuscator = require("webpack-obfuscator");

module.exports = {
  module: {},
  plugins: [
    new JavaScriptObfuscator(
      {
        debugProtection: true,
      },
      ["vendor.js"]
    ),
  ],
};

There are many different config options you can provide for the webpack-obfuscator plugin to fine-tune the output of the obfuscation. This is the simplest one that adds debugProtection to the code, making it difficult to use the console to track down variables and functions of the app.

So far, we set up our config of Webpack. Now we need to use it. We will need one more dependency:

npm i @angular-builders/custom-webpack --save-dev

This will help us integrate the custom Webpack builder with Angular so we can still use the Angular build structure. After installing the package, we only need to change the angular.json file. Search for the build property and add the following:

... 
"builder": "@angular-builders/custom-webpack:browser",
"customWebpackConfig": {
    "path": "./custom-webpack.config.js",
    "replaceDuplicatePlugins": true
}

By replacing the builder from @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser, we will still be able to build for the browser but now can inject our custom Webpack configurations. The customWebpackConfig property sets the reference for the file so Angular can use it.

If everything is properly set, your build command should run normally and the result will be an obfuscated Angular app!

Drawbacks

Be aware, though, that this approach has a drawback on the bundle size. Code obfuscation makes it much more difficult to reverse-engineer the code, but the way it declares the variables uses more characters, leading to an increase in the size of the bundle—almost going in the opposite direction of code minification.

That's it. Be sure to use it with purpose and understand how to tackle the drawbacks of the technique!