October 23, 2019

Jscrambler 101 — Profiling

by Jscrambler

Jscrambler 101 — Profiling

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

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.

There are several cases where applying a very strong set of protections doesn't really affect the performance of the app. However, some applications tend to perform less than ideal when strong protection is applied to all parts of the code.

To keep Cost to a minimum, a good strategy is to apply performance-friendly protection templates to the parts of the code that take the longest time to execute, while keeping the strongest protection templates on the remaining code.

As we saw in a previous tutorial, this can be achieved manually with Code Annotations. With this feature, you can specify different protection templates to parts of the code that you know to be crucial to performance.

However, thanks to Jscrambler Profiling, now you have a way of achieving this goal effortlessly by letting Profiling understand which parts of the code are performance-critical and automatically applying the best transformations when you protect your code.

Jscrambler Profiling helps you achieve the best potency-resilience-cost balance.

Setting Up Profiling

All of Jscrambler Profiling's setup is done via the Web App. Once you're on your app's Code Protection Builder page, you will see some instructions on how to Profile your app. Let's follow them. In this example, we will be using the "Jscrambler HTML5 Racing" app.

First off, we need to change from the Protection Builder mode to the Application Profiling mode, either by using the dropdown on the top right or clicking "Profile App" on the bottom right:

Jscrambler Profiling Start

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

Profiling Results

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. So, let's unzip the previously downloaded instrumented app and run it in our browser.

Instrumented App

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 — this is the collected performance data that will be essential to let Jscrambler figure out which parts of the code are performance-critical.

Jscrambler Profiling Running

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. In either case, Jscrambler will process all the collected data and we will see a summary of the Profiling results.

Jscrambler Profiling Results

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.

If you are unsure about the results you got, check our documentation for some more advanced tips.

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.

Jscrambler Profiling Report

And that's it — Profiling is done! We're now ready to protect our app.

Protecting a Profiled App

Let's click "Create Protection" and protect our app as we usually do — for example, by using the Advanced Obfuscation template. To incorporate the results and decisions made by Jscrambler Profiling, we simply need to tick the "Use Profiling" checkbox right next to the "Protect App" button. Now, let's protect the app and see how it runs!

Protected Profiled App

Not only does our HTML5 app run with great performance, all of its code is 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:

Jscrambler Profiling Protected Code

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.

Profiling Use Cases

Now that we have explored how Jscrambler Profiling works and what its outcomes are, it begs the question: when should we use Profiling?

As a rule of thumb, Profiling is most useful for complex applications. Namely, HTML5 games (as we saw in the example), 3D rendering, and online video delivery — to name a few.

For a more detailed explanation of this and other questions you may have, feel free to check our Profiling docs.

Conclusion

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

In case you have some questions or difficulties, our support team will be happy to help by email. If you wish to read our other 101 Tutorials, you can find them here.

Enjoy your testing and start protecting your Applications ASAP!