Getting Started

How to access your Dashboard

Head to app.jscrambler.com to start using the Jscrambler App. After registering and logging in to your account, you will see the Dashboard. You will be prompted to protect a simple demo application to get an idea about how Code Integrity transformations are usually applied in the Dashboard. After that, you will be able to add your applications to apply protection.

Navigating through the Applications

By clicking the Playground app, you'll see the test application.

The Playground is a sample web application, and for the initial demo, you don’t need to worry about the Code Integrity features 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 your account balance, so it is the best application to test transformations without any worries.

In the File Tree on the left, you can find all the application files. By clicking one of these files, you will see its code on the left side of the Text Editor. The protected code will appear on the right once a protection is applied.

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

• Templates. Here, you can select a default template, or use a custom template created from a specific set of transformations to your code.

• Fine Tuning. Here, you can 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 only need to change this if you wish to use Application Profiling.

Adding transformations

Starting with the Fine Tuning tab, note that there is an Advanced Options switch. By clicking it, more transformation options will become available. This happens because 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 can clear all the selected transformations by clicking the trash icon at 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, after 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 for obfuscating functions and objects, concealing logic, and preventing 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 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.

If you go to the Templates tab, the new Template will be visible under the Custom section.

App Creation

If you go back to the Dashboard and click 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, you can find the File Tree, where users can check what files have been uploaded, add JavaScript and HTML files, and 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 it and its JavaScript code can be protected.

Download your transformations and use with API

To use the API, open the "Import / Export Settings" menu at the bottom right corner of the screen and select "Download All Settings". This will download a JSON file with the selected transformations at the time. To download a template, select it and 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, in 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 select Download Without Credentials since it doesn't include your keys and applicationId.

They can be securely set either:

• 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.