Android Attack: Reversing React Native Applications

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

React Native is a software framework. A mobile application framework supports the development of an application. React Native is a JavaScript framework that allows for a developer to build user interfaces for native mobile applications across platforms such as, but not limited to, Android and iOS. You can use React Native in existing Android or iOS applications or create a whole new application with it and build it from scratch.

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.

This tells us the application was built with the React Native framework, as the index.android.bundle file is where the React JavaScript logic is, in a minified format.

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:

<script src="./index.android.bundle"></script>

I create my HTML file in a notepad and save the file as HTML

The two files will look like the below.

Load the HTML file into Google Chrome and launch the Developer Tools in the same tab as the loaded file. Go to Sources and look for the ‘index.android.bundle‘ file. If you see an ‘index.android.bundle.map‘ file in the sources list then you will be able to view the unformatted JavaScript. Unfortunately for us, this example application did not provide us with such joy, so it was onto other methods to unminify the code.

CyberChef

Another method you can use is unminifying the JavaScript code with CyberChef, who knew! To do this, upload your bundle file to CyberChef using the option to add input as a file.

Once the file has been uploaded, then you can beautify the JavaScript code.

This is very quick and works like a charm. With your beautified JavaScript code, if you would like, you can download the output as a JavaScript file and open it in your favourite IDE. I like to use Visual Studio Code.

Unminify.com

Lastly, one other method I tried was going to the unminify.com website, where the site is meant to unminify the minified JavaScript code. Personally, I have not tested this site, therefore, I am unsure as to whether or not any code uploaded is sent to a remote server, so please do not give this site your implicit trust and upload sensitive code, unless you know otherwise.

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

Sometimes you might come across react native mobile applications that are also built with Hermes. What is Hermes you might ask? Hermes is an open-source JavaScript engine that is meant to optimise the performance of the application. The following doc shows you how to integrate Hermes with your React Native app.

When it comes to reversing this type of app, when you go to analyze the “index.android.bundle” file you will see byte code rather than JavaScript. In this instance, there is a really awesome tool called hbctool, which should help to decode the bytecode.

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 😀

Sarah <3