DEV Community: Pedro Fortuna

How to Protect React Native Apps with Jscrambler

Pedro Fortuna — Fri, 14 Jun 2019 16:35:24 +0000

React Native is a React-based open-source mobile application framework developed by Facebook. It is actually one of the most popular JavaScript frameworks for mobile development, as shown by the 2018 "State of JavaScript" survey.

By following this tutorial, you will be able to integrate Jscrambler seamlessly into React Native's build process and protect your app with the most potent and resilient obfuscation techniques, code locks, self-defensive, and self-healing capabilities.

Pre-Requisites

To properly integrate Jscrambler into the React Native build process, we only need to set up a React Native app and configure Jscrambler. Let's cover both steps below.

Creating a React Native Application

To create a mobile app using React Native, you have two main approaches: using Expo or using the React Native CLI. Usually, Expo is more suited for developers with a Web Development background (it doesn't require Xcode or Android Studio), while using the React Native CLI is most advisable for those that come from a Native Development background (it requires Xcode or Android Studio).

To integrate Jscrambler into the React Native build process, we'll have to use the React Native CLI. However, if you're using Expo, you can also integrate Jscrambler by ejecting the project, as we'll explore further below.

For the purposes of this tutorial, we will be cloning a simple Grocery List app:

git clone https://github.com/jscrambler/Integration-Examples.git

Now, let's transverse into the React Native app's directory and install the project's dependencies:

cd Integration-Examples/ReactNative/Example-Apps/react-native-grocery-list/
npm i

The simplified base project structure of our React Native application is as follows:

react-native-grocery-list/
|-- app.json
|-- babel.config.js
|-- index.js
|-- metro.config.js
|-- package.json
|-- yarn.lock
|-- __tests__/
|-- .expo/
|-- android/
| |-- app/
| | |-- build/
|-- App/
|-- assets/
|-- ios/
|-- node_modules/

package.json contains all the configurations which are related to npm such as dependencies, version and scripts.
The App directory features the source code of the application. The sources are then built and packed into either the android or ios directory. This is where our protected HTML and JavaScript files will be placed after the build.

And we have successfully set up our React Native app. Let's move forward to protecting it with Jscrambler.

Configuring Jscrambler

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

All of Jscrambler's configuration will reside inside a single file: .jscramblerrc, which specifies which transformations we wish to use.

The quickest way to get our config file is via the Jscrambler Web App. Once there, create a new app. Now, in the Application Modes tab, select the Language Specifications and application type. Next, select the transformations you want (check the Templates and Fine-Tuning tabs). In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now, let's create a new file named .jscramblerrc on the React Native project’s root folder. Open the jscrambler.json file you just downloaded and copy all its contents to the .jscramblerrc file. Your final .jscramblerrc file should look like this:

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "params": [
   {
     "name": "objectPropertiesSparsing"
   },
   {
     "name": "variableMasking"
   },
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "name": "propertyKeysObfuscation",
     "options": {
       "encoding": [
         "hexadecimal"
       ]
     }
   },
   {
     "name": "regexObfuscation"
   },
   {
     "options": {
       "features": [
         "opaqueSteps"
       ]
     },
     "name": "controlFlowFlattening"
   },
   {
     "name": "booleanToAnything"
   },
   {
     "name": "identifiersRenaming"
   }
 ],
 "areSubscribersOrdered": false,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true
}

Because we got this information directly via the Jscrambler Web App, our accessKey, secretKey and applicationId fields are already filled. If you wish to retrieve them manually, refer to our guide.

It's important to note that the params section specifies the transformations that will be used to protect your React Native app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.

Integrating Jscrambler in the Build Process

Note: In case you have used Expo to set up your React Native project, in order to continue with the Jscrambler integration you must first eject it using expo eject.

Since React Native uses its own bundler called Metro, Jscrambler’s React Native integration is achieved through a Metro plugin.

To get started, install the Jscrambler Metro Plugin:

npm install jscrambler-metro-plugin --save-dev

Next, create a metro.config.js file on the project's root folder (in our case, we already have that file). Now, we need to place two lines of code at the top of the file. This code imports the Jscrambler Metro plugin and will enable our app to use it. In the case of our Groceries App, we can simply delete all the existing code in the metro.config.js and paste this code:

const jscramblerMetroPlugin = require('jscrambler-metro-plugin')();

module.exports = jscramblerMetroPlugin;

And that's it! We're ready to build our application! To do so, there are different approaches for Android and iOS.

For Android

To generate an APK file and install it on an attached device or emulator, we use:

cd android && ./gradlew installDebug

To simply generate the APK file without installing it, we run:

cd android && ./gradlew assembleDebug

For iOS

If we are building for iOS, the process is a bit trickier. First, we need to bundle our source files and prepare it before creating our IPA package:

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

This will output a main.jsbundle file which we then need to use in Xcode to build our IPA. To do so, you can follow this guide.

We will find the mobile application package for Android (APK) or iOS (IPA) on <android|ios>/app/build/outputs/<apk|ipa>/debug.

Conclusion

React Native is often the JS framework of choice for building cross-platform mobile apps in the enterprise. Other than Facebook, it’s also used by companies like Bloomberg, Tesla, Uber, Wix, and Discord.

Now more than ever, attackers are actively seeking to exploit the exposed nature of JavaScript to steal or tamper with the JavaScript code that often contains critical business logic. This is why protecting your React Native source code with Jscrambler becomes a key step of the development process.

By using our Metro plugin, you can integrate Jscrambler into the React Native build process in a few minutes. If, however, you encounter any issues during this integration, so be sure to check our documentation or contact us.

Protecting Your React.js Source Code with Jscrambler

Pedro Fortuna — Mon, 04 Feb 2019 15:31:24 +0000

React.js is one of the most popular JavaScript libraries. The 2018 "State of JavaScript" survey puts React as the front-end framework of choice, with 65% of responders stating that they have used it and would use again.

With its elegant programming style, rich package ecosystem and good documentation, React has found its way into powering the applications of large enterprises. Specifically, the developer survey found that 18% of responders which are using React work for companies with over 1000 employees.

As we know, the very nature of JavaScript means it can't be encrypted and can easily be accessed on the client-side or even tampered with.

Because React powers enterprise-grade applications, it requires an enterprise-grade security solution such as Jscrambler.

This tutorial will explain how to integrate Jscrambler seamlessly into React's build process in just a few minutes. You'll learn how to protect your React source code with the most advanced polymorphic obfuscation techniques, along with code locks and self-defensive capabilities.

Pre-Requisites

Only two things are needed to properly integrate Jscrambler into the React build process: creating a React app and configuring Jscrambler. We will highlight both below.

How to Create a React Application

For the purposes of this tutorial, we will be using a create-react-app boilerplate app. To get started, we will need to install it using npm:

npm i -g create-react-app

This will download create-react-app and install it globally with all the required dependencies for the latest React version.

Now, we're ready to create our boilerplate app, which we'll use as the basis for this tutorial. Start by creating this new app with the following command:

create-react-app react-jscrambler-boilerplate

After the installation finishes, we can run our newly created boilerplate app:

cd react-jscrambler-boilerplate
npm start

Our new React app will run on development mode and appear at localhost:3000. Check if everything is in place before moving to the next step. For further help on getting started with create-react-app, see the official documentation.

The base project structure of our React application is as follows:

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

package.json contains all the configurations which are related to npm such as dependencies, version and scripts.
The src directory features all the source code of the application. The sources are then built and packed into the build directory. This is where our protected HTML and JavaScript files will be placed after the build.

How to Configure Jscrambler

All of Jscrambler's configuration will reside inside a single file: .jscramblerrc. As such, we will need to create this file to specify which transformations we wish to use.

The quickest way to achieve this is via the Jscrambler Web App. Once there, create a new app. Now, in the Application Modes tab, select the Language Specifications and application type. Next, select the transformations you want (check the Templates and Fine-Tuning tabs). In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

![Download Jscrambler JSON](https://blog.jscrambler.com/content/images/2018/08/jscrambler-101-first-use-download-json.png)

Now, let's create a new file named .jscramblerrc on the React project’s root folder. Open the jscrambler.json file we just downloaded and copy all its contents to the .jscramblerrc file. After that, we just have to add two new sections to .jscramblerrc, which are filesSrc and filesDest (see below). Your final .jscramblerrc file should look like this:

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "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.<X>"
}

It's important to note that the params section specifies the transformations that will be used to protect your React app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.

You can also change filesSrc to match the files you need/want to protect. For our example — and all React apps — we recommend protecting the .html and .js files. Certainly, with a better understanding of the project, you may identify what’s critical and essential protecting.

By using filesDest: './', the files we send to protect will be overwritten by their protected version.

Integrating Jscrambler in the Build Process

Using the CLI is likely the most common way of generating your build. We will use our boilerplate app to showcase how to integrate Jscrambler into the build process.

The first step of our integration with Jscrambler is installing the Jscrambler API Client. Simply run:

npm i jscrambler --save-dev

To integrate Jscrambler in our application's build process via the CLI, we need to create a CLI hook in the scripts section of package.json. The section should look like this:

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

The specific "build": "react-scripts build && jscrambler" hook will trigger the jscrambler command after the build process is finished.

In order for this command to be executable, we need to make sure that the .jscramblerrc file that we created before is in our project's root folder.

We are now ready to protect our code and build our application via the CLI:

npm run build

This will create the protected production files on build/static/.

And you're done! Now all your HTML and JavaScript files are protected with Jscrambler against code theft and reverse-engineering. Remember that you can always fine-tune your protections to manage eventual performance hits. If that's the case, be sure to follow our tutorial.

Note: If you have ejected your project, you can also protect the files using the Jscrambler webpack plugin.

Testing the Protected React App

As a final step, let's check if the app is running successfully with the newly-protected source code. Start by installing the required dependencies:

npm i -g serve

Next, let's simply deploy the app build files to a local development server:

serve -s build

Now, as you should be able to see on the terminal, you can run this server on two ports. One which is publicly available, and another which is specific to your machine.

Open the provided URL and your app will start in the browser.

You can now check what your protected files look like. This can be achieved simply by opening the browser's debugger and opening the files from the "Sources" tab. The protected code should look like this:

Conclusion

There are no doubts that React is a crowd favorite, from individual developers to large enterprises.

If you're building React applications which have sensitive logic, want to prevent reverse-engineering, licensing violations, and tampering, a security solution such as Jscrambler is a must.

Integrating Jscrambler into React's build process is simple and enables protecting your code with the most sophisticated polymorphic obfuscation, code locks, and self-defensive capabilities.

This all comes with premium support, so be sure to contact the Jscrambler support team if you have any questions!