Защита исходного кода React.js с помощью Jscrambler

Раскрытие информации. Этот пост посвящен Jscrambler, продукту для защиты JavaScript, автор которого связан (в качестве технического директора).

React.js — одна из самых популярных библиотек JavaScript. В опросе «Состояние JavaScript» за 2019 год React назван [предпочтительной интерфейсной платформой] (https://2019.stateofjs.com/front-end-frameworks/), при этом 72% респондентов заявили, что использовали его. и использовал бы снова.

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

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

Поскольку React поддерживает приложения корпоративного уровня, для него требуется решение безопасности корпоративного уровня, такое как Jscrambler.

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

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

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

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

Для целей этого руководства мы будем использовать стандартное приложение create-react-app. Для начала нам нужно установить его с помощью npm:

npm i -g создать-реагировать-приложение

Это загрузит create-react-app и установит его глобально со всеми необходимыми зависимостями для последней версии React.

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

создать-реагировать-приложение реагировать-jscrambler-шаблон

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

cd реагировать-jscrambler-шаблон

запуск нпм

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

![Главная страница приложения React по умолчанию] (https://cdn.hackernoon.com/images/1JNoLAkx1ZO5O8qO5dcdNjh6RQw1-2022-05-10T16:37:31.676Z-cl30dlxul002d0as6eidu9dnh)

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

реагировать-jscrambler-шаблон/

|-- пакет-lock.json

|-- package.json

|-- пряжа.lock

|-- построить/

| |-- статический/

| | |-- CSS/

| | |-- js/

| | |-- СМИ/

|-- node_modules/

|-- публичный/

|-- источник/

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

• Каталог src содержит весь исходный код приложения. Затем исходники собираются и упаковываются в каталог build. Здесь будут размещены наши защищенные файлы HTML и JavaScript после сборки.

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

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

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

Самый быстрый способ добиться этого — через [веб-приложение Jscrambler] (https://app.jscrambler.com/login?utm_source=hackernoon.com&utm_medium=referral&utm_campaign=react-js-tutorial). Оказавшись там, создайте новое приложение. Теперь на вкладке Режимы приложений выберите Спецификации языка и тип приложения. Затем выберите нужные преобразования (отметьте вкладки Шаблоны и Точная настройка). В этом уроке мы выберем шаблон Obfuscation. Если вам нужна помощь с этими шагами, обратитесь к нашему руководству.

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

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

```json

"ключи": {

"accessKey": ,

"секретный ключ":

"applicationId": ,

"файлыSrc": [

"./сборка/*/.html",

"./сборка/*/.js"

"файлыDest": "./",

"параметры": [

"имя": "удаление пробелов"

"name": "идентификаторыПереименование",

"опции": {

"режим": "САМЫЙ БЕЗОПАСНЫЙ"

"name": "dotToBracketNotation"

"имя": "deadCodeInjection"

"name": "stringConcealing"

"имя": "Переупорядочивание функций"

"опции": {

"частота": 1,

"Особенности": [

"непрозрачные функции"

"имя": "функцияСтруктура"

"name": "propertyKeysObfuscation"

"имя": "Обфускация регулярных выражений"

"имя": "booleanToAnything"

"areSubscribersOrdered": ложь,

"Типы приложений": {

"webBrowserApp": правда,

"настольное приложение": ложь,

"серверное приложение": ложь,

«гибридное мобильное приложение»: ложь,

"javascriptNativeApp": ложь,

"html5GameApp": ложь

"спецификации языка": {

"es5": правда,

"es6": ложь,

"es7": ложь

"useRecommendedOrder": правда,

"jscramblerVersion": "6."

Поскольку мы получили эту информацию непосредственно через веб-приложение Jscrambler, наши поля accessKey, secretKey и applicationId уже заполнены. Если вы хотите получить их вручную, обратитесь к нашему [руководству] (https://blog.jscrambler.com/jscrambler-101-first-use/?utm_source=hackernoon.com&utm_medium=referral&utm_campaign=react-js-tutorial).

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

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

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

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

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

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

Чтобы интегрировать Jscrambler в процесс сборки нашего приложения через CLI, нам нужно создать хук CLI в разделе scripts файла package.json. Раздел должен выглядеть так:

"скрипты": {

"start": "запуск реагирующих скриптов",

"build": "сборка скриптов реакции && jscrambler",

"test": "тестирование реагирующих скриптов",

"eject": "извлечь скрипты реакции"

Специальный хук "build": "react-scripts build && jscrambler" запускает командуjscrambler` после завершения процесса сборки.

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

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

npm запустить сборку

Это создаст защищенные производственные файлы в build/static/.

И вы сделали! Теперь все ваши файлы HTML и JavaScript защищены с помощью Jscrambler от кражи кода и обратного проектирования. Помните, что вы всегда можете точно настроить средства защиты для управления возможными падениями производительности. Если это так, обязательно следуйте нашему [учебнику] (https://blog.jscrambler.com/jscrambler-101-code-annotations/?utm_source=hackernoon.com&utm_medium=referral&utm_campaign=react-js-tutorial).

Примечание. Если вы удалили свой проект, вы также можете защитить файлы с помощью Jscrambler плагин webpack.

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

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

npm i -g служить

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

serve -s строить

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

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

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

![Защищенный код React — отладчик Chrome]

Вывод

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

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

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

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

Также опубликовано [Здесь] (https://blog.jscrambler.com/protecting-your-react-js-source-code-with-jscrambler/)