Integrating Jscrambler with Nuxt.js

Last updated: September 23rd 2024

Framework versions tested: 3.3.1, 3.11.2

Introduction

Nuxt.js is an open-source Vue-based framework built on top of Node.js that is aimed at developing web apps.

For the purposes of this tutorial, we will be using an official Nuxt.js basic app.

Integrating Jscrambler with Nuxt.js

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": [
   ".nuxt/dist/**"
 ],
 "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 Nuxt.js build process with the CLI.

Install the Jscrambler API Client:

pnpm i jscrambler --save-dev

Add script jscrambler in package.json

  "scripts": {
    "build": "nuxi build",
    "jscrambler": "jscrambler -c jscrambler.json",
  },

Add build done hook to nuxt.config.ts to call npm script “jscrambler”:

  import {execSync} from "node:child_process"

  export default defineNuxtConfig({
    hooks: {
      "build:done": () => {
        execSync('npm run jscrambler', {stdio: "inherit"});
      }
    }
  })

The "build": "nuxi build" hook will thus trigger the jscrambler command at the end of the build process.

Build the application:

pnpm build

Run the application:

pnpm start

There you go, the app is running on localhost:3000. Jscrambler is now integrated into your build process and the protected production files will be placed on .output/.

Known Problems

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