Last updated on January 23rd, 2019
In this tutorial — First Use — you will be introduced to our interface and we will guide you through the process of making your first protection request. You will learn how to navigate the Web App, make different protections and protect your own apps.
How to Access Your Dashboard
To start using Jscrambler, you have to sign in with the credentials you used to create your account. If you don't have a Jscrambler account, this is the time to create one by clicking Start your Free Trial! or going here.
The first time you open Jscrambler's web app, you will see a demo screen as shown below.
In this demo, you have a sample code shown on the left side of the text editor. Follow the message bubble and click the Protect App button. Jscrambler will apply its most resilient protection techniques to the sample code and the protected code will appear on the right side of the text editor.
Now you can proceed to your own dashboard, simply by following the message bubble and clicking Dashboard on the top right menu.
Navigating the Playground App
To use your Dashboard, you must verify your email address.
In the Dashboard, hover the Playground App and select View App to enter. This Playground App will allow you to test all of our transformations applied to a sample file.
common.js, you will see its content on the left side of the Text Editor:
Now, let’s move on to the right side of the text editor. Here is where you will find the protected code after you apply a protection. You can also find three available tabs:
- Application Modes — where you can set language specifications and what type of app will be protected;
- Templates — where you can select one of our default templates (or use a template you created) in order to apply a saved set of transformations to the sample code.
- Fine-Tuning — where you can select which individual transformations you want to apply to the source code;
We'll now go over each of these tabs separately.
On this first tab, you will be able to set some details for your specific app. First, you have Language Specifications. This enables you to define the specification for which we can apply transformations. The protected code will be compatible with the specification you select here.
Below this, you should simply select the type of app you're looking to protect. This will help optimize Jscrambler's protected code for the environment where the app will run.
On this tab, you can specify the code transformations you want to apply to the source code one by one.
On the top, you’ll notice there’s an Advanced Options switch. If you click it, you’ll get an additional set of options. This is because some of our simpler options are created by a set of advanced options.
If you hover over each transformation in the Advanced Options, a brief explanation will appear on each one. Take this as an example:
Templates consist of a saved set of code protections. As so, they enable you to apply multiple pre-defined transformations without needing to choose them one-by-one every time.
On this tab, you will find Default Templates and Custom Templates. Default Templates are provided directly by us and contain sets of protections with self-explanatory purposes. As an example, the Advanced Obfuscation template will apply a set of protections which give your code the highest level of obfuscation.
Custom Templates consist of templates you created. Creating a template is simple: head over to the Fine-Tuning tab and select some protections. From there, just click the Create Template button below the transformations. Give your template a name and a description, click Save Template and you’re done!
If you go into Templates tab you should now see your new Template.
Protecting, Testing and Downloading the Code
It's time to start protecting our HTML5 racing game. As you may remember, we can do this two different ways: either by picking protections one by one on the Fine-Tuning tab or by selecting a pre-defined template on the Templates tab.
Let's go ahead and test the Advanced Obfuscation template. Select it on the Templates tab. If you're curious to see which transformations this template includes, simply go to the Fine-Tuning tab and check for yourself.
We're ready to apply these protections. To do that, press Protect App at the bottom. After the app is protected, you will see the result on the right side of the text editor. If nothing shows up, just click on the
common.js file. The result will be similar to this:
All protections you apply in the Playground won’t affect your account balance in any way — you can try everything without any worries.
Now, you can test the newly protected file. To do that, simply click "Run Protected" at the bottom of the screen. You will notice that the app will run normally, even though it's using the obfuscated code.
Downloading your newly protected code is also straightforward: simply press Download App (bottom left) and that’s it.
The transformations we applied during this simple process already go a long way towards protecting your code. They are suitable for obfuscating your functions and objects and concealing their logic.
How to Protect Your Own App
So far, we have covered the basics of Jscrambler by using the Playground app. Now, we will guide you through the process of protecting your own app. To return to the dashboard, click the Dashboard link on the menu.
Once there, you should click the Create App button, insert a name in the input like Test and click Create App to create your own Jscrambler project.
You should now be inside your application page, which will be similar to this:
How to Add Your Own File to Be Protected
If you click the "Add" button on the left, you can see that a file can be created directly from the interface, uploaded from your device, or obtained through a URL. Choose the most suitable option to add your app.
After you have some files in your file tree, you can apply transformations to your own code.
You may notice that some of the transformations are greyed out. This happens because you're currently using a free trial account. If you want to unlock all Jscrambler features, please upgrade your plan by contacting us through this page.
With your trial account, you can still try the greyed out transformations, but only by selecting a predefined template, which we'll cover below.
You can now protect your app with these transformations and check out what your protected code looks like. After that, it's ready to be downloaded and used. Remember you can always create new templates to apply these transformations later.
Downloading JSON File with Transformations
If you're looking to use our API, you are able to download a set of transformations from the dashboard to be applied. To do this, click the blue download button next to the Application Settings.
This will download a JSON file with whichever transformations you have selected at the time. If you want to download a template, first you have to select it, and then you can download its options using the method we just covered. You should have downloaded a file similar to the one below:
SecretKey vary from user to user, while
applicationId changes according to the application you are protecting. You can check your
applicationId inside the app, above the text editor:
As for your
SecretKey, you can check them in My Settings, under the "API Credentials" section:
A downloaded JSON file will be used in a following 101 article, which will detail how to use the CLI.
This concludes our first tutorial on how to use Jscrambler.
You should now be able to navigate easily through the available apps, create new projects, apply transformations to your code, save them as templates, and download them as a JSON file to be able to use the API.
Feel free to proceed to one of our next 101 Tutorials, according to your current needs:
- Jscrambler 101 — Code Annotations (Code Performance)
- Jscrambler 101 — Self Defending
- Jscrambler 101 — Control Flow Flattening
- Jscrambler 101 — Code Locks
- Jscrambler 101 — How to use the CLI
- Jscrambler 101 — Source Maps
- Jscrambler 101 — Countermeasures
And also check these pages, which may be very useful when getting started:
Enjoy your testing and start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.