This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
This development is good both for developers and for consumers, who get faster updates to their applications regardless of the platform they are on.
But it also raises questions about security.
How can we make sure our applications run as intended? How do we enforce our licenses? And what about piracy?
Secure the Communication Between Your Client and Server
First, let me get this out of the way: no matter how good protection you add on the client side, you always need to start with the assumption that the client can be compromised. Some go as far as to say that you have to treat the client as malicious.
So, if your application talks to a server, before adding any other form of client-side security, start by securing your server as much as possible—just as you would when using a regular HTML interface.
1. Validate Your Data
You can think of securing your server through two concepts: data integrity and data confidentiality.
Data integrity means that the data in your application should remain accurate and consistent during its lifecycle. Data confidentiality means that your users' data should stay secure, and third parties should never get access to it.
Sometimes, the data sent in is correctly formatted but doesn't make sense in the application's state—for example, when a player submits an impossibly high score. You can protect your server against situations like these by using sanity checks and placing as much of the application's logic on the server as possible.
2. Keep Your Data Secure
Another part of securing the client-server communication is making sure that all user-specific data stays confidential and accessible by only the authorized user.
Next, you'll need to validate that the requests are indeed coming from the correct user. The details for how to best do this depend on your application. In web-based applications, nonces are a useful technique, whereas in a game's context, OAuth authentication might be a more natural approach.
You Can't Check Everything on the Server
While the checks mentioned above apply to every type of application, when more complexity is added to the client, some verifications become hard to do.
In multiplayer games, for example, running all the logic through your server will work well as long as the game is simple and you only have a limited number of players. But as the active user base grows, the load on the server will make you consider the possibility of moving some of the processing to the client. The same happens if your game logic is so complex that simulating it on the server would take up a lot of resources.
That's where the boundaries get blurred.
While the idea of never trusting the client sounds good, in practice you'll have to set a threshold, saying "this is how much I trust my client" and only do sanity checks on the server. If some of the player's actions also affect other players, that's where you need to involve the server more, leaving the spots where the user can harm only his or her own experience to the client to handle.
As we saw above, you should make sure invalid data never makes it to the database on your server. But some changes are more restricted than this. A malware plugin might add new buttons to your application to lure the user to an external site. Or the user might hack the client to see more of the game without playing it.
Changes like this will not break your entire application, but they will change the way the user experiences it. In the case of malware, this can also pose a serious threat to the user's privacy.
This is where Jscrambler can help you.
When signed in, if there is some text saying "A new version of Jscrambler is now available" at the top of the page, it means you're still seeing the old version. Click on Try it now.
For now, however, let's choose Playground. In this mode, you'll get to try all transformations on an example script, while the transformations you can apply to your actual application are limited by your subscription level.
On the left, you'll see the File Tree, a list of files in your application, and an Add button for importing or creating new files. In the playground, the Add button is disabled.
On the right, there is a menu for picking the Language Specifications and Application Mode for your app. Jscrambler uses them to ensure the transformed code will work in your selected environment, taking its limitations and possibilities into account.
We'll now go with ES5 and a basic Web Browser App.
Click on the filename (
clock.js) to start working on it.
The file's contents will be shown in the middle of the screen: the source code on the left and the version transformed by Jscrambler on the right.
Next, select the Code Transformations tab on the right to reveal a list of available transformations. Jscrambler allows you to choose the transformations you find relevant to your code. You can even use annotations in your code to change the way some of the code gets transformed. That can be handy in performance-critical code blocks, for example rendering functions in games.
To test the transformations, select them one at a time. Then click on Protect App at the bottom of the window to create a new version of your transformed code.
In the meter, you'll see three icons, representing the cost, resilience, and potency (going from left to right in the screen shot above) of the transformations you have selected for your application.
To get started, check the checkbox in front of Control Flow, and then click on Protect App.
The Control Flow Flattening is one of the powerful new transformations added in Jscrambler 4. It flattens the script's control flow so that it becomes hard for a person reading the code to follow the logic of your application.
Next, continue by selecting some more obfuscation options. As you add more, you'll notice how your code gets more and more difficult to read—and thus edit without breaking its functionality.
Also, when you click on Protect App again, even without changing the settings, you'll notice that the contents of the protected script change every time.
Jscrambler's transformations are polymorphic, making sure the transformations produce a different output every time. This way, even if someone were able to hack the current version, next time you run your code through Jscrambler, those changes would no longer work.
2. Make Your Application Protect Itself
So far, we have talked about ways to make sure your application works as expected by preventing both the user and outsiders from modifying your source code. But that's not the only threat to your application you need to worry about.
I'm sure we've all clicked "View Source" to learn how to do a cool new effect or trick, and adapted what we've learned to our websites. That's not what I'm talking about here.
The transformations in the previous step help prevent this by making the code hard to read and reverse engineer. In addition to them, Jscrambler adds code traps, functionality that makes the code protect itself.
Let's take a look at some of them.
In Jscrambler, in the list of transformations, you'll find a section titled Code Locks.
Using them, you can limit the execution of your code to a given set of browsers, a time frame (useful for demos that shouldn't be runnable after the preview period is over), on a given domain (usually yours), and a particular operating system.
Finally, in the Optimization section, select Minification to minify the code and make the file smaller.
Then, click on Protect App, followed by Download App to download the source code and use it in your application.
Jscrambler keeps track of your transformation history, so you can always go back to an earlier version.
3. Use Templates to Make Your Work Easier
As we have seen, configuring your protection level by selecting checkboxes one by one is straightforward. But you can still speed up your workflow by grouping your common combinations of transformations into templates.
Once you have found a set of transformations that you'd like to store for future use, click Create Template at the bottom of the Application Settings section.
Jscrambler will prompt you to give your template a name and description.
Type in something descriptive for the future, and click on Save Template.
You can also use one of the templates already available on the Your Templates tab:
Move your mouse pointer above the template names to read more about them and understand when they make sense. Then click on them to see what transformations they apply to your code.
4. Make Jscrambler a Part of Your Development Workflow
So far, we have covered some ways in which Jscrambler can help you protect your application using the web UI. While the interface is intuitive, as your application grows, you'll want something more straightforward.
Also, as I mentioned earlier, Jscrambler is polymorphic, generating a different output every time. So, it's useful to run the tool again now and then, even if there are no changes to the specific files.
To do this, let's look at Jscrambler's command-line tool.
First, download and install the command-line tool using npm. On your command line, type:
sudo npm install -g jscrambler
Once the installation completes, go back to your applications in the Jscrambler admin.
Notice that to use the command-line tool, you'll need to use an actual application instead of the playground script. So, if you don't have an application yet, create one now.
After selecting the transformations you want to apply, click on the download button at the top right corner of the page. This will download your settings to your computer as a JSON file.
Copy the JSON file to your project. Don't commit it to version control as the file contains your API key and secret for using the Jscrambler API.
Then, run the
For example, if you only have one file,
test.js, you can run the following command:
$ jscrambler -c jscrambler.json -o test.protected.js test.js
In the command, you passed in the JSON file containing your application settings using the
-c parameter, followed by the output file (
$ jscrambler -c jscrambler.json -o protected/ **/*.js
In this example, instead of an output file, you define a directory (
protected) where Jscrambler will place the results of the protection.
As a further improvement, you could also set up the Jscrambler task to run whenever there are changes in your scripts, for example using Grunt. Or it could even be a task on your continuous integration server, running whenever a new version of the code is committed.
Jscrambler provides cutting-edge tools to make it hard for crackers, cheaters, and malware to inject unwanted functionality to your application or change your application's variables. It also makes it hard for others to copy your code and redistribute it as their own.
Jscrambler can also help you defeat Man-in-the-Browser (MitB) attacks and fraud, bots, 0-day threats, and APT (Advanced Persistent Threats) by detecting changes made to the DOM and giving you all the information you need to stop these attacks. For more information, please contact firstname.lastname@example.org.
For more information about Jscrambler, its new features, and latest updates, you can also visit the Jscrambler website.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post