Technical Articles
Source Code Obfuscation on SAPUI5 cordova application
Overview
You can use kapsel-plugin-ui5 to easily create and build a SAPUI5 cordova application, but all the Javascript source code are not obfuscated. Anyone who downloads your app binary can do reverse engineering to obtain your source code. This will not be allowed in some company’s security policy. In this blog post, I will describe the steps for source code obfuscation on SAPUI5 Cordova application.
Create SAPUI5 Cordova Application
Before programming the application, you need to install the prerequisite tools and SDKs. Install the latest nodejs and cordova cli, as well as the SAP Kapsel SDK.
Following examples are based on Windows OS. If you are using Mac OS, you can modify the commands accordingly(It should not be a big problem for you).
First, running following commands to create a cordova project and add the kapsel-plugin-ui5 to the project.
cordova create ObfuscationDemo com.sap.demo.obfuscation
cd ObfuscationDemo
cordova platform add android
cordova plugin add kapsel-plugin-ui5 --searchpath %KAPSEL_SDK_HOME%\pluginsYou need to replace %KAPSEL_SDK_HOME% to the actual location of KAPSEL SDK HOME folder, for example: C:\SAP\kapsel-sdk
Edit file www/index.html and paste the code as shown below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta charset="utf-8">
<title>Hello World</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"HelloWorld": "./"}'
data-sap-ui-onInit="module:HelloWorld/js/index"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>Edit www/js/index.js file. This file will be called as soon as SAPUI5 is initialized, as indicated by data-sap-ui-onInit attribute. Paste below source code to index.js file.
sap.ui.define([
"sap/m/Button",
"sap/m/MessageToast"
], function (Button, MessageToast) {
"use strict";
new Button({
text: "Click Me...",
press: () => MessageToast.show("Hello World!")
}).placeAt("content");
});
Now you can test this HelloWorld application on Android emulator. Start the emulator, and run following command to deploy the apk.
cordova emulate android –verbose
On the android emulator, press the button “Click Me…” to display the toast message “Hello World!”.
Code Obfuscation
The npm packages cordova-uglify and babel can be used to uglify and minify javascript/css files.
cordova-uglify only supports ES5 javascript files. Unfortunately ES6+ is so popular in web development. It is possible that your cordova application could contain ES6+ javascript code, like our above example of index.js (the => operator). So let’s compile all the ES6+ code to ES5 using babel.
Running this command in the root of your cordova project to install the packages.
npm install --save-dev @babel/core @babel/cli @babel/preset-env
Creating a config file named “babel.config.json” in the root of your cordova project with this content:
{
"presets": [
"@babel/env"
],
"sourceType": "unambiguous"
}Backup the original source code. Copy the folders “www”, “plugins” and “platforms\android\platform_www” to the folder “src-origin”:
mkdir src-origin
xcopy /E /Q www src-origin\www\
xcopy /E /Q plugins src-origin\plugins\
xcopy /E /Q platforms\android\platform_www src-origin\platforms\android\platform_www\Running following commands to compile all your code from ES6+ to ES5(Note: ignore SAPUI5 library in folder “**/resources”, because SAPUI5 library has already been compiled to ES5):
node_modules\.bin\babel www -d www --ignore **/resources
node_modules\.bin\babel plugins -d plugins --ignore **/resources
node_modules\.bin\babel platforms\android\platform_www -d platforms\android\platform_wwwNext, let’s use cordova-uglify to obfuscate javascript files.
Install the cordova-uglify plugin inside your cordova project root folder:
npm install --save-dev cordova-uglifyAfter installing, an “uglify-config.json” file will be automatically added to the hooks folder.
Editing “uglify-config.json”, change uglifyJsOptions.mangle to true. Then add the folders which you want to uglify to “foldersToProcess” array. For cordova application, you can add folders “js”, “css”, “plugins”. Or add folder “.” to include all the files in “www” folder. The json file should look like this:
{
"alwaysRun": false,
"recursiveFolderSearch": true,
"foldersToProcess": [
"js",
"css",
"plugins"
],
"uglifyJsOptions": {
"compress": {
"drop_console": true
},
"mangle": true,
"output": {
"code": true
}
},
"cleanCssOptions": {
"specialComments": "all"
}
}Running the command:
cordova prepare <platform> --releaseIt will uglify the js/css files in the platforms folder.
You can test the obfuscated apk by running command
cordova emulate android --release --verbose -- --keystore=<signing-keystore.jks> --storePassword=<store-password> --alias=<certificate-alias> --password=<certificate-password>If you want to take a look at the obfuscated file content inside the apk, you can go to the folder platforms\android\app\build\outputs\apk\release\ and rename the apk file to .zip then extract the content. Take a look at the assets\www\js\index.js file, as shown below.
Conclusion
Congratulations! You have created a SAPUI5 cordova application by using kapsel-plugin-ui5, compiled javascript files from ES6+ to ES5 with babel, and obfuscated the code with cordova-uglify. You can apply the same method to your own project to protect your intellectual property.
Need more information about the cordova-uglify and babel usage guide? Please go to the links:
https://github.com/rossmartin/cordova-uglify
https://babeljs.io/docs/en/usage