Protect Angular Code Against Theft and Reverse-Engineering

Disclosure: This post focuses on Jscrambler, a JavaScript protection product to which the author is affiliated (as CTO).

Angular is one of the most popular JavaScript frameworks. Since the Angular 2 release in 2016, Google has released yet 5 new major versions in just 2 years.

This TypeScript-based framework enables developing front-end applications with ease for web and mobile.

With so many new Angular apps being released, we want to ensure that every developer can easily protect their Angular code with the most resilient forms of obfuscation and protection.

This tutorial will explain how to integrate Jscrambler seamlessly into Angular's build process in just a few minutes. If you're relatively new to Angular, be sure to read the official quickstart.

Pre-Requisites

Only two things are needed to properly integrate Jscrambler into the Angular build process: creating an Angular app and configuring Jscrambler. We will highlight both below.

How to create an Angular application

For the purposes of this tutorial, we will be using an Angular 7.0 boilerplate app. If you are protecting an app which is built using Angular 5 or earlier, please refer to our documentation. We also have a tutorial that’s specific to AngularJS.

To get started, we will need to install Angular CLI using npm:

npm install -g @angular/cli

The Angular CLI will download and install all the required dependencies for the latest Angular version — in this case, it's version 7.

Now, we're ready to create our boilerplate app, which we'll use as the basis for this tutorial. Start by creating this new app with the ng command available after the installation:

ng new angular-boilerplate

During the installation process, you will be prompted to decide if you want to add Angular routing and you will also be able to choose a stylesheet format. Pick the options that best suit you and wait for the installation to finish. For the sake of this tutorial, we went with the default options.

Then, we can serve this newly created boilerplate app:

cd angular-boilerplate
ng serve

That's all we need to have a functional Angular app. Check if everything is in place by running the app in the browser. By default, it will run on http://localhost:4200/.

If you need more information on getting started, please refer to the official documentation. You can also run ng help to check all available commands.

The base project structure of our Angular application is as follows:

angular-boilerplate/
|-- angular.json
|-- package-lock.json
|-- package.json
|-- tsconfig.json
|-- tslint.json
|-- dist/
| |-- angular-boilerplate/
|-- e2e/
| |-- src/
|-- node_modules/
|-- src/
| |-- app/
| |-- assets/
| |-- environments/

• angular.json contains all the CLI configuration for all the projects in the workspace. Options for build, serve and test tools that the CLI uses are defined here.
• package.json contains all the configurations which are related to npm such as dependencies, version and scripts.
• The src directory features all the source code of the application. The sources are then built and packed into the dist directory. This is where our protected HTML and JavaScript files will be placed after the build.

How to Configure Jscrambler

If you haven't created a Jscrambler account yet, be sure to do so before moving forward.

All of Jscrambler's configuration will reside inside a single file: .jscramblerrc. As such, we will need to create this file to specify which transformations we wish to use.

The quickest way to achieve this is via the Jscrambler Web App. Once there, create a new app. Now, in the Application Modes tab, select the Language Specifications and application type. Next, select the transformations you want (check the Templates and Fine-Tuning tabs). In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now, let's create a new file named .jscramblerrc on the Angular project’s root folder. Open the jscrambler.json file we just downloaded and copy all its contents to the .jscramblerrc file. After that, we just have to add two new sections to .jscramblerrc, which are filesSrc and filesDest (see below). Your final .jscramblerrc file should look like this:

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./dist/**/*.html",
   "./dist/**/*.js"
 ],
 "filesDest": "./",
 "params": [
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "identifiersRenaming",
     "options": {
       "mode": "SAFEST"
     }
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "deadCodeInjection"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "options": {
       "freq": 1,
       "features": [
         "opaqueFunctions"
       ]
     },
     "name": "functionOutlining"
   },
   {
     "name": "propertyKeysObfuscation"
   },
   {
     "name": "regexObfuscation"
   },
   {
     "name": "booleanToAnything"
   }
 ],
 "areSubscribersOrdered": false,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true,
 "jscramblerVersion": "5.<X>"
}

Because we got this information directly via the Jscrambler Web App, our accessKey, secretKey and applicationId fields are already filled. If you wish to retrieve them manually, refer to our guide.

It's important to note that the params section specifies the transformations that will be used to protect your Angular app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.

You can also change filesSrc to match the files you need/want to protect. For our example — and all Angular apps — we recommend protecting all the .html and .js files. Certainly, with a better understanding of the project, you may identify what’s critical and essential protecting.

By using filesDest: './', the files we send to protect will be overwritten by their protected version.

Integrating Jscrambler in the Build Process

There are two major ways to integrate Jscrambler into the Angular build process: Angular CLI and Webpack. We will cover both below.

Integrating Jscrambler via Angular CLI

Using Angular CLI is likely the most common way of generating your build. We will use our boilerplate app to showcase how to integrate Jscrambler into the build process.

The first step of our integration with Jscrambler is installing the Jscrambler API Client. Simply run:

npm install jscrambler --save-dev

In order to integrate Jscrambler in our application's build process via the Angular CLI, we need to create a CLI hook in the scripts section of package.json. The section should look like this:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "ng build --prod && jscrambler",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

The specific "build:prod": "ng build --prod && jscrambler" hook will trigger the jscrambler command after the build process is finished.

In order for this command to be executable, we need to place the .jscramblerrc file that we created before in our project's root folder.

We are now ready to protect our code and build our application via Angular CLI:

npm run build:prod

This will create the production files on dist/<app-name>.

And you're done! Now all your HTML and JavaScript files are protected with Jscrambler against code theft and reverse-engineering.

Integrating Jscrambler via Webpack

With the ng eject command being deprecated on Angular 6 and above, to use a Webpack build process you must extend the underlying build configurations with an angular-builder.

In this tutorial, we will use the custom-webpack builder but feel free to use any other approach as long as you feel it suits your use case better.

Let’s install the builder:

npm i -D @angular-builders/custom-webpack

After doing so, we shall now create our Webpack config file that will be then merged to the built-in configuration. You might want to have at least 2 different configurations, for development and production builds.

For our production configuration, we will only include the Jscrambler Webpack Plugin which should be installed with the following command:

npm i --save-dev jscrambler-webpack-plugin

To keep it simple, we will leave our development webpack config empty and our final production config looks like this:

const JscramblerWebpack = require('jscrambler-webpack-plugin');

module.exports = {
  plugins: [
    new JscramblerWebpack({
     chunks: ['main']
    })
  ]
};

Note that we are only protecting the main chunk which is where all the application logic is contained.

To start using those new webpack configurations, we shall update the build options on the angular.json file.

...
 "architect": {
   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./extra-webpack.config.js"
        },
        …
     },
     "configurations": {
       "production": {
         "customWebpackConfig": {
           "path": "./extra-webpack.config.prod.js"
         },
         …
         "vendorChunk": true,
   ...

By setting the vendorChunk flag to true, all the vendor content will be generated into a separate bundle file. This is optional.

Updating the package.json build script for production accordingly, it should look as it follows:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

With those steps, production builds npm run build:prod will use the Jscrambler Webpack client to protect your code and use the previously defined .jscramblerrc.

Testing the Protected Angular App

You can give your newly protected app a test run to check if everything has run successfully. To do that, you first need to install a local server where the app can run:

npm install http-server -g

Then, you need to set your Angular app's files to run inside this local server.

http-server ./dist/angular-boilerplate/

Now, as you should be able to see on the terminal, you can run this server on two ports. One which is publicly available, and another which is specific to your machine.

Open the provided URL and your app will start in the browser.

You can now check what your protected files look like. This can be achieved simply by opening the browser's debugger and opening the files from the "Sources" tab. The protected code should look like this:

Conclusion

Angular is a popular and growing framework that empowers developers to create solid web and mobile applications by leveraging the conventions of data binding, services, and dependency injection.

If you're building apps which need to be protected against code theft, reverse-engineering, piracy, licensing violations or even malware injections, Jscrambler is a vital addition.

As we've shown, integrating Jscrambler into Angular's build process is straightforward. If you're in need of some further assistance, feel free to contact us!

Previously published at https://blog.jscrambler.com/how-to-protect-angular-code-against-theft-and-reverse-engineering/