October 1, 2015

Securing Your Intel® XDK HTML5 App

By Pedro Fortuna | 8 min read

Securing Your Intel XDK HTML5 App

If you’re already using INTEL® XDK to develop your mobile applications, then more than likely, you’re already familiar with some of its features, like its user-friendly interface or how it can help you with publishing your app to multiple platforms.

When it comes to INTEL® XDK app security, the first line of defense for your source code lies in how the app actually works on a user’s phone. The app essentially runs in an empty browser shell – a Webview – that has been stripped of all its browser-like functionality, keeping all your source code from being viewed by the user.

There is an important distinction between native applications and INTEL® XDK applications. With native applications, the user only has access to the compiled version, making it harder to reverse-engineer. With INTEL® XDK applications, however, the raw HTML, CSS and JavaScript that makes the app run is actually stored right in the phone’s file system, making it that much easier to tamper with.

With this in mind, many developers have this lingering question: “What else can I do to protect my source code?”

OBFUSCATING YOUR CODE

A common method to add extra protection to your code is obfuscation. Obfuscation is the process of methodically transforming your code and making it nearly impossible to read with the naked eye. The code still works like it should in your application, but the process makes it extremely burdensome to reverse-engineer, thus keeping away virtually all potential attackers.

Well, Let’s Get Started!

In this tutorial, we’ll show you how to protect your code using the most resilient option for JavaScript protection: Jscrambler. In addition to obfuscating your code, Jscrambler offers developers a number of unique features for JavaScript protection.

Jscrambler allows you to: (1) optimize and compress your code, (2) restrict your code to use in only permitted browsers, (3) set expiration dates on your JavaScript functionality, which is great for trial periods, and (4) incorporate self-defending code into your application.

The self-defending code feature is especially handy because, just like it sounds, the code actually has built-in protection for itself. Here’s how it works. In a normal browser, users have the ability to view or modify the source JavaScript; however, self-defending code can actually detect these events and make the code break on purpose, preventing the user from accessing it.

Step 1 – Create a Sample Application.

sample-folder

First, let’s start by creating a sample application in INTEL® XDK. For this tutorial, we’ve created a sample game app (available from within the INTEL® XDK suite) and placed it in a folder named “SampleGame” on our desktop for easy access.

Step 2 – Log in to JScrambler.

Next, log in to your Jscrambler account. If you haven’t yet done this, go to the home page. Once there, click on the “Get Started Now!” button and log in or sign up using your Facebook, Google+, or email and password.

Note: Although the Free plan doesn’t cost you anything, it only offers basic code optimization. There is a one-month trial period that allows you to test the protection features.

Step 3 – Set Up the Jscrambler API

Although JScrambler does offer you the option to use a web-based interface for obfuscating your code, here we’ll show you how to quickly and easily protect your code right from the command line using an API client. We chose the Node.js version. There are others you can use.

Install Node.js. First, you’ll need to download Node.js by navigating to https://nodejs.org/download/ in your browser, clicking on the download button for your operating system, and following the simple on-screen instructions.

nodejs

Upload the Jscrambler package. Once the Node.js installation is complete, you’ll need to install the Jscrambler package. To do this, open your Command Prompt and enter the following command (highlighted in yellow).

command-prompt

Set up your .jscramblerrc file (optional). Although it is possible to enter all the necessary parameters right from the command line, this can be a bit tedious, especially if you make a single mistake; you’ll have to start again from scratch!
To make your life easier, let’s set up your .jscramblerrc file. This file will store basic information about your access keys and default preferences. The benefit of doing this is that you will only need to do it once, saving you a lot of time down the road.
First, begin by opening your preferred text editor and entering the following code.

{
 "keys”: {
 "accessKey": "XXXX",
 "secretKey": "XXXX"
 },
 "params": {
 "string_splitting": "%DEFAULT%",
 "function_reorder": "%DEFAULT%",
 "function_outlining": "%DEFAULT%",
 "dot_notation_elimination": "%DEFAULT%",
 "expiration_date": "2199-01-01",
 "rename_local": "%DEFAULT%",
 "whitespace": "%DEFAULT%",
 "literal_duplicates": "%DEFAULT%"
 }
}

Note: Jscrambler offers a number of different pre-set configuration options. You can find these at our GitHub monorepo. Simply open the package that most closely matches your project type and copy the contents.

Next, you’ll need to replace the “XXXX” sections with your API credentials. To find your credentials, log in to your Jscrambler account, click on the “My Account” button, scroll down to the “Web API Settings” section near the bottom of the page on the right, and click on the “My Credentials” link.

web-api-settings

Finally, move or save your new .jscramblerrc file to the home directory of your file system. (An example your home directory would be C:/Users/YourName.)

Note: If you are using a Windows machine, you may have trouble creating a file beginning with a dot (.) at the beginning. To get around this, you can create a new file from the command prompt by typing the following command

copy > null .jscramblerrc

This will create a hidden file in your current directory.

Run Jscrambler. Okay, now that we’ve set everything up, let’s run the program! Begin by opening Command Prompt. For simplicity’s sake, we’ll navigate to the folder by typing

cd C:/Users/YourName/Desktop/SampleGame/www/js.

on the command line and pressing the Enter key. (This is where the “zombie.js” file that we want to run through Jscrambler is located.)

cmd

Passing in Jscrambler parameters. The Jscrambler command accepts a number of arguments. For a full list of arguments and syntaxes, check out https://www.npmjs.com/package/jscrambler. Since we’ve set up our .jscramblerrc file, it is automatically called when the program runs, so all we only need to enter are three arguments, at a minimum:

  • the name of the program to run (Jscrambler)
  • the name of the file we want to change (zombie.js)
  • the name we want for the file after we run the program. (We’ll call it tutorial.js.)

When strung together, it should look like the following code.

cmd2

Press Enter, and wait a moment while the program runs. When it is finished, you should see a new file named “tutorial.js” located in the same folder as the original “zombie.js” file.

Entering multiple files. It is very common to have more than one JavaScript file. If you would like to upload more than one file, simply add additional files in the arguments as shown below.

input

Obfuscating an entire folder. A more efficient method for uploading multiple files is to target all the JavaScript files within a target folder. The syntax to do this is shown below.

cmd3

View of Code Before Running Jscrambler API (Notice the organization, comments, and understandable program logic.)

code

View of Code After Running Jscrambler API

after-running-jscrambler

UPLOADING YOUR PROTECTED CODE TO YOUR INTEL® XDK APP

Now you have your code protected. The next step is to actually use it for your INTEL® XDK application. Remember, you still have the original, un-obfuscated code in your project file.

Step 1 – Move Your Original JavaScript Files

The first thing you’ll want to do is move your original JavaScript files to a safe location — outside of your project file. Make sure you keep track of where you put them, just in case you need them for troubleshooting later on.

Step 2 – Rename Your Protected Code Folder / Files

If you gave the files / folders different names when you went through the obfuscation process, you’ll need to rename them back to the original names. Otherwise, you’ll run into trouble when you try to run the app.

Step 3 – Test Your Code in the INTEL® XDK Suite

The INTEL® XDK’s app development environment is set up to mirror the development process — from developing your app to simulating your app within the INTEL® XDK environment to testing it on actual devices.

test-your-code

After you’ve swapped out your original code files with your protected code files, test your app by clicking on the “Emulate” or “Test” tab.

emulate

(The “Emulate” tab lets you test your app on simulated devices, while “Test” allows you to push your app to any accessible devices running the INTEL® XDK “App Preview” app. At the bottom of the “Test” screen, you’ll also find instructions for debugging your app directly on the device without connecting via USB.)

Step 4 – Publish Your Code

The final step in this process is publishing your newly created app to an app store of your choosing. To do this, click on the “Build” tab. Then, click on the platform you’d like to publish the app to, click the “Build” button for the desired platform, and follow the instructions.

publish-your-code

CONCLUSION

In this tutorial, we provided a brief overview of how INTEL® XDK helps to keep your code secure. Next, we provided step-by-step instructions to get you up and running with a JavaScript optimizer and obfuscator – for those of you who want that extra peace of mind.

From there, we moved on to walking you through how to run the program, giving you some different options to consider when protecting your code. Finally, we provided you with a brief overview of how to test your app from within the INTEL® XDK environment and how to upload to an app store of your choosing!

As the importance of JavaScript grows, so does the need to protect your Intellectual property. We hope this article helps you make sure your INTEL® XDK app is secured from now on.

To wrap up this tutorial, we suggest reading our free data sheet on JavaScript Security Threats, which covers the main threats to JS and how to prevent them.

Author
Pedro FortunaCTO and Co-Founder of Jscrambler. Experienced in academia and as a security researcher, Pedro has co-authored several application security patents and is an active member of the AppSec community.
View All Posts

Subscribe to our weekly newsletter

Learn more about new security threats and technologies.

I agree to receive these emails and accept the Privacy Policy.