Integrating Jscrambler with Vue.js using Vue-CLI/Webpack

Last updated: September 18th 2024

Framework versions tested: 2.5.2 ● 2.6.10 ● 2.6.11 ● 2.6.12 ● 3.0.0

⚠️ This documentation is specificaly for applications built with Vue-CLI/Webpack: Vue-cli is currently in maintenance mode and should only be used in certain scenarios. The same goes for Webpack.

⚠️ If you are building your Vue app with Vite, please refer to our Vite documentation.

Introduction

Vue.js is a progressive framework for building user interfaces whose core functionality revolves around the view layer, making it easy to integrate into existing projects.

This tutorial will explain how to integrate Jscrambler seamlessly into Vue's build process with Vue-CLI in just a few minutes. It will be assumed that you already have some knowledge of the framework and how to build a project. Still, if you have any questions, please read the official getting started guide.

Example Vue App

For the purposes of this tutorial, we will use an example Vue app, Real-World_Vue-3 and protect it using Jscrambler. If you need instructions on setting up this app, check the instructions on its GitHub page. You must use node 16 with this app.

Integrating Jscrambler with Vue

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 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>,
 "filesSrc": [
   "./dist/**/*.html",
   "./dist/**/*.js"
 ],
 "filesDest": "./",
 "params": [
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "identifiersRenaming",
     "options": {
       "mode": "SAFEST"
     }
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "deadCodeInjection"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "options": {
       "freq": 1,
       "features": [
         "opaqueFunctions"
       ]
     },
     "name": "functionOutlining"
   },
   {
     "name": "propertyKeysObfuscation"
   },
   {
     "name": "regexObfuscation"
   },
   {
     "name": "booleanToAnything"
   }
 ],
 "areSubscribersOrdered": false,
 "useRecommendedOrder": true,
 "jscramblerVersion": "stable"
}

You can also change filesSrc to match the files you need/want to protect. For our example — and all Vue apps — we recommend protecting the .html and .js files inside the dist/ folder. Certainly, with a better understanding of the project, you may identify what’s critical and essential protecting.

By using filesDest: './', the files we send to protect will be overwritten by their protected version.

Integrating Jscrambler in the Build Process

Vue applications can be built with vue-cli or using a build tool like webpack. Both approaches work seamlessly with Jscrambler.

Vue CLI

To integrate Jscrambler into the Vue build process with vue-cli, first install the Jscrambler API Client:

npm install jscrambler --save-dev

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

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build && jscrambler",
  "lint": "vue-cli-service lint"
},

The "build": "vue-cli-service 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 in your build process and the protected production files will be placed on dist/.

Webpack

To showcase the Vue-webpack integration with Jscrambler, we can create a boilerplate app:

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

Then, install Jscrambler's webpack plugin as a dev dependency:

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

Next, make some adjustments to the webpack configuration file webpack.prod.conf.js which is inside the build directory. 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'] // protect the 'app' chunk; you can choose other chunks
    })
  ]

Finally, run the production build:

npm run build

The protected app files will be found at /dist/static/js/app.<HASH>.js.

Known Problems

There are no known problems integrating Jscrambler with Vue.