Integrating Jscrambler with Vite

Last updated: September 18th 2024

Framework versions tested: 5.1.3 ● 5.4.6 (Vue: 3.5.6)

Introduction

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server that provides rich feature enhancements over native ES modules, and a build command that bundles your code, pre-configured to output highly optimized static assets for production.

This tutorial will explain how to integrate Jscrambler into Vite's bundling process in a few minutes. Some knowledge of the framework is assumed and how to build a project using it. For any questions regarding this matter, please refer to the developer documentation. For this specific guide, we will use the Vanilla "flavour" but integrating Jscrambler into any of the other supported templates should be very similar with minimal changes.

Example Vite App

In this tutorial, we will be using the default vanilla app provided by Vite. For the documented steps, please refer to the documentation, under Scaffolding Your First Vite Project. Under the section Select a framework, in the create project command, you should choose Vanilla.

Integrating Jscrambler with Vite

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 while teaching you how to configure Jscrambler and use custom configurations.

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 (this is the same as using the "Advanced Obfuscation" recipe), 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": [
   "./dist/**/*.html",
   "./dist/**/*.js"
 ],
 "filesDest": "./",
  "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"
    },
    {
      "name": "globalVariableIndirection"
    }
  ],
 "areSubscribersOrdered": false,
 "useRecommendedOrder": true,
 "jscramblerVersion": "stable"
}

You can also change filesSrc to match the files you need/want to protect. For our example, we recommend protecting the .html and .js files inside the dist/ folder. In your app, if you do find any other files that you think are worth protecting and are not covered, these should be added to the filesSrc array.

By using filesDest: './', the files we send to protect will be overwritten by their protected version. If you do not wish to overwrite the original files, you should set a different path.

Integrating Jscrambler in the Build Process with the Vite CLI

To integrate Jscrambler into the Vite build process using their CLI tool, first install the Jscrambler API Client:

npm install jscrambler --save-dev

By default, the Vite CLI already creates a scripts section in package.json. The section should look like this:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview"
},

To integrate Jscrambler's CLI, you should change the build command to include it:

...
"build": "tsc && vite build && jscrambler",
...

Build the application:

npm run build

And there you go: Jscrambler is now integrated in your build process and the protected production files will be placed on dist/ or whichever folder you defined. It is expected that, after the regular Vite build logging, an hash represeting your protection is also shown (this will match to the protection hash in Jscrambler's Web app, in the app's dashboard, under "Protection History").

Known Problems

There are no known problems integrating Jscrambler with Vite.