Last updated: 23 Set 2024
Framework versions tested: 6.2.2 ● 6.3.3 ● 8.4.7 ● 8.4.7 ● 8.8.2
NativeScript is an open source framework for building truly native cross-platform mobile apps using JavaScript — which enables sharing and maintaining a single code base across Android and iOS deployments.
Jscrambler is officially recommended by NativeScript as the solution of choice to protect NativeScript applications.
For the purposes of this tutorial, we will be using the official "NativeScript React Template" as an example.
If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide, which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.
To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using the Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named jscrambler.json
and placed on the project's root folder. If you choose to try the following example, just make sure to fill the missing information: accessKey
, secretKey
and applicationId
.
{
"keys": {
"accessKey": <ACCESS_KEY_HERE>,
"secretKey": <SECRET_KEY_HERE>
},
"applicationId": <APP_ID_HERE>,
"params": [
{
"name": "objectPropertiesSparsing"
},
{
"name": "variableMasking"
},
{
"name": "whitespaceRemoval"
},
{
"name": "identifiersRenaming",
"options": {
"mode": "SAFEST"
}
},
{
"name": "globalVariableIndirection"
},
{
"name": "dotToBracketNotation"
},
{
"name": "stringConcealing"
},
{
"name": "functionReordering"
},
{
"options": {
"freq": 1,
"features": [
"opaqueFunctions"
]
},
"name": "functionOutlining"
},
{
"name": "propertyKeysObfuscation",
"options": {
"encoding": [
"hexadecimal"
]
}
},
{
"name": "regexObfuscation"
},
{
"name": "booleanToAnything"
}
],
"areSubscribersOrdered": false,
"useRecommendedOrder": true,
"jscramblerVersion": "stable",
"tolerateMinification": false,
"profilingDataMode": "off",
"useAppClassification": true,
"browsers": {}
}
Jscrambler’s NativeScript integration is done through a webpack plugin. So, if you haven’t already, install the NativeScript webpack plugin in your app.
npm install --save-dev @nativescript/webpack
Next, install the Jscrambler webpack plugin:
npm install --save-dev jscrambler-webpack-plugin
Then, open the webpack.config.js
file and place these two lines of code at the top:
const JscramblerWebpack = require("jscrambler-webpack-plugin");
const jscramblerConfig = require("./jscrambler.json");
As a last step, add the following entry to the plugins array of webpack.config.js
:
new JscramblerWebpack(Object.assign({}, jscramblerConfig, {
chunks: ["bundle"]
})),
If you are using webpack-chain, then add the plugin inside of the chainWebpack arrow function:
config.plugin('JscramblerWebpack').use(JscramblerWebpack, [{
...jscramblerConfig,
chunks: ['bundle'],
}]);
Build the application:
ns build ios --bundle
or
ns build android --bundle
There you go. Jscrambler is now integrated in your build process and you’ll find the build APK file inside the platforms
folder, specifically on platforms/<android|ios>/app/build/outputs/apk/debug
.
There are no known problems integrating Jscrambler with NativeScript.