Integrating Jscrambler with Ionic

Last updated: September 23rd 2024

Framework versions tested: 5.4.16 ● 7.0.3 ● 7.2.0 ● 8.3.1

Introduction

Ionic is an open source framework designed to build native-like mobile web applications which target the major mobile operating systems.

Ionic is built upon Apache's Cordova and is framework-agnostic, meaning that it can be used with any front-end framework such as Angular, Vue, Preact, React or jQuery.

Example Ionic App

For the purposes of this tutorial, we will be using the Photo-Gallery basic app the Ionic docs suggest.

Integrating Jscrambler with Ionic

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 .jscramblerrc 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>,
 "filesSrc": [
   "./www/*.js"
 ],
 "filesDest": "./",
 "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 Ionic Build Process

You can integrate Jscrambler into the React build process with the CLI.

Install the Jscrambler API Client:

npm install jscrambler --save-dev

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",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "lint": "ng lint",
  "ionic:build:after": "jscrambler"
}

The "ionic:build:after”: “jscrambler” hook will trigger the jscrambler command after the build process is finished.

Build the application:

• For capacitor:

ionic capacitor build android --prod --release

• For cordova:

ionic cordova build android --prod --release

There you go. The build for Android places the multiple APK files on android/app/build/outputs/apk.

Known Problems

There are no known problems integrating Jscrambler with Ionic.