Hackernoon logoHow To Protect Your Vue.js Application With Jscrambler by@Fortuna

How To Protect Your Vue.js Application With Jscrambler

Author profile picture

@FortunaPedro Fortuna

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

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!