Estimated difficulty: 💜💜🤍🤍🤍
This post is going to walk you through how to reverse engineer an Android application that is built using React Native. It is more common to see applications being built using this mobile framework, as it supports the development of an app in both Android and iOS platforms. Let’s unpack this further! We will also touch on how to decompile React Native applications also built using Hermes.
What is React Native
Detecting a React Native Application
Before we start reversing an application, we need to know what framework the application is built in, or at least how to detect that. One great method on how to do this was detailed in a HackTricks post.
As the an apk file is ultimately a zip file, take your application in question and rename the ‘.apk‘ extension to ‘.zip‘.
$ mv example.apk example.zip
Unzip the apk file and change into the assets directory.
$ unzip example.zip
Look for the ‘index.android.bundle‘ file inside of the assets folder.
Decompiling a React Native Application
One of the best open-source tools to decompile an Android application is Jadx-GUI. This can be downloaded for many different operating systems, including Windows. I will be using the tool on Windows to analyse the example application, React Native Example, taken from the website APKpure.
Open the application in Jadx-GUI.
Open the ‘.apk‘ file, this will load all the different classes and resources into the interface for you to browse.
We can check the ‘index.android.bundle‘ file in the ‘Resources/assets‘ folder.
This is not looking too pretty… Luckily, there is another way that we can view this file!
Analysing the Bundle File
Since we have opened up the ‘index.android.bundle‘ file in Jadx-GUI, and it is not making very much sense to us, we can change the way that we are viewing this to that it actually looks pretty!
Open up the folder where the ‘index.android.bundle‘ file lives and create a new ‘index.html‘ file in the same directory. Inside of that ‘index.html‘ file, you need to put the below script:
I create my HTML file in a notepad and save the file as HTML
The two files will look like the below.
Due to the size of the example file I had, this took a very long time to unminify, however, I took a snippet of the file and uploaded it to the site, to give you an example of what the unminified code would look like.
Once we have unminfied the bundle file, as a RE you should start searching for any interesting keywords. This will completely depend on your goal! Maybe you are looking for malware, or maybe you are assessing the security of an application… Either way, a good place to start would be for words like password, username, accessibility, etc.
React with Hermes
Unfortunately, this tool will not solve all our problems, as there are only a limited number of supported versions. Definitely worth trying out!
And that is all folks, it is a short but sweet post to come back to after so long away.
Thank you all for reading. Please do leave a comment if you have any questions or even any nuggets of information you want to share on this. Both are gratefully received!
Have a great day 😀