Prevent reverse engineering of ionic application - angularjs

Is there a way to prevent reverse engineering of ionic mobile application? As mentioned in Android forum I've activated proguard and built the application in eclipse. A file called proguard was created in my bin folder. It contained something like this
view AndroidManifest.xml #generated:6
-keep class com.fg.lolc.CordovaApp { <init>(...); }
But I still could reverse engineer the app and I was able to get the code from my APK. Is there a way to prevent this and improve the security of the ionic application? Thanks.

Nope, it isn't possible to prevent this. You can encode your JavaScript to make it a little harder to get the code, but there are always ways to reverse that. The web is not a secure place for source code, it is open for all.
Here is a good post about different ways to 'encrypt' your source code, to make it harder to read.
http://www.justbeck.com/three-ways-to-encrypt-phonegap-and-cordova-mobile-applications/
Related How to avoid reverse engineering of an APK file?

if you want secure your ionic app from reverse engineering and fully
secured source code i recommended two steps.
First use Enable ProGuard into cordova/ionic project
1. To implement this, open /platforms/android/project.properties and
uncomment one line by removing the “#” at left:
#proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:proguard-
project.txt
2.copy proguard-custom.txt from ( https://github.com/greybax/cordova-plugin-
proguard/blob/master/proguard-custom.txt )
to
$android/assets/www/proguard-custom.txt Remove '#'
#-keepclassmembers class android.webkit.WebView {
# public *;
# }
3. add snippet from to build.gradle
Find buildTypes by ctrl + F and add like this
buildTypes {
debug {
minifyEnabled true
useProguard false
proguardFiles getDefaultProguardFile('proguard-android.txt'),
'proguard-rules.pro'
}
release {
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'),
'proguard-rules.pro'
}
}
Second use cordova-plugin-crypt-file
obfuscate or encrypt your code like build/main.js
1)Install cordova plugin add cordova-plugin-crypt-file
2)plugins/cordova-plugin-crypt-file/plugin.xml
//Using Refrence of cordova-plugin-crypt
<cryptfiles>
<include>
<file regex="\.(htm|html|js|css)$" />
</include>
<exclude>
<file regex="exclude_file\.js$" />
</exclude>
</cryptfiles>
Final step ionic cordova build android --release
Now extreact your apk or try APK decompiler
(http://www.javadecompilers.com/apk)

Related

How can I debug a React JS App into Cordova?

I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)

ANDROID: java.util.MissingResourceException: Can't find resource for bundle 'org.eclipse.paho.client.mqttv3.internal.nls.logcat_en_US', key ''

There seems to be countless reports of this bug in Stack Overflow. None of the suggestions worked. In my case it is almost identical to this stack overflow report
SPRING
except this case is in Android being built in Android Studio. It only happens in release mode with proguard. Proguard corrupts it somehow. And yes I have done the following in proguard:
-keep class org.eclipse.paho.client.mqttv3.logging.JSR47Logger { *; }
-keep class org.eclipse.paho.** { *; }
I have also parsed the jars downloaded by gradle. I cannot update to 1.2.1 because that only works with the latest versions of Android ... according to comments made by the developers. If I could get the source code for 1.1.0 maybe I could stop it from calling a resource that does not exist.
Anyone solve this problem or is it a bug in proguard/paho?
Looking at the apks generated by release builds (uses proguard) and debug builds (no proguard) shows that proguard is taking the org.eclipse.... package name of the properties and changing the 'org' to some letter like 'c'. The mqtt paho client is looking for the property file using the full package name and therefore cannot find it, no matter what you include or exclude in proguard. I looked at an apk made a few months ago (I have not done anything with the paho client or that part of the code using the paho client ... it has worked fine and I have had no need to change it). I see in that old release apk that the 'org' is there as it should be.
So the problem is in proguard. All I could do to move forward is take the source files for 1.1.0, create a new java project module, and tediously comment out every 'log' and getLogger in the source code. Its a temporary and unpleasant fix but it works. When proguard (R8) fixes this, then I can go back to what I had.
So I guess the only real fix is to submit a bug to R8. That I have not done.

Unable to Obfuscate Hybrid code using Proguard in MFP 7.1

I am developing ionic application using mfp 7.1. I have to obfuscate theapplication, for that I have refer the following link,
https://www.ibm.com/support/knowledgecenter/SSHS8R_7.1.0/com.ibm.worklight.deploy.doc/admin/t_pg_creating_obfus_cli.html
Using the above link I have done with the following steps:
1) In the project.properties file uncommented the line
proguard.config=proguard-project.txt.
2) Created keystore file and its added in the "ant.properties" file.
3) finally, we build the application.
We unable to get the "mapping.txt" file in the project
& also not able to get obfuscate code.*
Can any one tell me how to obfuscate it??
Anyone help will be Appreciated!!!
Proguard obfuscation will work on native code. You mention an Ionic application. As such you should try Javascript obfuscators for your application:
Google Closure
Compiler YUI Compressor
UgifyJS
More details here.
Within MFP, the options available are to perform JS and CSS concatenation and minification. The other options are outside of MFP and needs to be done using the respective tools.

Minifying ExtJs

We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html

Sencha Cmd v3 build error when implementing Bryntum Scheduler

Using Cmd 3.0.0.141, I have successfully generated a workspace and an Ext app in that workspace. The application builds correctly until I attempt to integrate the Bryntum Scheduler, where I encounter an error when I try to build:
"Failed to resolve dependency Sch.panel.SchedulerTree for file ExtCalendar.view.Tree"
the app is very simple at this point, uses Ext.application and follows the MVC pattern where I have a view defined "ExtCalendar.view.Tree" that extends 'Sch.panel.SchedulerTree". I also have models and stores that extend Bryntum classes as well, so I assume the compiler will trip over those as well, since it can't see the Sch namespace.
I've added a 'js' path to my app.json that points to the bryntum js file where 'Sch.panel.SchedulerTree' comes from. I've tried to run the 'refresh' command with the same results (Failed to resolve...). I've regenerated the bootstrap.js file manually using 'compile', but nothing from the Sch namespace ever gets added to it, despite the Brytum lib file being in the classpath.
What do I need to do in order to successfully run the 'build' command with libs like this?
Or, do I need to take a more granular approach using the 'compile' command?
With the help of the nice folks on the Sencha forums, I was able to resolve my build issues. The solution, for me, involved a shim. I added an external shim.js file to my index with as many //#require and //#define directives as needed in order to resolve the dependency issues.
According to the nice folks at Bryntum, once I upgrade from the free-trial version of the Bryntum Scheduler, I will be able to get rid of the shim and simply rely on the sencha.cfg classpath pointing at the Bryntum src.
Also, as an aside, the app.json file is not used in ExtJS apps, its inclusion in the generated files was a bug in build 141 of Cmd v3.
See this thread for more detail.

Resources