Last updated on October 24th, 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. In a final section, we'll also explain the first steps to use our command-line interface (CLI).
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 Try Jscrambler for Free or going here.
The first time you open Jscrambler's web app, you will see a callout message to click the Playground app. After clicking it, 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 a code lock protection with real-time notifications, preventing the app from running on any browser except the whitelisted one.
Now, you will be prompted to run your newly protected app. When you run it, our HTML5 racing game will attempt to run in your current browser, which will trigger the code lock.
Because the code lock has the real-time notifications feature enabled, you can now click "See Notifications". This will lead you to your brand new live feed, where you'll see an alert that someone tried to run the code outside of the lock.
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, click the Playground app. This is a sample HTML5 racing game which will enable you to test our transformations. After opening the Playground, in the File Tree on the left, you will see a set of pre-configured sample files.
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 New App button on the top right, insert a name in the input like Hello World, select the Protection Type as "Code Integrity", and click Create to create your own Jscrambler project.
This will redirect you to the Live Feed for your newly created app. To enter the Code Integrity protection builder, click the Builder option on the left sidebar.
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.
Jscrambler CLI First Steps
With the Jscrambler CLI, you can easily integrate Jscrambler into your build process.
To get your Jscrambler configuration settings quickly, select the transformations you want (or a template) directly from the dashboard, and then download a JSON file by clicking the blue download button next to the Application Settings.
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 the My Profile page, under the "API Credentials" section:
For further directions on using the Jscrambler CLI, check our following 101 article.
- React Native
- More information about Framework Compatibility
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
- Jscrambler 101 — Self-Healing
- Jscrambler 101 — Profiling (Code Performance)
And don't forget to check our Documentation, 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.