Integrating Jscrambler with Stencil

Last updated: 25 Set 2024

Framework versions tested: 4.21.0

Introduction

Stencil is a library for building reusable, scalable component libraries.

For the purposes of this tutorial, we will be using the official Stencil Getting Started guide.

Integrating Jscrambler with Stencial

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 jscrambler.json and placed on the project's root folder. If you choose to try the following example, just make sure to fill in the missing information: accessKey, secretKey, and applicationId.

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./.dist/**/*.js"
 ],
 "filesDest": "./",
 "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 Stencil build process with the Jscrambler CLI.

Install the Jscrambler API Client:

npm i jscrambler --save-dev

Create a CLI hook in the scripts section of package.json. The section should look like this:

  "scripts": {
    "build": "stencil build && jscrambler",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },

The "build": "stencil 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 into your build process and the protected production files will override the original ones on the dist/ folder.

Known Problems

There are no known problems integrating Jscrambler with Next.js.