Protect the JavaScript code in HTML 5 applications

-Quick Start Guide

Virbox Protector support developer to protect the JavaScript Code in the HTML 5 application, with multiple security technology: Obfuscation to Control flow, String encryption etc., which to prevent your HTML 5 project from being decompiled and debugged dynamically. and effectively to enhance HTML5 project security deployed in website and client side.

1. Overview

1.1 HTML 5 Application mades of 3 kinds of web language Javascript, HTML and css web language

  1. HTML file, used for the contents of website project usually;

  2. CSS file, cascade style sheets, which describe the website font, size, colors, the layout. store the website layout information. suffix with .css;

  3. JavaScript , .js file, is scripting language using in millions of WEb pages and client side application, which describe the functions, algorithm logic of website or light application. .js file is most key file in the HTML 5 project which need to protect the code for most of developers.

1.2 Virbox Protector support to protect following HTML 5 Project

Web based HTML5 project

Electron application;

UNIAPP;

Mini program or other HTML 5 application in client side etc.

.js source code/file which contain the import will be support soon;

1.3 Protect HTML project within 5 steps

  1. Save your HTML 5 project into the specified folder,

    for example, save your HTML project into \Hello-H5,

  2. Import your HTML project: Drag the whole folder \Hello-H5,into Virbox Protector GUI tool; then Virbox Protector will parse and show all of .js file contained in your HTML5 project;

  3. Select the .js file to be protected and set the protection option to the .js files, click to "Protect Selected Project" to protect the HTML 5 project;

  4. A new, protected folder will be generated: \Hello_H5_Protected.

  5. Entry this new folder and use HTML 5 project for following test/distribution. keep the source HTML 5 project and do not distribute source project.

2. Prerequisites

  1. Apply trial license & download and install Virbox Protector from Virbox website;

  2. HTML 5 application for test/evaluation is ready;

    The HTML 5 sample folder in this case below is: \Hello-H5

  3. Above pre-requisition is for test/evaluation Virbox Protector only. To protect formal and commercial release software, pls purchase and get the related Virbox Protector license.

3. Protection Process

  1. Open Virbox Protector GUI tool and drag the folder of your HTML 5 project into the GUI tool;

  2. Virbox Protector will parse and show all .js file of your HTML project in the HTML 5 Protection tab;

  3. Go to H5 protection tab (HTML 5 protection) to set the protection option, Click to select the Anti debugging to enable the "Anti-debug" functions;

Obfuscation of control flow and String of Encryption will be selected on default;

Click "Select File" button in right above to select the .js file which you want to protect.

4. Click "Protect Selected Project" to start protection, when GUI prompt "Protection Successful", you will find a new folder: \hello_H5_Protected, has been generated;

5. Use the protected HTML 5 project in the new folder generated for further testing;

4. Protect HTML 5 project with Virbox Protector CLI tool

Generate the Configuration file

Use the Virbox Protector GUI tool to generate the configuration file, which will be used to be protection configuration when use CLI tools to protect in second steps

the process you may refer protection process by use of Virbox Protector GUI tools above, when you complete the setting, click "Save Selected Configuration", you will find a new file which suffix is .ssp has been generated.

Virbox Protector CLI tool

Open a terminal console, go to the sub directory which Virbox Protector CLI tools located, you can view the help info by execute:

virboxprotector_con.exe

On default installation directory will be:

Windows: C:\Program Files\senseshield\Virbox Protector 2\bin

Linux: /usr/share/virboxprotector/bin

macOS: /Applications/Virbox Protector 2.app/Contents/MacOS/bin

Protect HTML 5 project by use of Virbox Protector CLI tool

Use following command to protect your HTML project with CLI tool:

The HTML 5 sample folder in this case below is: \h5-demo

  1. The configuration file has been copied to the same directory which HTML 5 file located.

[^copy the configuration file to the same directory of the HTML project ]:

virboxprotector_con -h5 <h5-demo> -o <h5-demo-protected>

2. No configuration file (.ssp file) available in the HTML 5 folder, use same command to protect HTML 5 folder, all of .js file in the HTML project will be protected on default;

virboxprotector_con -h5 <h5-demo> -o <h5-demo-protected>

3. The configuration file (.ssp file) stay in other folder, and you want to specify and use existed configuration files to protect the HTML 5 folder, then you need to specify the absolute path of .ssp file by use the parameter "X", see sample command:

virboxprotector_con -h5 h5-demo -x D:\Desktop\demo\h5-demo.ssp -o h5-demo-protected

PreviousProtect Python Project by PyProtectorNextFAQ

Last updated