Integrating Jscrambler with Webpack

Last updated: 14 May 2024

Framework versions tested: 5.23.0 ● 5.91.0

Introduction

Webpack is an open-source module bundler that bundles JavaScript files for usage in a browser.

For the purposes of this tutorial, we will be using a simple application built with React.js and with webpack installed.

Integrating Jscrambler with webpack

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 the 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>,
 "params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "globalVariableIndirection"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "stable",
  "tolerateMinification": true,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Integrating Jscrambler in The Build Process

You can integrate Jscrambler into the webpack build process with a plugin.

Install the Jscrambler webpack plugin:

npm i --save-dev jscrambler-webpack-plugin

To integrate Jscrambler in our application's build process via webpack, we need to add it to the webpack.config.js file. First, by adding this line:

const JscramblerWebpack = require('jscrambler-webpack-plugin');

And then by adding the Jscrambler webpack plugin at the end of the plugin array, so that it looks like this:

plugins: [
    // other plugins
    new JscramblerWebpack({
      enable: true, // optional, defaults to true
      chunks: ['app', 'print'], // optional, defaults to all chunks
      params: [], // optional, can be used to override .jscramblerrc
      applicationTypes: {} // optional
      // and other jscrambler configurations
    })
  ]

If you want to protect specific webpack chunks, you should note which chunks you are currently setting in the config file, by looking at this section:

  entry: {
    app: "./src/main.js",
    print: "./src/print.js"
  },

Our example application has two webpack chunks, app and print, and we're choosing to protect both chunks with the config shown above chunks: ['app', 'print'].

Here, you might want to split your node_modules/ folder into a different chunk to exclude vendor files from being protected by Jscrambler. If that's the case, read the section below.

Adding a Separate Chunk For Vendor Files

Since the vendor files from node_modules/ are typically publicly accessible, you might find it unnecessary to protect them, especially if your main concern is intellectual property theft.

Placing them in a separate chunk will allow you to avoid protecting that chunk with Jscrambler. To do that, add the following snippet to the webpack.config.js file:

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          minSize: 0
        }
      }
    }
  },

Note that minSize: 0 forces optimization.splitChunks to be applied even if the vendors bundle is small.

Finally, make sure you are not placing vendor in the chunks array.

Building The Application

Build the application with webpack:

npm run build

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

Known Problems

There are no known problems integrating Jscrambler with webpack.