Integrating Jscrambler with React.js

Last updated: 4 June 2021

Framework versions tested: 16.6.3 ● 16.8.6 ● 16.12.0 ● 16.13.1 ● 16.14.0

Introduction

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.

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. It will be assumed that you already have some knowledge of the framework and how to build a project. Still, if you have any questions, please read the official getting started guide.

Example React App

For the purposes of this tutorial, we will be using a create-react-app boilerplate app. You can check our tutorial to learn more about how to create an app. Otherwise, you can skip the step above and download the app.

Integrating Jscrambler with React

If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.

To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named .jscramblerrc and placed on the project's root folder. If you choose to try the following example, just make sure to fill the missing information: accessKey, secretKey and applicationId.

{
 "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,
 "useRecommendedOrder": true,
 "jscramblerVersion": "stable"
}

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

You can integrate Jscrambler into the React build process with the CLI.

Install the Jscrambler API Client:

npm install jscrambler --save-dev

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 "build": "react-scripts build && jscrambler" hook will trigger the jscrambler command after the build process is finished.

Build the application:

npm run build

There you go. Jscrambler is now integrated in your build process and the protected production files will be placed on build/static/.

Known Problems

There are no known problems integrating Jscrambler with React.