We’re happy to announce that Progress Telerik has recommended Jscrambler as the solution of choice to protect NativeScript Applications. Read more about below. their announcement “In this article, we’ll look at why you might want to use Jscrambler, how it works, and how you can integrate the tool into your own NativeScript apps. Let’s start by looking at the why Jscrambler might be a good fit for your applications. Why Jscrambler? In NativeScript you write your application logic in JavaScript. And because JavaScript is not a compiled language, your NativeScript application’s source code gets distributed in plain text as part of your Android and iOS application packages. If you dig into the folder, you’ll find the plain text source code that ships with your NativeScript apps—code that malicious users have the potential to find as well. platforms An example of the plain text code that gets distributed with your NativeScript applications by default. This specific code is from a built version of the . NativeScript Groceries sample If you come from a web development background this plain text deployment is not a new concept — web apps absolutely must ship their source code in plain text for browsers to interpret. But if you come from a native development background this is a new problem, as native apps typically only distribute compiled byte code. If you’re concerned about protecting your NativeScript app’s source code you have a few options. NativeScript has , a tool that compresses JavaScript code. During the minification process, Uglify replaces variable names and removes whitespace, making your code far harder for your average developer to read. For example, here’s what the code for the Groceries sample looks like after it goes through UglifyJS. built-in support for UglifyJS The source code of the NativeScript Groceries sample after going through UglifyJS. However, UglifyJS’s sole purpose is to reduce the file size of your code, and not to obfuscate your code so that’s it’s difficult for malicious users to reverse engineer. For instance, if I take the same minified code from above and run it through an online formatting tool, suddenly that code becomes far more readable. The uglified source code of the NativeScript Groceries sample formatted using . jsbeautifier.org The UglifyJS minification might be sufficient if you just want to do some really basic code hiding as part of your NativeScript app deployments, but if you really want to protect your code you need a tool dedicated to obfuscation — and that’s where Jscrambler comes in. How Jscrambler works At a high-level, Jscrambler takes your JavaScript code, and mangles it beyond recognition while ensuring that the code continues to work as expected. Just to give you an idea of what that looks like, here’s what the same NativeScript Groceries sample code looks like after it goes through Jscrambler. The source code of the NativeScript Groceries sample after going through Jscrambler. Good luck figuring out what’s going on there. And even if you run this code through a beautifier or formatting tool, you’ll still have a heck of a time deciphering anything. Here’s what that same file looks like after going through . jsbeautifier.org The Jscrambler-processed source code of the NativeScript Groceries sample formatted using jsbeautifier.org. As the above screenshot above shows, Jscrambler goes above and beyond scrambling your code so that it’s unreadable even after going through formatting and beautifier tools. Malicious users will have a heck of a time trying to understand what that code is doing. Jscrambler offers a so you can fine tune exactly how the tool transforms your code, but the Jscrambler team has provided us with a series of default settings for NativeScript developers. Let’s take a look at these settings and see how you can get Jscrambler working in your apps. number of configurable transformations Getting Jscrambler working The first thing to note is Jscrambler is a , however, they do offer free trials for anyone that wants to give Jscrambler a shot. To follow the steps in this article you’ll need to sign up for one of those trials on the bottom of using this form. premium tool https://jscrambler.com/ After you create your trial account, head to your dashboard and click the big green “Create App” button. Give the app a name and click the green “Create App” button again. At this next screen you’ll want to note your application’s id (see red arrow in the image below), as you’ll need it in a moment. Now that you have the necessary Jscrambler account work done, let’s shift over to your NativeScript app to see how to tie into the Jscrambler service. Installing the Jscrambler plugin Jscrambler’s NativeScript integration is done through a webpack plugin. So if you haven’t already, go ahead and . If all goes well, the installation should be as easy as running the following two commands. install the NativeScript webpack plugin in your app npm install --save-dev nativescript-dev-webpack And then: npm install If you run into issues setting up webpack in your NativeScript app, the is a great place to ask for help. NOTE: NativeScript community forum Once you have webpack installed, you’ll next want to install the Jscrambler webpack plugin. npm i --save-dev jscrambler-webpack-plugin After that, create a new file in the root of your app named jscrambler.json, and paste in the following code. { "keys": { "accessKey": "YOUR ACCESS KEY HERE", "secretKey": "YOUR SECRET KEY HERE" }, "applicationId": "YOUR APPLICATION ID HERE", "params": [ { "name": "whitespaceRemoval" }, { "options": { "mode": "SAFEST" }, "name": "identifiersRenaming" }, { "name": "dotToBracketNotation" }, { "name": "stringConcealing" }, { "name": "duplicateLiteralsRemoval" }, { "name": "functionReordering" }, { "name": "functionOutlining" }, { "name": "propertyKeysObfuscation" }, { "name": "propertyKeysReordering" } ], "areSubscribersOrdered": true, "applicationTypes": { "webBrowserApp": false, "desktopApp": false, "serverApp": false, "hybridMobileApp": false, "javascriptNativeApp": false, "html5GameApp": false }, "languageSpecifications": { "es5": true, "es6": false, "es7": false }, "useRecommendedOrder": false, "sourceMaps": false} This file contains the recommended settings for using Jscrambler in NativeScript apps. Feel free to check out the Jscrambler docs for . NOTE: more details on what each of these settings do You’ll need to fill in the three placeholder values— , , and —with your own values. The APPLICATION ID is the value we noted earlier when you created an app in the Jscrambler interface. YOUR ACCESS KEY HERE YOUR SECRET KEY HERE YOUR APPLICATION ID HERE Once you have your application id entered, head to the “My Account” section on the Jscrambler site, and scroll down to find both your Access Key and your Secret Key, which you’ll want to copy and paste into your file. jscrambler.json With your configuration in place, your last step is to add Jscrambler’s webpack plugin in your webpack configuration. To do that, open your webpack.config.js file in the root of your app. In this file, start by copying and pasting these two lines of code at the top, which imports the plugin itself and makes it available to use. const JscramblerWebpack = require("jscrambler-webpack-plugin"); const jscramblerConfig = require("./jscrambler.json"); Next, scroll down in the same file until you find the function. To activate the Jscrambler plugin you need to add the following entry to that function’s array. (I’ve been adding mine just after the entry.) webpack.config.js getPlugins() plugins new BundleAnalyzerPlugin({}) new JscramblerWebpack(Object.assign({}, jscramblerConfig, { chunks: ["bundle", "vendor"]})), And with that, you should be all set to test this Jscramber in your app. Scrambling your code To run your app through Jscrambler, all you have to do is run . The easiest to use are the start-ios-bundle and start-android-bundle scripts, which build your app with webpack and start them on either an iOS or Android device. one of the npm scripts that build NativeScript apps with webpack enabled npm run start-ios-bundle or npm run start-android-bundle After the build process completes, you’ll have to look through the folder to see the result of the obfuscation. If you built for iOS, open your folder, and if you built for Android, open your folder. Open those folders’ and files and you should find heavily scrambled code that looks something like this. platforms platforms/ios/NAME_OF_YOUR_APP_/app platforms/android/src/main/assets/app bundle.js vendor.js Malicious users will now have a extremely difficult time figuring out what this code does, and your app should continue to work exactly as expected. (Let us know if it doesn’t — we’ve tested about a dozen apps and haven’t hit a single problem.) Furthermore, in our testing we haven’t detected any meaningful performance regressions from scrambling NativeScript application code. Your experiences may very, so it’s definitely worth testing your app heavily once you enable Jscrambler, but in our experimenting enabling Jscrambler is a fairly seamless process. Wrapping up Jscrambler is a powerful tool for protecting your JavaScript code from malicious users. The Jscrambler webpack plugin fits nicely into NativeScript webpack workflow, making it a convenient option for NativeScript developers looking to protect their source code. So try going through this article’s steps in your own apps and see how it goes.” Originally published on NativeScript Blog on August 17, 2017.
