Last Updated on: September 25th, 2018

General Note: At the time of this article's latest update, Ionic was at version 4.0.6 and Cordova at version 8.0.0.

Introduction

Ionic is an open source framework designed to build native-like mobile web applications which target the major mobile operating systems. Targeting different systems with the same codebase speeds up the development process while reducing the time to market and maintainability efforts.

Ionic is built upon two major frameworks, Apache's Cordova and Google's Angular. It has a great ecosystem behind it, with comprehensive documentation and a marketplace where you can find many themes and plugins to get you started.

This guide will explain how to secure your Ionic 4 application using Jscrambler, integrating it in the build process.

How to create an Ionic application

Getting started with Ionic is pretty easy. Firstly, make sure you install Ionic alongside Cordova.

npm install -g cordova ionic  

For the purposes of this tutorial, we will be using the official Ionic Demo App as a template. For further information on templates, see the official docs.

We forked the Aug 30, 2018 commit of the App, which will be used during this tutorial.

You can install the Ionic Demo App by running the following command:

ionic start myConferenceApp https://github.com/JscramblerBlog/ionic-conference-app  

Ionic will download and install all the dependencies of the Demo App, based on Angular 5, which uses TypeScript.

That's all we need to have a functional Ionic app. Check if everything is in place by running the app in the browser. By default, it will run on localhost on port 8100.

cd \myConferenceApp  
ionic serve  

If you need more information on getting started, please refer to the official documentation.

The structure of our Ionic application

The base project structure of our Ionic application is as follows:

myConferenceApp/  
|-- config.xml
|-- platforms/
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
|-- resources/
|-- src/
| |-- app/
| |-- assets/
| |-- environments/
| |-- theme/
|-- www/

• config.xml contains the configuration of your Ionic application.

• The www directory contains all the source code and assets of the application such as HTML, CSS, and JavaScript.

• The src directory features all the source code of the application. The sources are then built and packed into the www directory (which Cordova uses to deploy to each platform).

The structure of the src directory depends on the build tool being used. Some boilerplates use webpack, a module bundler which allows for a great level of customization when building your app. The official Ionic templates, however, discontinued their gulp build process in favor of a custom one, ionic-app-scripts.

If you're using the new build process with ionic-app-scripts, then your src directory should follow a structure such as this:

|-- src/
| |-- app/
| | |-- pages/
| | | |-- page1/
| | | |-- page2/
| |-- assets/
| |-- environments/
| |-- theme/

• The app subdirectory contains the modules and components of your application, including the setups for dev and prod environments.
• The pages directory comprises folders for each page of the application. Each folder contains an html, scss and typescript file responsible for giving the page form and behavior.
• The assets subdirectory is similar to the resources directory, though the files in this folder are transversal to the device size.
• The theme folder contains scss files which allow for the customization of the application's theme.

Integrating Jscrambler in the build process

Installing dependencies

The first step of our integration with Jscrambler is the installation of the Jscrambler API Client.

npm install jscrambler --save-dev  

Hooking up Jscrambler

In order to integrate Jscrambler in our application's build process, we need to 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",
  "test": "ng test",
  "lint": "ng lint",
  "precommit": "npm run lint",
  "ionic:build:after": "jscrambler"
}

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

In order for this command to be executable, we need to add a .jscramblerrc file into our project's root folder, which will hold the Jscrambler settings. The file should have the following structure:

{
 "keys": {
   "accessKey": "ACCESS_KEY_HERE",
   "secretKey": "SECRET_KEY_HERE"
 },
 "applicationId": "APP_ID_HERE",
 "filesSrc": [
   "./www/main.js"
 ],
 "filesDest": "./",
 "params": [
  {
    "name": "whitespaceRemoval"
  },
  {
    "name": "dotToBracketNotation"
  },
  {
    "name": "stringConcealing"
  },
  {
    "name": "functionReordering"
  },
  {
    "options": {
      "features": [
        "opaqueFunctions"
      ]
    },
    "name": "functionOutlining"
  },
  {
    "name": "propertyKeysObfuscation"
  },
  {
    "name": "regexObfuscation"
  },
  {
    "options": {
      "features": [
        "opaqueSteps"
      ]
    },
    "name": "controlFlowFlattening"
  },
  {
    "name": "booleanToAnything"
  },
  {
    "name": "identifiersRenaming"
  },
  {
     "options": {
       "options": [
         "tolerateBenignPoisoning"
       ],
       "threshold": 0
     },
     "name": "selfDefending"
   }
 ],
 "areSubscribersOrdered": false,
 "bail": true
 }

After creating the file, you need to edit the following properties:

• "accessKey": "ACCESS_KEY_HERE”
• "secretKey": "SECRET_KEY_HERE”
• "applicationId": "APP_ID_HERE"

You can find both these keys in My Settings on the Web UI (see image below).

To get your applicationId, go to the Web App, create a new app, and check above the text editor:

Feel free to change params, making use of any transformation Jscrambler has to offer. You can find all the transformations available here.

Tip: There's a quick way to get the required keys, applicationID and the params you wish to apply. Simply go to the Web App, create a new app, select the transformations you want, and download the JSON file. Now, you can open it and copy the corresponding sections to the .jscramblerrc file.

For further details on this, please refer to our blog post on how to use the CLI.

You can also change filesSrc to match the files you need/want to protect. For our example — and all Ionic 4 apps — we recommend protecting main.js since this file usually holds the logic to be concealed. You should leave vendor.js file unprotected, since protecting it usually brings no advantage in a protected app.

By using filesDest: './', the files we send to protect will be replaced by their protected version.

Building the application

Note: if you're using Ionic v1, please check out Working with Ionic v1 Annex (found at the end) and then return here. That annex addresses some issues encountered while protecting AngularJS regarding the way dependencies are injected.

We are now ready to protect our code and build our application:

ionic cordova build android --prod --release  

The build for Android places the multiple apk files on platforms/android/app/build/outputs/apk.

Our build command will generate multiple production apk files, each one targeted to different architectures. For the purpose of this tutorial, we will choose the armv7 apk file.

The apk will not run on a device unless it is signed first. If you try to install an unsigned apk then the device will alert for a parsing error.

In order to run it on an Android device, we need to generate a key. If you have JDK installed start by generating a key

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000  

Then sign the apk with it:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name  

Please adjust android-release-unsigned.apk to match the name of your generated unsigned apk file.

Finally, optimize the application file using zipalign. You can find the zipalign tool under path/to/Android/sdk/build-tools/VERSION/zipalign.

zipalign -v 4 android-release-unsigned.apk myProtectedApp.apk  

And you're done! Now you have the app file ready to use.

You can verify if your apk file has the protected assets by using any file extracting application. The files should be placed under assets/www.

If you need further information on how to publish your app, or on how to deploy to iOS (which requires you to register as an Apple Developer) please follow the Ionic publishing guide.

Conclusion

Ionic is an effective framework for creating powerful, responsive and multi-platform applications without the need for native platform knowledge, speeding up the time of development.

By combining the build process with Jscrambler you can have your code protected on a mobile platform by simply adding a hook that executes before building your app, therefore saving you time in the build or deployment process.