This post focuses on , a JavaScript protection product to which the author is affiliated (as CTO). Disclosure: Jscrambler As you may know, one thing that all JavaScript apps have in common — regardless of the framework they use — is that client-side to reverse-engineering or tampering attempts. Apps powered by Vue are no exception to this. JavaScript code is exposed 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 and . We will explore how to integrate Jscrambler into each case. Vue CLI webpack 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: . As such, we will need to create this file to specify which transformations we wish to use. .jscramblerrc The quickest way to achieve this is via the . Once there, create a new app. Now, select the transformations you want (check the and tabs). In this tutorial, we'll be selecting the template. If you need help with these steps, check this . Jscrambler Web App Templates Fine-Tuning Obfuscation guide Now, download a , which will be used only for quickly getting the required settings. JSON file with all this configuration Now, let's create a new file named . Open the file you just downloaded and copy all its contents to the file. .jscramblerrc jscrambler.json .jscramblerrc You will find that the fields , and will already be filled, since we generated the file on the Jscrambler Web App. If you wish to retrieve them manually, refer to our . accessKey secretKey applicationId guide The section of specifies the transformations that will be used to protect your Vue app. , by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations . params .jscramblerrc These can be hand-picked by you 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, and protect it using Jscrambler. Let's clone the app from GitHub: vue-realworld-example-app git https://github.com/JscramblerBlog/vue-realworld-example-app.git clone Now we simply need to install the required dependencies: vue-realworld-example-app npm i cd 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 . You should see the "Counduit" app running: localhost:8080 Under the hood, our application has this structure: Vue 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/ contains all the configurations which are related to npm such as dependencies, version and scripts. package.json The 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. src 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 in the section of . The section should look like this: && jscrambler scripts package.json : { : , : , : , : }, "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 hook will trigger the jscrambler command after the build process is finished. "build": "cross-env BABEL_ENV=dev vue-cli-service build && jscrambler" Earlier, we generated a 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: and (see below). Your final file should look like this: .jscramblerrc filesSrc filesDest .jscramblerrc { : { : <ACCESS_KEY_HERE>, : <SECRET_KEY_HERE> }, : <APP_ID_HERE>, : [ , ], : , : [ { : }, { : , : { : } }, { : }, { : }, { : }, { : }, { : { : , : [ ] }, : }, { : }, { : }, { : } ], : , : { : , : , : , : , : , : }, : { : , : , : }, : , : } "keys" "accessKey" "secretKey" "applicationId" "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 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. filesSrc By using , the files we send to protect will be overwritten by their protected version. filesDest: './' 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 folder. dist 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 among developers, your Vue project may be using webpack to bundle the application files. With that in mind, let's set up a : webpack Vue app with webpack npm install -g vue-cli vue init webpack my-project my-project npm install npm run dev cd Using the last command, you should see the newly created boilerplate app running on as shown below: localhost:8080 We can now integrate Jscrambler using . This plugin will use the configurations you specified earlier on the file. As such, we first need to place it on the project's root folder. Your file should look like this: Jscrambler's webpack plugin .jscramblerrc { : { : <ACCESS_KEY_HERE>, : <SECRET_KEY_HERE> }, : <APP_ID_HERE>, : [ { : }, { : , : { : } }, { : }, { : }, { : }, { : }, { : { : , : [ ] }, : }, { : }, { : }, { : } ], : , : { : , : , : , : , : , : }, : { : , : , : }, : , : } "keys" "accessKey" "secretKey" "applicationId" "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 file which is inside the build directory. First, by adding this line: webpack.prod.conf.js JscramblerWebpack = ( ); const require 'jscrambler-webpack-plugin' And then by adding the Jscrambler webpack plugin of the plugin array, so that it looks like this: at the end plugins: [ JscramblerWebpack({ : , chunks: [ ] }) ] // other plugins new enable true // optional, defaults to true '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 in production against reverse engineering or tampering. always protected In this tutorial, we only showed a simpler protection template (Obfuscation); however, you can achieve higher levels of security — namely by using the template and by fine-tuning the protection to match your specific use case. Self-Defending Previously published at https://blog.jscrambler.com/how-to-protect-your-vue-js-application-with-jscrambler/
