# Protect the JavaScript code in HTML 5 applications
## -Quick Start Guide
Virbox Protector support developer to protect the JavaScript Code in the [HTML 5](https://en.wikipedia.org/wiki/HTML5) 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](http://www.electronjs.org/);
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 -o `
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 -o `
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`
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://documentation.virbox.com/use-cases/protect-scripting-language/protect-the-javascript-code-in-html-5-applications.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.