Вы находитесь на странице: 1из 8

Protecting Hybrid Mobile Apps with Ionic and Jscrambler

blog.jscrambler.com/protecting-hybrid-mobile-apps-with-ionic-and-jscrambler

Back to Blog

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. If you're getting started with Ionic, don't miss our
getting started guide.

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

1/8
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,
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.

2/8
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


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

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
3/8
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"
]
},
4/8
"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).

5/8
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.

6/8
Building the application
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

7/8
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.

8/8

Вам также может понравиться