: Disclosure This post focuses on , a JavaScript protection product to which the author is affiliated (as CTO). Jscrambler is one of the most popular JavaScript frameworks. Since the Angular 2 release in 2016, Google has released yet . Angular 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, with the most resilient forms of obfuscation and protection. we want to ensure that every developer can easily protect their Angular code 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: and . We will highlight both below. creating an Angular app configuring Jscrambler How to create an application Angular For the purposes of this tutorial, we will be using an boilerplate app. If you are protecting an app which is built using Angular 5 or earlier, please refer to our . We also have a that’s specific to AngularJS. Angular 7.0 documentation tutorial To get started, we will need to install Angular CLI using npm: npm install -g @angular/cli The will download and install all the required dependencies for the latest Angular version — in this case, it's version 7. Angular CLI 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 command available after the installation: ng 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 app. Check if everything is in place by running the app in the browser. By default, it will run on . Angular http://localhost:4200/ If you need more information on getting started, please refer to the . You can also run to check all available commands. official documentation ng help The base project structure of our application is as follows: Angular angular-boilerplate/ |-- angular.json |-- package-lock.json |-- package.json |-- tsconfig.json |-- tslint.json |-- dist/ | |-- angular-boilerplate/ |-- e2e/ | |-- src/ |-- node_modules/ |-- src/ | |-- app/ | |-- assets/ | |-- environments/ 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. angular.json contains all the configurations which are related to npm such as dependencies, version and scripts. package.json The directory features all the source code of the application. The sources are then built and packed into the directory. This is where our protected HTML and JavaScript files will be placed after the build. src dist How to Configure Jscrambler If you haven't created a yet, be sure to do so before moving forward. Jscrambler account All of Jscrambler's configuration will reside inside a single file: . As such, we will need to create this file to specify which transformations we wish to use. .jscramblerrc The quickest way to achieve this is via the . Once there, create a new app. Now, in the tab, select the Language Specifications and application type. Next, select the transformations you want (check the and tabs). In this tutorial, we'll be selecting the template. If you need help with these steps, please refer to our . Jscrambler Web App Application Modes Templates Fine-Tuning Obfuscation guide Now, we simply have to download a , which will be used only for quickly getting the required settings. JSON file with all this configuration Now, let's create a new file named on the Angular project’s root folder. Open the file we just downloaded and copy all its contents to the file. After that, we just have to add two new sections to , which are and (see below). Your final file should look like this: .jscramblerrc jscrambler.json .jscramblerrc .jscramblerrc filesSrc filesDest .jscramblerrc { "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 , and fields are already filled. If you wish to retrieve them manually, refer to our . accessKey secretKey applicationId guide It's important to note that the section specifies the transformations that will be used to protect your Angular app. , by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations . params These can be hand-picked by you here You can also change to match the files you need/want to protect. For our example — and all Angular apps — we recommend protecting all the and files. Certainly, with a better understanding of the project, you may identify what’s critical and essential protecting. filesSrc .html .js By using , the files we send to protect will be overwritten by their protected version. filesDest: './' Integrating Jscrambler in the Build Process There are two major ways to integrate Jscrambler into the Angular build process: and . We will cover both below. Angular CLI Webpack 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 is installing the . Simply run: Jscrambler Jscrambler API Client 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 section of . The section should look like this: scripts package.json "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 hook will trigger the command after the build process is finished. "build:prod": "ng build --prod && jscrambler" jscrambler In order for this command to be executable, file that we created before in our project's root folder. we need to place the .jscramblerrc 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 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. ng eject In this tutorial, we will use the builder but feel free to use any other approach as long as you feel it suits your use case better. custom-webpack 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 which should be installed with the following command: Jscrambler Webpack Plugin 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'] }) ] }; which is where all the application logic is contained. Note that we are only protecting the main chunk To start using those new webpack configurations, we shall update the build options on the file. angular.json ... "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 flag to true, all the vendor content will be generated into a separate bundle file. This is optional. vendorChunk Updating the build script for production accordingly, it should look as it follows: package.json "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 will use the Jscrambler Webpack client to protect your code and use the previously defined . npm run build:prod .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 is a popular and growing framework that by leveraging the conventions of data binding, services, and dependency injection. Angular empowers developers to create solid web and mobile applications 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/
