How To Protect Your Angular Code using Jscrambler

Let’s look at how to make our Angular code secure.

Angular is a Component based framework used for building Single-page Web Applications using Html and TypeScript. A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.

Why Should we Secure our code? Nowadays, stealing data from another project is very easy and we as developers are struggling to secure our Code. So, to Secure the code we will be configuring Jscrambler in our project.

First, let us create an angular application:

Open your terminal and enter the following Command

ng new Securing-Angular-code

Here the project name is Securing-Angular-code

After creating the project open it in any IDE (intellij, visual studio code etc….). Then open the terminal inside the project and run ng serve to open the project in the browser with http://localhost:4200/

And the source code of the project is:

Integrating Jscrambler using Angular CLI:

Now Install the Jscrambler using the following command in your angular project.

npm install jscrambler --save-dev

Using the Angular CLI, we can incorporate Jscrambler into the build process of our application.

Add the build command in your package.json:

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

Now, run this command to build

npm run build:prod

This will create the build file inside dist/Securing-Angular-code. This is how we can integrate JScrambler into our project.

let us configure Jscrambler in our Angular project:

Firstly, create a JScrambler Account at this link — https://jscrambler.com/

In the JScrambler we can create a free account with a business email

After creating your Jscrambler account, you need to select whether to protect your project code Integrity or webpage Integrity. To secure webpage Integrity, you need to upgrade your plan.

Inside your new app, on the right side of your Jscrambler, you need to select templates -> obfuscation, after selecting you need to click on the settings icon beside the protected app. By clicking that down you will have download settings in JSON.

After downloading the JSON file you will have the access key and secret key in that file.

All of Jscrambler’s configurations will be inside a single file: .jscramblerrc . At the root of your angular project create a file called .jscramblerrc.

Now copy all the content from the downloaded JSON file to the .jscramblerrc file which is created in your angular application's root and add the below text.

"filesSrc": [    "./dist/**/*.html",    "./dist/**/*.js"  ],  "filesDest": "./",

Now after adding all the content to your project, type ng build (it builds and then the build file will be stored in the root of the project inside dist/Securing-Angular-code).

Test Our project:

To Check, you first need to install a local server where the app can run:

npm install http-server

The terminal type is as follows:

cd dist/Securing-Angular-code 

Then,

http-server

The output after building and adding the JScrambler in angular project

These are the steps to Secure our Angular code.

Bhargavi
Bhargavi is working as a front-end developer and UI/UX designer. She works on building the best user experience and end-to-end technical deliverables from feature creation. You can reach out to her by Clicking Here.