Expanding the Attack Surface: React Native Android Applications

React Native is a mobile application framework that is most commonly used to develop applications for Android and iOS by enabling the use of React and native platform capabilities. These days, it’s become increasingly popular to use React across platforms on all of your properties (sometimes the same code), including any mobile applications a company has to offer.

When performing recon, we typically focus on expanding the attack surface as much as possible. This often means delving into applications that have been written for mobile platforms, in order to find further API endpoints, or other juicy information such as sensitive credentials in the form of API keys.

The end goal of this blog post is to be able to go from the APK to the React Native JavaScript that can be analysed further for API routes and sensitive credentials being leaked.

Typically, when reversing an Android application, it is decompiled using dex2jar and then analysed using JD-GUI. When dealing with React Native applications, this can be useful if the application has any native code that you would like to analyse, but most of the time, the core logic of the application lies in the React JavaScript that can be obtained without needing to use dex2jar.

Note: dex2jar works by transpiling Java bytecode into Dalvik bytecode, and as a result, a clean and valid output isn’t always guaranteed, so don’t be afraid to use the <span class="code_single-line">smali</span> tool to delve the Dalvik bytecode instead.

Obtaining JavaScript from a React Native APK

For this example, I’m going to be extracting the JavaScript from the following React Native application:

com.react_native_examples

Once you’ve downloaded the APK above, extract it to a new folder using the following command:

<span class="code_single-line">unzip React\ Native\ Examples_v1.0_apkpure.com.apk -d ReactNative</span>

Browse to the newly created <span class="code_single-line">ReactNative</span> folder, and find the <span class="code_single-line">assets</span> folder. Inside this folder, it should contain <span class="code_single-line">index.android.bundle</span>. This file will contain all of the React JavaScript in a minified format.

The power of map files

If you are able to find a file called <span class="code_single-line">index.android.bundle.map</span>, you will be able to analyse the source code in an unminified format. <span class="code_single-line">map</span> files contain the source mapping that allows you to map minified identifiers. If the React Native application you are reversing has the map file included within the <span class="code_single-line">assets</span> folder, you can take advantage of this by creating a file named <span class="code_single-line">index.html</span> in the same directory with the following within it:

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

Save this file and then open it in Google Chrome. Open up the Developer Toolbar (Command+Option+J for OS X or Control+Shift+J for Windows), and click on “Sources”. You should see a neatly mapped out JavaScript file, split up into folders and files that make up the main bundle:

The search for sensitive credentials and endpoints

A pattern that is popular with React Native applications, is the use of a third party database such as Firebase. In the past, there have been a number of applications found to be improperly using Firebase’s authentication model and including an API key that is too permissive, within their React Native application.

This was the case in the Donald Daters application which was found to be vulnerable to this attack vector and blogged about here.

The following strings can be grepped for in order to extract the Firebase API key from the <span class="code_single-line">index.android.bundle</span>:

FIREBASE_API_KEY
FIREBASE_AUTH_DOMAIN
FIREBASE_DB_URL
FIREBASE_BUCKET
apiKey

For example:

❯ grep -rnis 'apiKey' index.android.bundle
... omitted for brevity ...

initializeApp({apiKey:"AIzaSyDokhX9fzFlJMfXjwbiiG-2fGDhi4kLPFI",
authDomain:"react-native-examples-bcc4d.firebaseapp.com",
databaseURL:"https://react-native-examples-bcc4d.firebaseio.com",
projectId:"react-native-examples-bcc4d",
storageBucket:"",
messagingSenderId:"928497342409"});

... omitted for brevity ...

In addition to finding Firebase credentials, the <span class="code_single-line">index.android.bundle</span> file can also be analysed for API endpoints. In a React Native application I was reversing, I was able to find a number of API endpoints by browsing through the un-minified JavaScript in Chrome:

Interfacing with Firebase

The following Python script can be used to interface with the Firebase database. Before using this script, install pyrebase using <span class="code_single-line">pip install pyrebase</span>.

import pyrebase

config = {
  "apiKey": "FIREBASE_API_KEY",
  "authDomain": "FIREBASE_AUTH_DOMAIN_ID.firebaseapp.com",
  "databaseURL": "https://FIREBASE_AUTH_DOMAIN_ID.firebaseio.com",
  "storageBucket": "FIREBASE_AUTH_DOMAIN_ID.appspot.com",
}

firebase = pyrebase.initialize_app(config)

db = firebase.database()

print(db.get())

The above script will authenticate to a given Firebase database and then print out the contents of the database. This is only possible when the API key provided to this script has permissions to read the database. To test other actions on the database, such as writing to the database, refer to the Pyrebase documentation which can be found here.

Conclusion

Through the information in this blog post, you should now be able to analyse the JavaScript of React Native Android applications with ease. Sensitive credentials and API endpoints can often be extracted from React Native applications by analysing the JavaScript packed into the APK file of the application. The JavaScript packed within a React Native application can trivially be obtained by extracting the APK and opening the <span class="code_single-line">index.android.bundle</span> file in the <span class="code_single-line">assets</span> folder.