Protecting Your NativeScript Source Code with Jscrambler

Last updated on: February 22nd, 2021

Tested with NativeScript versions 6.2.2 and 6.3.3.

NativeScript is an open source framework for building truly native cross-platform mobile apps using JavaScript — which enables sharing and maintaining a single code base across Android and iOS deployments.

Jscrambler is officially recommended by Progress Telerik as the solution of choice to protect NativeScript applications.

In this article, we’ll look at how you can integrate Jscrambler into your NativeScript app development workflow. This will enable you to protect your JavaScript source code, through a combination of advanced obfuscation, code locks, anti-tampering, and anti-debugging.

Quoting the NativeScript team when looking at source code protected with Jscrambler:

Good luck figuring out what’s going on there. And even if you run this code through a beautifier or formatting tool, you’ll still have a heck of a time deciphering anything.

Pre-Requisites

In order to properly integrate Jscrambler into your NativeScript build process, there are two things we need to do first: creating a NativeScript app and configuring Jscrambler. Let's go through those steps.

Creating Your NativeScript Application

If you are quite new to NativeScript, feel free to check our "Introduction to NativeScript" article before moving forward. Skipping right ahead, let's use the official "NativeScript Marketplace Demo" as an example:

git clone --depth 1 https://github.com/JscramblerBlog/nativescript-marketplace-demo.git

Now, let's install all app dependencies using npm:

cd nativescript-marketplace-demo
npm install

The (simplified) base project structure of our NativeScript application is as follows:

nativescript-marketplace-demo/
|-- firebase-database.json
|-- FIREBASE.ms
|-- firebase.nativescript.json
|-- package-lock.json
|-- package.json
|-- references.d.ts
|-- tsconfig.json
|-- tsconfig.tns.json
|-- webpack.config.js
|-- app/
|-- assets/
|-- hooks/
|-- node_modules/
|-- platforms/
| |-- android/
| | |-- app/
| | | |-- build/

• package.json contains all the configurations which are related to npm such as dependencies, version and scripts.

• The app directory features all the source code of the application. The sources are then built and packed into the platforms directory. This is where our protected HTML and JavaScript files will be placed after the build.

And this is pretty much it in terms of our NativeScript app. Let's move forward to protecting it with Jscrambler.

Installing the Jscrambler Plugin

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

Jscrambler’s NativeScript integration is done through a webpack plugin. So if you haven’t already, go ahead and install the NativeScript webpack plugin in your app. If all goes well, the installation should be as easy as running the following command.

npm install --save-dev nativescript-dev-webpack

NOTE: If you run into issues setting up webpack in your NativeScript app, the NativeScript community on StackOverflow is probably the best way to get help.

Once you have webpack installed, you’ll next want to install the Jscrambler webpack plugin.

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

After that, we need to set Jscrambler’s configuration. The quickest way to get a ready-to-use config file is via the Jscrambler Web App. After creating your account and finishing the Jscrambler demo, create a new app. Now, you can select a template in the Templates tab and/or pick individual transformations in the Fine-Tuning tab. In this tutorial, we'll be using the Obfuscation template. Now, we simply download the jscrambler.json file with this configuration (as shown below) and place it in our app’s root folder.

Your final jscrambler.json file should look like this:

{
  "keys": {
    "accessKey": "YOUR ACCESS KEY HERE",
    "secretKey": "YOUR SECRET KEY HERE"
  },
  "applicationId": "YOUR APPLICATION ID HERE",
  "params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "options": {
        "mode": "SAFEST"
      },
      "name": "identifiersRenaming"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "features": [
          "opaqueFunctions"
        ],
        "freq": 1
      },
      "name": "functionOutlining"
    },
    {
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      },
      "name": "propertyKeysObfuscation"
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "applicationTypes": {
    "webBrowserApp": false,
    "desktopApp": false,
    "serverApp": false,
    "hybridMobileApp": true,
    "javascriptNativeApp": false,
    "html5GameApp": false
  },
  "languageSpecifications": {
    "es5": true,
    "es6": false,
    "es7": false
  },
  "useRecommendedOrder": true,
  "jscramblerVersion": "6.<X>",
  "tolerateMinification": true
}

NOTE: You may wish to use different transformations based on your use case. Feel free to check out our docs for more details on what each of these settings do.

With your configuration in place, your last step is to add Jscrambler’s webpack plugin in your webpack configuration. To do that, open your webpack.config.js file in the root of your app.

In this file, start by copying and pasting these two lines of code at the top, which imports the plugin itself and makes it available to use.

const JscramblerWebpack = require("jscrambler-webpack-plugin");
const jscramblerConfig = require("./jscrambler.json");

Next, scroll down in the same webpack.config.js file until you find the Plugins array. To activate the Jscrambler plugin, you need to add the following entry to that array:

new JscramblerWebpack(Object.assign({}, jscramblerConfig, {
    chunks: ["bundle"]
})),

And with that, you are ready to protect your NativeScript app with Jscrambler.

Building the Protected App

To protect your app build using Jscrambler, all you have to do is run one of the npm scripts that build NativeScript apps with webpack enabled:

tns build ios --bundle 

or

tns build android --bundle 

After the build process completes, you’ll find the build APK file inside the platforms folder, specifically on platforms/<android|ios>/app/build/outputs/apk/debug. You can check the resulting code by extracting this APK file and navigating to assets/app, where you'll find the bundle.js file that was bundled through webpack and then protected by Jscramber. This file should look like this:

Final Thoughts

As you saw, integrating Jscrambler with NativeScript is fairly simple thanks to the Jscrambler webpack plugin.

With the set of transformations we selected, we've successfully concealed the source code of our app with the most advanced obfuscation techniques available today. This will make it extremely hard for anyone to reverse engineer this code and, thanks to Jscrambler's Code Hardening feature, this protection is completely up-to-date and resilient against reverse engineering tools and techniques.

If you wish to increase the potency and resilience of your protected code further, you can use additional security layers such as Code Locks and Self-Defending. These will ensure that your code has anti-debugging and anti-tampering features.

As you know, Jscrambler comes with premium support, so be sure to contact us if you have any questions!