Integrating Jscrambler with NativeScript

Last updated: 23 Set 2024

Framework versions tested: 6.2.2 ● 6.3.3 ● 8.4.7 ● 8.4.7 ● 8.8.2

Introduction

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 NativeScript as the solution of choice to protect NativeScript applications.

Example NativeScript App

For the purposes of this tutorial, we will be using the official "NativeScript React Template" as an example.

Integrating Jscrambler with NativeScript

If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide, which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.

To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using the Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named jscrambler.json and placed on the project's root folder. If you choose to try the following example, just make sure to fill the missing information: accessKey, secretKey and applicationId.

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "globalVariableIndirection"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "stable",
  "tolerateMinification": false,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Integrating Jscrambler in the Build Process

Jscrambler’s NativeScript integration is done through a webpack plugin. So, if you haven’t already, install the NativeScript webpack plugin in your app.

npm install --save-dev @nativescript/webpack

Next, install the Jscrambler webpack plugin:

npm install --save-dev jscrambler-webpack-plugin

Then, open the webpack.config.js file and place these two lines of code at the top:

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

As a last step, add the following entry to the plugins array of webpack.config.js:

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

If you are using webpack-chain, then add the plugin inside of the chainWebpack arrow function:

config.plugin('JscramblerWebpack').use(JscramblerWebpack, [{
    ...jscramblerConfig,
    chunks: ['bundle'],
}]);

Build the application:

ns build ios --bundle

or

ns build android --bundle

There you go. Jscrambler is now integrated in your build process and you’ll find the build APK file inside the platforms folder, specifically on platforms/<android|ios>/app/build/outputs/apk/debug.

Known Problems

There are no known problems integrating Jscrambler with NativeScript.