Getting Started

How to access your Dashboard

To start using the Jscrambler App head to app.jscrambler.com. After registering and logging in to your account, the Dashboard is presented. You will be prompted to protect a simple demonstration Application, and after that you will be able to create new ones.

Navigating through the Applications

By clicking Playground app, you'll be led into the application.

The Playground is a sample Web Application, and for the initial demo you will not need to worry about which features are available to you. On subsequent visits, all transformations you have access to can be used to protect the Playground application.

Protections done in the Playground won't lower the account balance, so it is the best application to test transformations without any worries.

In the File Tree on the left, there are all of our application files. By clicking one of these files, you will see its code on the left side of the Text Editor. On the right, the protected code will appear once a protection is made.

On the right side of the application there are two tabs:

• Templates, to select a default template, or use a custom template created from a specific set of transformations to your code;

• Fine Tuning, to select what transformations will be applied;

Note: if you are in any application other than the Playground, you will also see a dropdown:

For now, just leave it as "Protect App". You will only need to change this if you wish to use Application Profiling.

Adding transformations

Starting with the Fine Tuning tab, note there is an Advanced Options switch. By clicking it, more transformation options will become available. This happens due to the fact that some of the simpler options represent a set of advanced options, for example, Functions represents Function Outlining and Function Reordering in the Advanced Options.

Note: depending on your plan, some transformations may be unavailable in Fine Tuning, even if they are available as part of default templates.

Basic Mode:

Advanced Mode:

By hovering over each transformation in the Advanced Options, a brief explanation will appear explaining the use of each one.

Sidenote

You are able to clear all the selected transformations by clicking the trash icon in the bottom of the *Fine Tuning tab.

End Sidenote

Proceed with selecting Booleans, Functions, Identifiers and Objects in the Obfuscation options. In Optimization, select Minification, and in RASP (Runtime Application Self-Protection) select Self Defending. Alternatively, head to Templates and select the Self Defending template, as it has the same options as the ones mentioned above.

Now, by pressing the Protect App button at the bottom, the application will be protected, and the resulting protection will be available on the right side of the text editor.

Run

It is possible to run the Playground application right from this screen. This will allow you to compare the result without having to download the code. This feature is only available on the Playground.

You can use Run Source and Run Protected to compare the original application with the protected one.

Download

By pressing Download App, the protected code will be downloaded.

The selected transformations are good to obfuscate functions and objects, conceal logic, and prevent code tampering through anti-tampering and anti-debugging techniques. Attempts to tamper the code will break its functionality and using JavaScript debuggers will trigger defenses to prevent code analysis.

To test, you just have to open index.html in a browser.

Debugging the app will be impossible due to anti-debugging capability the application now has. The slightest change to the code will trigger anti-tampering and break the app. Finally, understanding the logic within the JavaScript code will of course be unfeasible.

Creating your own template

If the application should only run in a certain Domain, along with the Self Defending template, there's the possibility to save the set of transformations as a template so it is always ready to use. Head into the Fine Tuning tab, select Domain Lock and insert a domain. We want to see the code failing to run, so as an example we'll use www.foo.com in the domain. Let's protect and download the application again. When running this newly protected code, you will notice that the application does not show up.

Now we'll use a domain we can work with. In this case whatever shows up in the browser's navigator when on the application page. Add this domain to your accepted domains, and remove www.foo.com. Protect and download the application again and run it. The application will be working properly again.

Sidenote

These transformations aren't available in all plans so the template creation might fail. A working template for all plans is achieved by selecting Duplicate Literals Removal, Identifiers Renaming, and Whitespace Removal.

End Sidenote

To save these options as a template, go back to the Jscrambler application page. The transformation options should still be selected. Click the Save as Template button below the transformations. Give your template a name and a description, click Save as Template and a template will be created.

By going to the Templates tab the new Template will be visible under the Custom section.

App Creation

By going back to the Dashboard, and clicking the New App button, a new application can be created.

After filling in the Application’s name, setting the protection type to "Code Integrity", and clicking the Create button, the new application is created and the user is redirected to the application page.

File Addition

On the left side of the screen, there’s the File Tree, where users can check what files have been uploaded, or add JavaScript and HTML files, or add a single Zip archive containing a project into the app. By clicking the Add button on the left, a file can be created, uploaded, or gotten through a url.

With the files added to the project, transformations can be applied to the project, and its JavaScript code protected.

Download your transformations and use with API

To use the API, open the menu over the Fine Tuning and Templates tab, click on the dropdown "Download Settings in JSON" and select "All Parameters". This will download a JSON file with the selected transformations at the time. To download a template, select it then download the JSON configuration file.

The downloaded file will be similar to the one below:

{
  "keys": {
    "accessKey": "_YOUR_ACCESS_KEY_",
    "secretKey": "_YOUR_SECRET_KEY_"
  },
  "applicationId": "_YOUR_APPLICATION_ID_",
  "params": [
    {
      "name": "stringSplitting"
    }
  ],
  "areSubscribersOrdered": false
}

The accessKey and secretKey vary from user to user, while applicationId changes according to the application that will be protected.

The applicationId is inside the app, above the text editor.

As for the access and secret keys, these are available in your profile, at API Credentials.

Further information on the API, and Jscrambler’s transformations is available in our documentation.

If there are any questions regarding this or other issues, feel free to contact us at [email protected].

Continuous Integration

If you plan on setting up a Continuous Integration pipeline to protect your source code, please download the "No Secrets" Settings file since it doesn't include your keys and applicationId.

They can be securely set:

• as Jscrambler CLI arguments:

  jscrambler -a $JSCRAMBLER_ACCESS_KEY -s $JSCRAMBLER_SECRET_KEY -i $JSCRAMBLER_APPLICATION_ID -o dist src/**/*.*

• or as environment variables

  export jscrambler_keys__secretKey=********
  export jscrambler_keys__accessKey=********
  export jscrambler_keys__applicationId=********

• or as an input in the Jscrambler GitHub Action

Profiling your Application

Please check the Profiling Documentation as it gives a comprehensive overview about the Profiling feature.