Need: Code Protection

Last updated on September 3rd, 2024

Welcome to Jscrambler 101! A collection of tutorials on how to use Jscrambler to protect your JavaScript. These tutorials cover Jscrambler version 8.1.

Introduction

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 the final section, we’ll also explain the first steps to using 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, now is the time to create one by clicking Try Jscrambler for Free or going to the login page.

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 for code lock protection with real-time notifications, preventing the app from running on any browser except the allow-listed 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 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 left 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 that 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.

If you click the JavaScript file common.js, you will see its content on the left side of the Text Editor, and some information about the file on the bottom-left of the page (as shown in the screenshot).

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 for protection. You can also find two available tabs:

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

Fine-Tuning

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 a Targets and an Advanced tab. You can select the targets and choose the transformations you want to apply in a simple way. If you want to take it one step further you can select the Advanced tab where you’ll get an additional set of options for your transformations.

If you hover over each transformation in the Advanced tab, a brief explanation will appear on each one. Take this as an example:

Templates

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 that 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 the 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 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 toward 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 Add App button, 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 Protect App option on the left sidebar.

How to Add Your Own File to Be Protected

On the left side of the screen, you have your file tree, where you can check which files have been uploaded to the app. You can add your JavaScript and HTML files or add a single Zip archive containing your project into the app.

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.

For tutorial purposes, let’s choose Identifiers Renaming and Whitespace Removal as our transformations (find them after toggling Advanced Options, in the Fine-Tuning tab).

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.

With your trial account, you can still try the greyed-out transformations, but only by selecting a predefined template.

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 cogwheel above the Fine Tuning tab, and then clicking “Download Settings in JSON”.

You will be able to decide whether to download the entire file or to download the file without your Jscrambler secrets. For the sake of this tutorial, download the entire file by selecting “All Parameters”.

You should have downloaded a file similar to the one below:

{
  "keys": {
    "accessKey": "myAccessKey",
    "secretKey": "mySecretKey"
  },
  "applicationId": "myApplicationID",
  "params": [
        {
      "name": "identifiersRenaming"
    },
    {
      "name": "whitespaceRemoval"
    }
  ],
  "areSubscribersOrdered": false,
  "applicationTypes": {
    "webBrowserApp": false,
    "desktopApp": false,
    "serverApp": false,
    "hybridMobileApp": false,
    "javascriptNativeApp": false,
    "html5GameApp": false
  },
  "languageSpecifications": {
    "es5": true,
    "es6": false,
    "es7": false
  },
  "useRecommendedOrder": true,
  "jscramblerVersion": "8.1",
  "tolerateMinification": true
}

The AccessKey and SecretKey vary from user to user, while applicationId changes according to the application you are protecting. You can check your application inside the app, above the text editor:
As for your AccessKey and SecretKey, you can check them on the My Profile page, under the “API Credentials” section:
For further directions on using the Jscrambler CLI, check our following 101 article.

In case you’re using a specific JavaScript framework or library, see our integration tutorials below:

• React

• Angular

• Angular.js

• Vue.js

• Ember.js

• Meteor

• Ionic

• NativeScript

• React Native

• More information about Framework Compatibility

Conclusion

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)

• Jscrambler 101 — App Classification

• Jscrambler 101 — Memory Protection

• Jscrambler 101 — SIEM Integration

• Jscrambler 101 – Anti-Tampering

• Jscrambler 101 – Anti-Debugging

• Jscrambler 101 – Collaborative Workspace

Enjoy your testing and start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.

Welcome back to Jscrambler 101, a collection of tutorials on how to use Jscrambler to protect your JavaScript. This tutorial is about SIEM integration and covers Jscrambler version 7.2.

Introduction

Last time, on Jscrambler 101: Memory Protection, we explored a new Jscrambler feature that ciphers sensitive data using cryptographic algorithms, only allowing the data to be deciphered when it needs to be accessed by the application.

This time, we’re going to explore SIEM Integration, a new Jscrambler feature that allows you to forward and aggregate the valuable security Information Jscrambler gives you into a SIEM (e.g., Elasticsearch, Splunk).

SIEM Integration

From Jscrambler version 6.0 onwards, we provide a JavaScript Threat Monitoring module that displays a real-time notification on the Jscrambler dashboard as soon as some violation occurs, such as the client’s JavaScript code being tampered with or used in a different environment or date from the one(s) that are set on the protection configuration.

Now, with the SIEM Integration, you can easily access all that valuable information from one place and automate the process of looking at audit logs and alerting.

Setting up your SIEM Integration

To set up the integration between Jscrambler and your SIEM, you need to configure a Jscrambler notification driver and map the fields of the notification body. Let’s explore these steps below.

To access the SIEM Integrations page, go to the Jscrambler dashboard, select the target application, and then click the “Integration” link under the Setup section.



Currently, we provide two types of drivers that your SIEM will most likely be compatible with: Elasticsearch and Webhook. Below, we will explore how to set things up in each of these.

Elasticsearch

To set up real-time notifications with an Elasticsearch instance, select the Elasticsearch Notification driver from the dropdown box and click the “Add” button.

Then, you will need to configure the following parameters according to your Elasticsearch setup:

• Title: Name of this integration

• URI: Network endpoint of your Elasticsearch instance (must be publicly available)

• Accept All Certificates: turn on to allow self-signed certificates

• Username/Password: client authorization to the Elasticsearch instance

• Request Timeout (milliseconds): maximum amount of time waiting for the request to be completed

• Max. Number of Retries: number of times the service attempts to deliver the Real-Time Notification once the first attempt fails

• Elasticsearch Index: name of the Elasticsearch index where your notifications will be grouped

• Elasticsearch Type: name of the Elasticsearch type
  

When you are done, click on the Create button to validate and store the configured Elasticsearch integration.

Webhook

To set up real-time notifications with a Webhook, select the Webhook Notification driver from the dropdown box and click on the “Add” button.

Then, you need to configure the following parameters according to your SIEM (which should be capable of receiving HTTPS requests):

• Title: Name of this integration

• Endpoint to send a POST Request: Network endpoint of your HTTP (S) server instance (must be publicly available)

• Basic Authentication Username/Password: client authorization to the HTTP (S) server

• Support Self-Signed Certificates: turn on to allow self-signed certificates

• Max. Number of Retries: number of times the service attempts to deliver the Real-Time Notification once the first attempt fails

When you are done, click on the Create button to validate and store the configured webhook integration.

And that’s all from the Jscrambler dashboard! Let’s now see how to map the notification body to the respective security alerts.

Mapping the notification body

Each real-time notification sent by Jscrambler will follow the pattern below:

{
  "title": "Real time notification",
  "description": "Code violation: j-003-00001",
  "body": {
	"0": "j-003-00001",
	"1": 1625757006491,
	"2": -60,
	"3": "Linux x86_64",
	"4": "Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0",
	"5": "https://example.com/index.html",
	"8": "Gecko"
  },
  “clientIp”: “111.111.111.111”
}

To properly visualize this data in your SIEM, you should map these fields to their corresponding descriptions.

Here’s the meaning of each field in the request’s body:

As for the alert codes of body[“0”], find the corresponding alert description below:

And that’s it! You’re done with the required configuration.

End Result

Now that you have set up your SIEM integration, you should see real-time notifications in your SIEM. In the image below, you can see a preview of the resulting dashboard using Kibana.



Now that you have centralized your security information in one system, it is easier to start automating your audit logs and alert checkups.

Conclusion

We have reached the end of our Jscrambler SIEM Integration tutorial.

As you saw, getting started with this feature is a simple, one-time process that will enrich your SIEM with valuable information. Don’t miss this chance to start centralizing your security information and making it easier to maintain in-depth security.

Feel free to proceed to one of our 101 Tutorials:

• Jscrambler 101 — First Use

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

• Jscrambler 101 — App Classification

• Jscrambler 101 — Memory Protection
  

Enjoy your testing. Start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.

Welcome back to Jscrambler 101! A collection of tutorials on how to use Jscrambler to protect your JavaScript. This tutorial covers Jscrambler version 7.1.

Introduction

Last time, on Jscrambler 101 — App Classification, we explored a new Jscrambler feature that classifies your apps and adjusts Jscrambler’s protections to maximize their security and performance.

This time, we’re going to explore Memory Protection, a new Jscrambler feature that increases the security of sensitive data in your apps.

Memory Protection

In Web and Mobile applications, sensitive data often passes through the client-side. More specifically, values stored in memory can be accessed and tampered with at runtime.

Attackers’ motivations to exploit the app’s memory may vary from lower-risk to critical-risk. Generally, they will do it for one of these reasons:

• to reverse-engineer the code and understand its mechanics;
• to modify the app’s behavior and, for example, access new features;
• to access and retrieve sensitive data, for example, in Contact Tracing apps.

In comes Memory Protection, is a new Jscrambler feature that ciphers sensitive data using cryptographic algorithms, only allowing the data to be deciphered when it needs to be accessed by the application.

Memory Protection can be applied to strings and numbers that are present in complex structures like objects and arrays.

Memory Attack Example

Let’s look at an attack example using our Jscrambler Racer HTML5 app.

In this simple HTML5 game, you do some laps with a racing car, attempting to keep your lap time as low as possible. We even have a Fastest Lap scoreboard at the top.

Without question, a next-gen AAA racing game.

So let’s assume we are an attacker wanting to cheat by changing our current lap time. This is a perfect example of a value that’s typically stored in memory.

So, using one of many widely available tools for tampering with the memory, we can start looking for the Time value by trial and error at runtime.

So, when the time is at 15 seconds, we can look for values between 10 and 20. This retrieves 1718 results. Then, we keep refining our search as the time increases and, when we finally get 1 result, we can directly modify its value. Et voilà, we are now the best Jscrambler Racer player of all time.

Memory Protection Example

Now, let’s look at how this attack would unfold if this app’s JavaScript and HTML5 code were protected using Jscrambler with the Memory Protection feature.

First off, we need to upload our app to the Jscrambler Web app and open the file that contains its source code.

We can apply Memory Protection using Code Annotations. In our example, we want to protect the function that handles the Time value:

// @jscrambler enable memoryProtection
function () {
    // other variables
    var currentLapTime = 0;
    var lastLapTime    = null;
    var keyLeft        = false;
    var keyRight       = false;
    var keyFaster      = false;
    var keySlower      = false;
    var hud = {
      speed:            { value: null, dom: Dom.get('speed_value')            },
      current_lap_time: { value: null, dom: Dom.get('current_lap_time_value') },
      last_lap_time:    { value: null, dom: Dom.get('last_lap_time_value')    },
      fast_lap_time:    { value: null, dom: Dom.get('fast_lap_time_value')    }
    }
    // other nested functions below
    function update(dt) {
      var n, car, carW, sprite, spriteW;
      // other variables in nested functions
    }
}

Using the settings we defined above, Memory Protection will be applied both to the primary function and all nested functions.

Because we know that these nested functions don’t pose a security risk, we should disable Memory Protection on them to ensure maximum performance of the protected app.

We do this by adding the // @jscrambler disable memoryProtection code annotation before each nested function:

// @jscrambler enable memoryProtection
function () {
    // variables
    }
    // other nested functions below
    // @jscrambler disable memoryProtection
    function update(dt) {
      // variables in nested functions
    }
}

Now that we have added Memory Protection to all high-risk objects, we can protect the app and run the newly protected version. Let’s try to replicate the attack on the protected app.

As we can see, Memory Protection prevents the attacker from gaining access to the value in memory, eventually getting 0 results.

Use Cases

Looking back at the 3 main scenarios for memory attacks that we presented earlier, our demo above is a good example of “modifying the app’s behavior and, for example, accessing new features”. So, changing values stored in memory can allow attackers to cheat.

However, another very significant scenario is with applications that handle critically sensitive data, such as government, healthcare, and financial apps. In those, an attack on the memory can have devastating results, with the exfiltration of extremely sensitive user data when certain conditions are met.

Conclusion

And so we reach the end of our Jscrambler Memory Protection tutorial.

As you’ll see in our upcoming tutorials, this is one of the new Jscrambler features aimed at protecting sensitive data within web and mobile applications. Now more than ever, companies have the duty of keeping their users’ data secure. Enjoy your testing and start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.

Welcome back to Jscrambler 101! A collection of tutorials on how to use Jscrambler to protect your JavaScript. This tutorial covers Jscrambler version 6.3.

Introduction

Last time, on Jscrambler 101 — Self-Healing, we explored a new anti-tampering approach that ensures that the app doesn’t break when tampering is detected while regenerating the original code.

This time, we’re going to delve into a new Jscrambler feature: Profiling. We will explain why Profiling is a valuable feature for performance-critical apps, how you can use it in your own apps, and its main use cases.

Profiling

When protecting JavaScript, it’s desirable to achieve the optimal balance between three key metrics: potency, resilience, and cost. The first two correlate to the overall strength of the code protection, while the last refers to eventual impacts on performance and code size.

Often, applying a strong set of protections to the whole source code doesn’t affect the performance of the app. However, some applications tend to perform less than ideal when this is done. In those cases, we can reduce Cost manually using Code Annotations — specifying different protection templates to parts of the code that we know to be crucial to performance.

Jscrambler Profiling is a new way of achieving this goal effortlessly by understanding which parts of the code are performance-critical and applying the best transformations when you protect your code.

When To Use Profiling

Now that we understand the basics of Jscrambler Profiling, it begs the question: when should we use Profiling?

As a general rule, before using Profiling, you should protect your application normally and check if the protected app has any performance issues. If it doesn’t, then there is no reason to use Jscrambler Profiling.

Setting Up Profiling

From Jscrambler version 6.3 onwards, Profiling can be set up both via the Web App and via the CLI. We’ll cover both strategies step-by-step. If you intend to use the CLI, please don’t skip the instructions on the Web App Setup, as they cover essential Profiling concepts.

We will be using the “Jscrambler HTML5 Racer” app as an example.

Initial Setup Using The Web App

Once you’re on your app’s Code Protection Builder page on the Jscrambler Web App, switch from the “Protect App” context to “Create Profiling” by using the dropdown on the right sidebar as shown below:

Now, we need to instrument our app. This step adapts the application to include tools that will measure the performance of the original application and report data back to Jscrambler. It’s as simple as clicking “Instrument Application” and then downloading the newly instrumented app.

This instrumented app is not protected — do not send it to production! Instead, we will be using it to run the app in a testing environment so that it sends performance data to the Jscrambler profiler. To do so, let’s click “Start Profiling”.

From this point onwards, Jscrambler Profiling is actively receiving data whenever the profiled app is run. Our objective here is to run the app in a way that “exercises” as many functions of our code as possible, and/or the application “flows” that you believe to be less performant than usual.

So, let’s unzip the previously downloaded instrumented app and run it in our browser.

Don’t worry if the profiled app doesn’t run smoothly — this slowdown is due to the overhead of measuring the properties of the application, and will not be present in the final protected version.

As we do this, we can check the Jscrambler Profiling progress in the Web App. There, we will see a number of reports coming in as shown below — this is the collected performance data that will be essential to let Jscrambler figure out which parts of the code are performance-critical.

You can also run your automated unit tests with the instrumented code so that all program flows are tested.

Once we consider that we have tested most of the application, we can click “Stop Current Profiling”. Note that Profiling will also finish automatically if no data is received for 30 minutes.

Now that we have finished Profiling our app, the next step is to check the results. This step is the same for the Web App and CLI approaches.

Initial Setup Using The CLI

Note: The instructions for the CLI can also be seen in a small video.

Let’s consider that we have a simple project with our example app within the following directory:

simpleRacerDemo/
|-- profiling-ready/
|-- protected/
|-- unprotected/
| |-- *.js
| |-- *.html
|-- jscrambler.json

Our first step is to generate the jscrambler.json file through the Web App as shown below and place it on our root folder.

Now, let’s generate the instrumented version of our app (placing it on the profiling-ready/ folder) with the following command:

jscrambler -c jscrambler.json --instrument --output-dir profiling-ready/ unprotected/**/**

We’re now ready to exercise the logic of our instrumented app. Let’s initiate the Profiling process with:

jscrambler -c jscrambler.json --start-profiling

The next step is to start running tests that cover as many possible use cases of our app as possible (luckily, in our case, this means taking our Jscrambler race car for a spin!).

Once we’re happy with our tests, let’s stop the Profiling process with:

jscrambler -c jscrambler.json --stop-profiling

And there we have it! Our app is now Profiled and our next step is analyzing the Profiling results and fine-tuning them if needed.

Profiling Results

When we stop the Profiling process, Jscrambler will process all the collected data and we will see a summary of the Profiling results on the Web App.

On this updated screen, we see 4 main results:

• Profiled Functions: Functions that were executed during Profiling;
• Remaining Functions: Functions that were not executed during Profiling;
• Recommended Settings: Functions that will be protected with the recommended settings by Profiling; for example, recommending the “Light Obfuscation” default template when a function is profiled as being performance-critical;
• General Settings: Functions that will be protected with the general settings selected by you in the Protection Builder.

We can also click “See Report” to check each profiled function of your app and their Profiling recommendations.

On this page, we can change the template that Profiling suggested in each instance — perhaps we know that a certain function is security-critical but Profiling suggested a “Light Obfuscation” template; we can change this template to “General Settings” to ensure that this specific function will be protected with the overall protection settings.

Note that you should upload Source Maps in cases where you are using transpilers or module bundlers, for example. Simply use the “Source Maps” toggle for this.

We will also see some references to “Annotations”. This has to do with the different Profiling modes that can be used to apply Profiling recommendations when it’s time to protect the app. Let’s explore that next.

Protecting a Profiled App

Since Jscrambler version 6.3 onwards, there are 3 different Profiling modes: Annotations, Automatic, and Off.

Deciding which to choose depends on your objectives. The Annotations mode requires a one-time additional step where you have to annotate your code – meaning that Profiling results will persist after source code changes. The Automatic mode automatically applies Profiling results at protection time, but new Profiling is needed after source code changes.

So, as a rule of thumb, you will find the Automatic mode more useful when you’re first trying out Profiling or just wanting to see its results quickly. The Annotations mode is more beneficial when you want to easily integrate Profiling into your CI/CD pipeline.

The Off mode, as the name implies, doesn’t use the Profiling results at all when protecting the code.

Choosing a Profiling mode and protecting the app varies depending on whether you’re using the Web App or the CLI. Let’s explore both below.

Protecting Profiled App Via the Web App

Let’s change our Web App context from “Create Profiling” to “Protect App” using the dropdown on the top right. Now, we can choose a Profiling mode on the bottom dropdown, as shown below.

If we’re using the Automatic mode, then our next step is simply to click “Protect App”. Jscrambler will automatically apply the Profiling results and we’ll get our protected code.

But if you want to use the Annotations mode, you’ll have to get back to the Profiling Results page. Once there, you can either download a .csv file with all Annotations or copy them one by one, as shown below.

In both instances, you’ll have clear instructions about the position (line/column) of the annotation. Let’s look at an example:

"// @jscrambler profiling default lightObfuscation","highCostFunction",1:10,"index.js"

This means that we have to find function highCostFunction on line 1, column 10, and add the Profiling annotation so that the final result looks like this:

// @jscrambler profiling default lightObfuscation
function highCostFunction() {
 // performance-intensive logic
}

If you plan on using minifiers, consider adding these annotations as strings to avoid having them removed.

After placing the required annotations, we go back to the “Protect App” context, change the Profiling mode to Annotations, and click the “Protect App” button. Jscrambler will use our Profiling annotations and protect the code accordingly.

If, after this, we make some minor changes to our source code, we probably won’t have to profile the app again — Profiling is necessary after major changes.

Now, all that’s left for us to do is check the performance of our protected app.

Protecting Profiled App Via the CLI

Now that we understand the different Profiling modes, we are one command away from protecting our code.

So, if we want to use the Automatic mode, we use the command:

jscrambler -c jscrambler.json --profiling-data-mode automatic

This will create a new folder inside the protected/ folder with our newly protected app. Following our example, we can serve it locally with:

http-server protected/unprotected/

Final App Test

We can now test our final app, which was protected using Profiling recommendations. Let’s take our Jscrambler race car out of the garage for another spin:

Not only does our HTML5 app run with great performance, but all of its code is also protected with an excellent potency-resilience-cost balance. Based on our tests for this HTML5 app, the average performance of the protected profiled app (measured in FPS) was 35% better than the un-profiled protected app.

And remember, our code is still protected with the best JavaScript protection available today:

With Jscrambler Profiling doing all the heavy lifting to obtain most of the gain, we could now still use Code Annotations if we wished to tweak performance even further.

Conclusion

This sums up Jscrambler Profiling — a feature that enables effortlessly improving the performance of protected code in complex apps.

Enjoy your testing and start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.

Last updated on May 5th, 2023

Welcome back to Jscrambler 101! A collection of tutorials on how to use Jscrambler to protect your JavaScript. These tutorials cover Jscrambler version 8.1.

Introduction – How to Use the CLI

Last time, we talked about Jscrambler’s Code Locks and how they could be used to protect your JavaScript and enforce licenses.

We’ve decided to take a step back from our transformations and show you a simple way to protect your code through our command line interface (CLI).

Let’s take a sample project:

Note that there’s a subfolder structure. Inside the js folder, we have a dontProtect.js file that we don’t want to protect with Jscrambler, but we do want to protect the clock.js and the index.html files.

Ignore files

We’ll start by creating a .jscramblerignore file in order to ignore the dontProtect.js file.

The .jscramblerignore file must be placed at the root of your project. The level where you should place this file depends on how you plan to zip your project.

If you will zip the project from inside the sample project folder, the .jscramblerignore file should be at the same level as index.html.

As so, the .jscramblerignore file should include the following:

js/dontProtect.js

If you want to include the sample project folder in your zip file, then the .jscramblerignore file should be at the same level as this folder.

In this case, the .jscramblerignore file should have the following:

sample project/js/dontProtect.js

You can also use .jscramblerignore for folders, and to include certain files in the protection process. For example:

#ignore all files in js folder
sample project/js/

#except for clock.js
!sample project/js/clock.js

Now, we’re ready to protect our application using the CLI.

Download jscrambler.json

First, we have to go to Jscrambler’s Dashboard and create an application by clicking the Create App button.

Once you’re inside the app, select the Application Modes and the Transformations you want to apply (or select a template). Once that’s done, download your selections to a jscrambler.json file by clicking on the lower cogwheel in the top right corner of the screen, then selecting “Download Settings in JSON”. It will give you 2 options, No Secrets or All Parameters. Since the Jscrambler secrets are required to use the CLI, for the sake of this tutorial, you can download the file with All Parameters.

Installing the CLI

Let’s continue by installing the CLI through node’s package manager:

npm install -g jscrambler

Now let’s zip our project, and remember to include the .jscramblerignore file. For ease, we will place our jscrambler.json file next to our zip file, but they could be in different locations.

Now, open your terminal, and after navigating to the same folder where you have your zip and jscrambler.json file, run the following:

jscrambler -c jscrambler.json -o protected sampleProject.zip

This means that the sampleProject.zip will be protected and placed in the protected folder.

Now, you can test if the protection worked correctly. If you open the dontProtect.js file, you’ll notice that no changes occurred in this file. All other JavaScript files which were not included in dontProtect.js will be protected.

You can find further information about the Jscrambler CLI options.

Integrations with Frameworks and Libraries

In case you’re using a specific JavaScript framework or library, see our integration tutorials below:

• React

• Angular

• Angular.js

• Vue.js

• Ionic

• NativeScript

• React Native
  
  

More information about Framework Compatibility

Conclusion

Feel free to proceed to one of our other 101 Tutorials:

• Jscrambler 101 — First Use

• Jscrambler 101 — Code Annotations (Code Performance)

• Jscrambler 101 — Self Defending

• Jscrambler 101 — Control Flow Flattening

• Jscrambler 101 — Code Locks

• Jscrambler 101 — Source Maps

• Jscrambler 101 — Countermeasures

• Jscrambler 101 — Self-Healing

• Jscrambler 101 — Profiling (Code Performance)

• Jscrambler 101 — App Classification

• Jscrambler 101 — Memory Protection

• Jscrambler 101 — SIEM Integration

Enjoy your testing and start protecting your Applications ASAP! If you have any additional questions, feel free to contact us.