Protecting Hybrid Mobile Apps With Ionic and Jscrambler
You can secure your Ionic applications using Jscrambler by integrating it into the build process. Updated for Ionic v5.
Join the DZone community and get the full member experience.Join For Free
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 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.
This guide will explain how to secure your Ionic application using Jscrambler, integrating it into the build process. At the time of this article's latest update, Ionic was at version 5.4.16 and Cordova at version 9.0.0.
How to Create an Ionic Application
Getting started with Ionic is pretty easy. Firstly, make sure you install Ionic alongside Cordova
We forked the May 22nd, 2020 commit of the App, which will be used during this tutorial.
You can install the Ionic Demo App by running the following command:
Ionic will download and install all the dependencies of the Demo App, based on Angular, 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
If you need more information on getting started, please refer to the official documentation.
The Structure of our Ionic App
The base project structure of our Ionic application is as follows:
config.xmlcontains the configuration of your Ionic application.
srcdirectory features all the source code of the application. The sources are then built and packed into the
wwwdirectory (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:
appsubdirectory contains the modules and components of your application, including the setups for
assetssubdirectory is similar to the
resourcesdirectory, though the files in this folder are transversal to the device size.
pagesdirectory comprises folders for each page of the application. Each folder contains an
typescriptfile responsible for giving the page form and behaviour.
scssfiles which allow for the customization of the application's theme.
Integrating Jscrambler into the Build Process
If you haven't created a Jscrambler account yet, be sure to do so before moving forward.
All of Jscrambler's configuration will reside inside a single file:
.jscramblerrc, which specifies which transformations we wish to use.
The quickest way to get our config file is via the Jscrambler Web App. Once there, create a new app. Now, in the Application Modes tab, select the Language Specifications and application type. Next, select the transformations you want (check the Templates and Fine-Tuning tabs). In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, please refer to our guide.
Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.
Now, let's create a new file named
.jscramblerrc on the Ionic project’s root folder. Open the
jscrambler.json file you just downloaded and copy all its contents to the
.jscramblerrc file. Your final
.jscramblerrc file should look like this:
Because we got this information directly via the Jscrambler Web App, our
jscramblerVersion fields are already filled. If you wish to retrieve them manually, refer to this guide.
params section specifies the transformations that will be used to protect your Ionic app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.
You can also change
filesSrc to match the files you need/want to protect. For our example — and all Ionic 5 apps — we recommend protecting all
main.js files since they usually hold the logic to be concealed.
filesDest: './', the files in our
platform folder will be replaced by their protected version.
The next step of our integration with Jscrambler is installing the Jscrambler API Client.
Now, 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:
“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 make sure that the
.jscramblerrc file that we created before is in our project's root folder.
Building the Application
We are now ready to protect our code and build our application:
The build for Android places the multiple
apk files on
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 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
Then sign the
apk with it:
android-release-unsigned.apk to match the name of your generated unsigned
Finally, optimize the application file using
zipalign. You can find the
zipalign tool under
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
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 check the official docs.
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.
Published at DZone with permission of . See the original article here.
Opinions expressed by DZone contributors are their own.