Эта статья является основным обновлением нашего предыдущего руководства.

На момент последнего обновления этой статьи Ionic имел версию 4.0.6, а Cordova — версию 8.0.0.

Введение

Ionic – это платформа с открытым исходным кодом, предназначенная для создания нативных мобильных веб-приложений, ориентированных на основные мобильные операционные системы. Ориентация на разные системы с одной и той же кодовой базой ускоряет процесс разработки, сокращая время выхода на рынок и усилия по поддержке.

Ionic построен на двух основных платформах: Apache Cordova и Google Angular. За ним стоит отличная экосистема с исчерпывающей документацией и рынком, где вы можете найти множество тем и плагинов для начала работы.

В этом руководстве объясняется, как защитить приложение Ionic 4 с помощью Jscrambler, интегрировав его в процесс сборки.

Как создать ионное приложение

Начать работу с Ionic довольно просто. Во-первых, убедитесь, что вы установили Ionic вместе с Cordova.

npm install -g cordova ionic

Для целей этого урока мы будем использовать официальное Ionic Demo App в качестве шаблона. Для получения дополнительной информации о шаблонах см. официальную документацию.

Мы форкнули фиксацию приложения от 30 августа 2018 года, которая будет использоваться в этом руководстве.

Вы можете установить демонстрационное приложение Ionic, выполнив следующую команду:

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

Ionic загрузит и установит все зависимости демонстрационного приложения на основе Angular 5, использующего TypeScript.

Это все, что нам нужно для функционального приложения Ionic. Проверьте, все ли на месте, запустив приложение в браузере. По умолчанию он будет работать на localhost на порту 8100.

cd \myConferenceApp
ionic serve

Если вам нужна дополнительная информация о начале работы, обратитесь к официальной документации.

Структура нашего приложения Ionic

Базовая структура проекта нашего приложения Ionic выглядит следующим образом:

myConferenceApp/
|-- config.xml
|-- platforms/
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
|-- resources/
|-- src/
| |-- app/
| |-- assets/
| |-- environments/
| |-- theme/
|-- www/
  • config.xml содержит конфигурацию вашего приложения Ionic.
  • Каталог www содержит весь исходный код и ресурсы приложения, такие как HTML, CSS и JavaScript.
  • Каталог src содержит весь исходный код приложения. Затем исходные коды собираются и упаковываются в каталог www (который Cordova использует для развертывания на каждой платформе).

Структура каталога src зависит от используемого инструмента сборки. Некоторые шаблоны используют webpack, сборщик модулей, который обеспечивает высокий уровень настройки при создании приложения. Однако официальные шаблоны Ionic отказались от процесса сборки gulp в пользу пользовательского — ionic-app-scripts.

Если вы используете новый процесс сборки с ionic-app-scripts, ваш каталог src должен иметь такую ​​структуру:

|-- src/
| |-- app/
| | |-- pages/
| | | |-- page1/
| | | |-- page2/
| |-- assets/
| |-- environments/
| |-- theme/
  • Подкаталог app содержит модули и компоненты вашего приложения, включая настройки для сред dev и prod.
  • Каталог pages содержит папки для каждой страницы приложения. Каждая папка содержит файлы html, scss и typescript, отвечающие за форму и поведение страницы.
  • Подкаталог assets аналогичен каталогу resources, хотя файлы в этой папке не зависят от размера устройства.
  • Папка theme содержит scss файлов, которые позволяют настраивать тему приложения.

Интеграция Jscrambler в процесс сборки

Установка зависимостей

Первым шагом нашей интеграции с Jscrambler является установка Jscrambler API Client.

npm install jscrambler --save-dev

Подключение Jscrambler

Чтобы интегрировать Jscrambler в процесс сборки нашего приложения, нам нужно создать хук CLI в разделе 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"
}

Определенный хук “ionic:build:after”: “jscrambler” вызовет команду jscrambler после завершения процесса сборки.

Чтобы эта команда была исполняемой, нам нужно добавить файл .jscramblerrc в корневую папку нашего проекта, в котором будут храниться настройки Jscrambler. Файл должен иметь следующую структуру:

{
 "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
 }

После создания файла необходимо отредактировать следующие свойства:

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

Вы можете найти оба этих ключа в Моих настройках веб-интерфейса (см. изображение ниже).

Чтобы получить applicationId, перейдите в веб-приложение, создайте новое приложение и проверьте над текстовым редактором:

Не стесняйтесь изменять params, используя любое преобразование, которое может предложить Jscrambler. Все доступные преобразования вы можете найти здесь.

Совет. Есть быстрый способ получить необходимые ключи, applicationID и params, которые вы хотите применить. Просто зайдите в Веб-приложение, создайте новое приложение, выберите нужные преобразования и загрузите файл JSON. Теперь вы можете открыть его и скопировать соответствующие разделы в файл .jscramblerrc. Для получения дополнительной информации об этом, пожалуйста, обратитесь к нашему сообщению в блоге о том, как использовать CLI.

Вы также можете изменить filesSrc, чтобы он соответствовал файлам, которые вам нужно/хотите защитить. Для нашего примера — и для всех приложений Ionic 4 — мы рекомендуем защитить main.js, так как этот файл обычно содержит логику, которую нужно скрыть. Вы должны оставить файл vendor.js незащищенным, поскольку его защита обычно не дает преимуществ в защищенном приложении.

При использовании filesDest: './' файлы, которые мы отправляем для защиты, будут заменены их защищенной версией.

Сборка приложения

Примечание. если вы используете Ionic v1, ознакомьтесь с Приложением Работа с Ionic v1 (находится в конце), а затем вернитесь сюда. В этом приложении рассматриваются некоторые проблемы, возникающие при защите AngularJS в отношении способа внедрения зависимостей.

Теперь мы готовы защитить наш код и создать наше приложение:

ionic cordova build android --prod --release

Сборка для Android помещает несколько файлов apk в platforms/android/app/build/outputs/apk.

Наша команда сборки сгенерирует несколько производственных файлов apk, каждый из которых предназначен для разных архитектур. Для целей этого урока мы выберем файл armv7 apk.

apk не будет работать на устройстве, пока оно не будет подписано первым. Если вы попытаетесь установить неподписанный apk, устройство выдаст предупреждение об ошибке синтаксического анализа.

Чтобы запустить его на устройстве Android, нам нужно сгенерировать ключ. Если у вас установлен JDK, начните с создания ключа

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

Затем подпишите им apk:

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

Измените android-release-unsigned.apk так, чтобы оно соответствовало имени сгенерированного неподписанного файла apk.

Наконец, оптимизируйте файл приложения, используя zipalign. Вы можете найти инструмент zipalign под path/to/Android/sdk/build-tools/VERSION/zipalign.

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

И вы сделали! Теперь у вас есть файл приложения, готовый к использованию.

Вы можете проверить, есть ли в вашем файле apk защищенные активы, используя любое приложение для извлечения файлов. Файлы должны быть размещены под assets/www.

Если вам нужна дополнительная информация о том, как опубликовать ваше приложение или как развернуть его на iOS (для чего вам потребуется зарегистрироваться в качестве разработчика Apple), следуйте инструкциям «Ionic публикации руководство".

Вывод

Ionic — это эффективная платформа для создания мощных, отзывчивых и многоплатформенных приложений, не требующая знания собственной платформы и ускоряющая время разработки.

Объединив процесс сборки с Jscrambler, вы можете защитить свой код на мобильной платформе, просто добавив перехватчик, который выполняется перед сборкой вашего приложения, что сэкономит ваше время в процессе сборки или развертывания.

Первоначально опубликовано на blog.jscrambler.com.