Рубрики
Без рубрики

Защита вашего исходного кода React.js с помощью jscrambler

В этом пошаговом руководстве вы узнаете, как защитить свое приложение React.js с помощью JScrambler, чтобы предотвратить кражу кода и обратное инженерное управление. Tagged with JScrambler, React, JavaScript, Security.

React.js является одной из самых популярных библиотек JavaScript. Опрос «Состояние JavaScript 2018 года», в котором реагирует как Фронтальная каркас выбора , с 65% респондентов, заявив, что они использовали его и будут использовать снова.

Благодаря элегантному стилю программирования, богатой экосистеме упаковки и хорошей документацией, React обнаружил свой путь к применению приложений крупных предприятий. В частности, опрос разработчика обнаружил, что 18% респондентов, которые используют React Work для компаний с более чем 1000 сотрудников Анкет

Как мы знаем, сама природа JavaScript означает, что его нельзя зашифровать и можно легко получить на стороне клиента или даже подделать.

Поскольку React Powers Enterprise Clorge Applications требует решения для обеспечения безопасности предприятия, такого как JSCRAMBLE.

Этот урок будет объяснять, как плавно интегрировать JScrambler в процесс сборки React всего за несколько минут. Вы узнаете, как защитить свой исходный код React с помощью наиболее продвинутых методов полиморфного запутывания, а также блокировки кода и самозаботительных возможностей.

Предварительные условия

Для правильной интеграции JScrambler в процесс сборки React необходимы только две вещи: Создание приложения React и Настройка JScrambler Анкет Мы выделим оба ниже.

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

Для целей этого урока мы будем использовать Create-React-App приложение Coalerplate. Чтобы начать, нам нужно будет установить его, используя NPM:

npm i -g create-react-app

Это будет скачать Create-React-App и установите его во всем мире со всеми необходимыми зависимостями для последней версии React.

Теперь мы готовы создать наше приложение для шаблонов, которое мы будем использовать в качестве основы для этого урока. Начните с создания этого нового приложения со следующей командой:

create-react-app react-jscrambler-boilerplate

После окончания установки мы можем запустить наше недавно созданное приложение для шаблонов:

cd react-jscrambler-boilerplate
npm start

Наше новое приложение React будет работать в режиме разработки и появится в Localhost: 3000 Анкет Проверьте, все ли на месте, прежде чем перейти к следующему шагу. Для получения дополнительной помощи в начале работы с Создать-реакт-приложение , см. Официальная документация Анкет

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

react-jscrambler-boilerplate/
|-- package-lock.json
|-- package.json
|-- yarn.lock
|-- build/
| |-- static/
| | |-- css/
| | |-- js/
| | |-- media/
|-- node_modules/
|-- public/
|-- src/

  • Package.json Содержит все конфигурации, которые связаны с NPM, таким как зависимости, версия и сценарии.

  • SRC Справочник функционирует весь исходный код приложения. Источники затем построены и упаковываются в сборка каталог. Именно здесь наши защищенные файлы HTML и JavaScript будут размещены после сборки.

Как настроить jscrambler

Вся конфигурация JScrambler будет находиться в одном файле: .jscramblrc Анкет Таким образом, нам нужно будет создать этот файл, чтобы указать, какие преобразования мы хотим использовать.

Самый быстрый способ достичь этого – через Jscrambler Web App . Оказавшись там, создайте новое приложение. Теперь в Режимы приложения Вкладка, выберите языковые спецификации и тип приложения. Далее выберите нужные преобразования (проверьте шаблоны В этом уроке мы будем выбрать Запутывание шаблон. Если вам нужна помощь с этими шагами, пожалуйста, обратитесь к нашему Руководство Анкет

Теперь нам просто нужно скачать Файл json со всей этой конфигурацией , который будет использоваться только для быстрого получения необходимых настроек.

Теперь давайте создадим новый файл с именем .jscramblrc в корневой папке проекта React. Откройте jscrambler.json Файл, который мы только что скачали, и скопируйте все его содержимое в .jscramblrc файл. После этого нам просто нужно добавить два новых раздела в .jscramblerrc , которые FilessRC и filesdest (Смотри ниже). Ваш последний .jscramblrc Файл должен выглядеть так:

{
 "keys": {
   "accessKey": ,
   "secretKey": 
 },
 "applicationId": ,
 "filesSrc": [
   "./build/**/*.html",
   "./build/**/*.js"
 ],
 "filesDest": "./",
 "params": [
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "identifiersRenaming",
     "options": {
       "mode": "SAFEST"
     }
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "deadCodeInjection"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "options": {
       "freq": 1,
       "features": [
         "opaqueFunctions"
       ]
     },
     "name": "functionOutlining"
   },
   {
     "name": "propertyKeysObfuscation"
   },
   {
     "name": "regexObfuscation"
   },
   {
     "name": "booleanToAnything"
   }
 ],
 "areSubscribersOrdered": false,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true,
 "jscramblerVersion": "5."
}

Потому что мы получили эту информацию напрямую через веб -приложение JScrambler, наше ключ доступа , SecretKey и ApplicationId Поля уже заполнены. Если вы хотите получить их вручную, обратитесь к нашему Руководство Анкет

Важно отметить, что Params Раздел указывает преобразования, которые будут использоваться для защиты вашего приложения React. Они могут быть заброшены вами , выбрав их в веб -приложении или установив их вручную. Вы можете найти документацию по всем доступным преобразованиям Здесь Анкет

Вы также можете изменить FilessRC Чтобы соответствовать необходимым файлам/вы хотите защитить. Для нашего примера – и всех приложений React – мы рекомендуем защитить .html и .js файлы Конечно, с лучшим пониманием проекта вы можете определить, что важно и важно.

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

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

Использование CLI, вероятно, является наиболее распространенным способом создания вашей сборки. Мы будем использовать наше приложение Coiperplate, чтобы продемонстрировать, как интегрировать JScrambler в процесс сборки.

Первый шаг нашей интеграции с JScrambler устанавливает JSCRAMBLER API CLIENT Анкет Просто беги:

npm i jscrambler --save-dev

Чтобы интегрировать JScrambler в процесс сборки нашего приложения через CLI, нам нужно создать крючок CLI в сценарии Раздел Package.json Анкет Раздел должен выглядеть так:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && jscrambler",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Конкретный "Build": "React-Scripts Build && JScrambler" Крюк запустит JScrambler Команда после завершения процесса сборки.

Чтобы эта команда была исполняемой, Нам нужно убедиться, что .jscramblrc Файл, который мы создали ранее, находится в корневой папке нашего проекта Анкет

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

npm run build

Это создаст защищенные производственные файлы на Build/Static/ Анкет

И вы сделали! Теперь все ваши файлы HTML и JavaScript защищены JScrambler от кражи кода и обратного инженера. Помните, что вы всегда можете настроить свою защиту, чтобы управлять возможными хитами производительности. Если это так, обязательно следуйте нашим Учебник Анкет

Примечание: Если вы изгнали свой проект, вы также можете защитить файлы, используя JScrambler плагин WebPack Анкет

Тестирование защищенного приложения React

В качестве последнего шага, давайте проверим, успешно ли приложение работает с недавно защищенным исходным кодом. Начните с установки требуемых зависимостей:

npm i -g serve

Далее, давайте просто развертываем файлы сборки приложения на локальный сервер разработки:

serve -s build

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

Откройте предоставленный URL, и ваше приложение начнется в браузере.

Теперь вы можете проверить, как выглядят ваши защищенные файлы. Это может быть достигнуто просто путем открытия отладчика браузера и открытия файлов с вкладки «Источники». Защищенный код должен выглядеть так:

Вывод

Нет сомнений, что Реагировать является фаворитом толпы, от отдельных разработчиков до крупных предприятий.

Если вы создаете приложения React, которые имеют чувствительную логику, хотите предотвратить обратное инженерное управление, нарушения лицензирования и подделка Решение безопасности, такое как JScrambler, является обязательным.

Интеграция JScrambler в процесс сборки React проста и позволяет защищать ваш код с самым сложным Полиморфное запутывание , Кодовые блокировки и самозабоченная возможности.

Все это поставляется с поддержкой премиум -класса, поэтому не забудьте Свяжитесь с командой поддержки JSCRAMBLER если у вас есть какие-нибудь вопросы!

Оригинал: “https://dev.to/jscrambler/protecting-your-reactjs-source-code-with-jscrambler-36nn”

Читайте ещё по теме: