This article is a major update of our previous tutorial . At the time of this article’s latest update, was at version 4.0.6 and at version 8.0.0. Ionic Cordova Introduction 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 and Google’s . It has a great ecosystem behind it, with comprehensive and a where you can find many themes and plugins to get you started. Ionic Cordova Angular documentation marketplace This guide will explain how to secure your application using , integrating it in the build process. Ionic 4 Jscrambler How to create an Ionic application Getting started with is pretty easy. Firstly, make sure you install alongside . Ionic Ionic Cordova npm install -g cordova ionic For the purposes of this tutorial, we will be using the official as a template. For further information on templates, see . Ionic Demo App the official docs We the Aug 30, 2018 commit of the App, which will be used during this tutorial. forked You can install the Ionic Demo App by running the following command: ionic start myConferenceApp https://github.com/JscramblerBlog/ionic-conference-app will download and install all the dependencies of the Demo App, based on , which uses . Ionic Angular 5 TypeScript That’s all we need to have a functional app. Check if everything is in place by running the app in the browser. By default, it will run on on port . Ionic localhost 8100 cd \myConferenceAppionic 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 application is as follows: Ionic myConferenceApp/|-- config.xml|-- platforms/| |-- android/| |-- windows/| |-- ios/|-- plugins/|-- resources/|-- src/| |-- app/| |-- assets/| |-- environments/| |-- theme/|-- www/ contains the configuration of your application. config.xml Ionic The directory contains all the source code and assets of the application such as HTML, CSS, and JavaScript. www The directory features all the source code of the application. The sources are then built and packed into the directory (which uses to deploy to each platform). src www Cordova The structure of the directory depends on the build tool being used. Some boilerplates use , a module bundler which allows for a great level of customization when building your app. The official templates, however, discontinued their build process in favor of a custom one, . src webpack Ionic gulp ionic-app-scripts If you’re using the new build process with , then your directory should follow a structure such as this: ionic-app-scripts src |-- src/| |-- app/| | |-- pages/| | | |-- page1/| | | |-- page2/| |-- assets/| |-- environments/| |-- theme/ The subdirectory contains the modules and components of your application, including the setups for and environments. app dev prod The directory comprises folders for each page of the application. Each folder contains an , and file responsible for giving the page form and behavior. pages html scss typescript The subdirectory is similar to the directory, though the files in this folder are transversal to the device size. assets resources The folder contains files which allow for the customization of the application's theme. theme scss Integrating Jscrambler in the build process Installing dependencies The first step of our integration with is the installation of the . Jscrambler API Client Jscrambler npm install jscrambler --save-dev Hooking up Jscrambler In order to integrate in our application’s build process, we need to create a CLI hook in the section of . The section should look like this: Jscrambler scripts package.json “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 hook will trigger the command after the build process is finished. “ionic:build:after”: “jscrambler” jscrambler In order for this command to be executable, we need to add a file into our project's root folder, which will hold the Jscrambler settings. The file should have the following structure: .jscramblerrc {"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 on the Web UI (see image below). My Settings To get your , go to the Web App, create a new app, and check above the text editor: applicationId Feel free to change , making use of any transformation has to offer. You can find all the transformations available . params Jscrambler here There’s a quick way to get the required keys, and the you wish to apply. Simply go to the , 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 file. For further details on this, please refer to our on how to use the CLI. Tip: applicationID params Web App .jscramblerrc blog post You can also change to match the files you need/want to protect. For our example — and all Ionic 4 apps — we recommend protecting since this file usually holds the logic to be concealed. You should leave file unprotected, since protecting it usually brings no advantage in a protected app. filesSrc main.js vendor.js By using , the files we send to protect will be replaced by their protected version. filesDest: './' Building the application if you’re using , please check out Annex (found at the end) and then return here. That annex addresses some issues encountered while protecting regarding the way dependencies are injected. Note: Ionic v1 Working with Ionic v1 AngularJS We are now ready to protect our code and build our application: ionic cordova build android --prod --release The build for places the multiple files on . Android apk platforms/android/app/build/outputs/apk Our build command will generate multiple production files, each one targeted to different architectures. For the purpose of this tutorial, we will choose the armv7 file. apk apk The will not run on a device unless it is signed first. If you try to install an unsigned then the device will alert for a parsing error. apk apk In order to run it on an device, we need to generate a key. If you have JDK installed start by generating a key Android keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 Then sign the with it: apk jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name Please adjust to match the name of your generated unsigned file. android-release-unsigned.apk apk Finally, optimize the application file using . You can find the tool under . zipalign zipalign 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 file has the protected assets by using any file extracting application. The files should be placed under . apk 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 ) please follow the . Apple Developer publishing guide Ionic Conclusion 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. Ionic By combining the build process with 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. Jscrambler Originally published at blog.jscrambler.com .

Alongside

Apache

Google

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Protecting Hybrid Mobile Apps with Ionic and Jscrambler

Too Long; Didn't Read

Companies Mentioned

Jscrambler

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Protecting Hybrid Mobile Apps with Ionic and Jscrambler

Too Long; Didn't Read

Companies Mentioned

Jscrambler

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES