195 reads

How To Protect Your Vue.js Application With Jscrambler

by Pedro FortunaMay 3rd, 2020

Too Long; Didn't Read

How To Protect Your Vue.js Application With Jscrambler is a JavaScript protection product to which the author is affiliated. The two most common tools used to build Vue apps are the Vue-CLS and webpack. We will explore how to integrate the protection tool into our build process. We'll use an example Vue app to protect it using JSCrambler and protect it from reverse-engineering or tampering attempts. The source directory contains all the source and scripts which are related to npm and scripts. The sources are then built into the dist directory and packed into the source.

Company Mentioned

featured image - How To Protect Your Vue.js Application With Jscrambler

Disclosure: This post focuses on Jscrambler, a JavaScript protection product to which the author is affiliated (as CTO).

As you may know, one thing that all JavaScript apps have in common — regardless of the framework they use — is that client-side JavaScript code is exposed to reverse-engineering or tampering attempts. Apps powered by Vue are no exception to this.

In this tutorial, we're going to show you how to protect a Vue application with Jscrambler by integrating it into your build process. The two most common tools used to build Vue.js apps are the Vue CLI and webpack. We will explore how to integrate Jscrambler into each case.

Configuring Jscrambler

Regardless of which build tool you're using in your Vue project, a common step is configuring Jscrambler properly.

If you haven't created a Jscrambler account yet, be sure to do so before moving forward.

All of Jscrambler's configuration will reside inside a single file:

.jscramblerrc

. As such, we will need to create this file to specify which transformations we wish to use.

The quickest way to achieve this is via the Jscrambler Web App. Once there, create a new app. Now, select the transformations you want (check the Templates and Fine-Tuning tabs). In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, check this guide.

Now, download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now, let's create a new file named

.jscramblerrc

. Open the

jscrambler.json

file you just downloaded and copy all its contents to the

.jscramblerrc

file.

You will find that the fields

accessKey

secretKey

and

applicationId

will already be filled, since we generated the file on the Jscrambler Web App. If you wish to retrieve them manually, refer to our guide.

The

params

section of

.jscramblerrc

specifies the transformations that will be used to protect your Vue app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.

We will go back to this file later on — we will place it on the root folder of our Vue projects and it will be configured differently depending on whether you're using vue-cli or webpack to build your app.

Integrating Jscrambler with vue-cli

To demonstrate this integration, we'll use an example Vue app,

vue-realworld-example-app

and protect it using Jscrambler. Let's clone the app from GitHub:

git clone https://github.com/JscramblerBlog/vue-realworld-example-app.git

Now we simply need to install the required dependencies:

cd vue-realworld-example-app
npm i

And we're ready to run our cloned app to check if everything looks right:

npm run serve

A development build of the app will start and you can access it on

localhost:8080

. You should see the "Counduit" app running:

Under the hood, our Vue application has this structure:

vue-realworld-example-app/
|-- babel.config.json
|-- jest.config.json
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- yarn.lock
|-- dist/
|-- node_modules/
|-- public/
|-- src/
|-- static/
|-- tests/

```
package.json
```
contains all the configurations which are related to npm such as dependencies, version and scripts.
The
```
src
```
directory features all the source code of the application. The sources are then built and packed into the dist directory. This is where our protected HTML and JavaScript files will be placed after the build.

Now moving on to our integration, the first step is installing the Jscrambler API Client:

npm i jscrambler --save-dev

To integrate Jscrambler in our application's build process via the CLI, we need to create a CLI hook

&& jscrambler

in the scripts section of

package.json

. The section should look like this:

"scripts": {
  "build": "cross-env BABEL_ENV=dev vue-cli-service build && jscrambler",
  "lint": "vue-cli-service lint",
  "serve": "cross-env BABEL_ENV=dev vue-cli-service serve",
  "test": "cross-env BABEL_ENV=test jest --coverage"
},

The

"build": "cross-env BABEL_ENV=dev vue-cli-service build && jscrambler"

hook will trigger the jscrambler command after the build process is finished.

Earlier, we generated a

.jscramblerrc

settings file. Now, we need to place it on the project's root folder. To integrate it with vue-cli, we need to add two new fields:

filesSrc

and

filesDest

(see below). Your final

.jscramblerrc

file should look like this:

{
 "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,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true,
 "jscramblerVersion": "6.<X>"
}

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. 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.

We are now ready to protect our code and build our application via the CLI:

npm run build

This will create the protected production files on the

dist

folder.

And you're done! Now all your HTML and JavaScript files are protected with Jscrambler against code theft and reverse-engineering. Feel free to jump to the "Testing the Protected Vue App" section below, where we'll run the protected app and inspect our source code.

webpack

Due to the popularity of webpack among developers, your Vue project may be using webpack to bundle the application files. With that in mind, let's set up a Vue app with webpack:

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

Using the last command, you should see the newly created boilerplate app running on

localhost:8080

as shown below:

We can now integrate Jscrambler using Jscrambler's webpack plugin. This plugin will use the configurations you specified earlier on the

.jscramblerrc

file. As such, we first need to place it on the project's root folder. Your file should look like this:

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "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,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true,
 "jscramblerVersion": "6.<X>"
}

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

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

To integrate Jscrambler in our Vue application's build process via webpack, we need to add it to the

webpack.prod.conf.js

file 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 just our app.js file
    })
  ]

Now we run our production build:

npm run build

Our protected app files will be found at

/dist/static/js/app.<HASH>.js

Testing the Protected Vue App

As a final step, let's check if our Vue app is running successfully with the newly-protected source code. Start by installing the required dependencies:

npm i -g serve

Next, let's simply deploy the app build files to a local server:

serve -s dist

As you should be able to see on the terminal, you can run this server on

localhost:5000

You can now check what your protected files look like. This can be achieved simply by opening the browser's debugger and opening the files from the "Sources" tab. The protected code should look like this:

Final Remarks

Vue is a simple, fast and effective framework for creating dynamic user interfaces and also a great way of leveraging component-based applications.

Integrating Jscrambler into Vue's build process is straightforward and allows you to ensure that your JavaScript code is always protected in production against reverse engineering or tampering.

In this tutorial, we only showed a simpler protection template (Obfuscation); however, you can achieve higher levels of security — namely by using the Self-Defending template and by fine-tuning the protection to match your specific use case.

Previously published at https://blog.jscrambler.com/how-to-protect-your-vue-js-application-with-jscrambler/