Jscrambler Code Integrity for React-Native and Vega OS

Jscrambler Code Integrity is a JavaScript protection technology for Web and Mobile Applications. Its main purpose is to enable JavaScript applications to become self-defensive and resilient to tampering and reverse engineering.

If you're looking to gain control over third-party tags and achieve PCI DSS compliance please refer to Jscrambler Webpage Integrity.

Version Compatibility

The version's compatibility table match your Jscrambler Version with the Jscrambler Metro Plugin. Please make sure you install the right version, otherwise some functionalities might not work properly.

| Jscrambler Version | Client and Integrations | |:--------------------:|:-------------------------:| | <= 7.1 | <= 5.x.x | | >= 7.2 | >= 6.0.0 <=8.5.0 | | >= 8.6 | >= 9.0.0 |

Usage

This plugin uses Jscrambler to protect your React Native bundles built with Expo or the Community CLI, as well as your Vega OS bundles.

First install the jscrambler-metro-plugin as a development dependency

npm install -D jscrambler-metro.plugin

Then, set up the plugin in your metro.config.js by adding the following code:

// For React-Native Community CLI or Vega OS, import getDefaultConfig and mergeConfig from @react-native/metro-config  
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

// For Expo, import getDefaultConfig from expo/metro-config and mergeConfig from @react-native/metro-config
const { getDefaultConfig } = require("expo/metro-config");
const { mergeConfig } = require('@react-native/metro-config');

// Import Jscrambler Metro Plugin
const jscramblerMetroPlugin = require('jscrambler-metro-plugin')();

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const config = {
  ...jscramblerMetroPlugin
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Finally, create a .jscramblerrc file with your Jscrambler configuration downloaded from Code Integrity Application Dashboard.

By default, Jscrambler protection is ignored when bundle mode is set for Development. You can override this behavior by setting env variable JSCRAMBLER_METRO_DEV=true

In order to activate source map generation effectively, you will need to enable source maps both in the Jscrambler configuration file, by adding the following parameter to said file:

{
  ...
 "sourceMaps": true,
  ...
}

and in the React Native app.

Plugin Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | enable | boolean | true | Enables Jscrambler protection. Set to false to skip protection. | | enabledHermes | boolean | true | Enables Hermes-specific compatibility handling. Set to false when the app does not use Hermes. | | ignoreFile | string | .jscramblerignore in the project root | Path to the ignore file used to exclude files from protection. | | params | Array<object> | Value from .jscramblerrc | Overrides the params transformation list from .jscramblerrc, useful for testing. |

const jscramblerMetroPlugin = require('jscrambler-metro-plugin')(
    /* OPTIONAL */
    {
        enable: true, 
        enabledHermes: true,
        ignoreFile: resolve(__dirname, '.jscramblerignore'),
        // overrides the params on `.jscramblerrc` file. Usefull for testing purposes.
        params: [  
            {
              name: "stringConcealing",
              options: {
                freq: 1,
                max: -1
              }
            }
        ]
    }
);