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 smali 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:
Once you’ve downloaded the APK above, extract it to a new folder using the following command:
unzip React\ Native\ Examples_v1.0_apkpure.com.apk -d ReactNative
Browse to the newly created ReactNative folder, and find the assets folder. Inside this folder, it should contain index.android.bundle. 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 index.android.bundle.map, you will be able to analyse the source code in an unminified format. map 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 assets folder, you can take advantage of this by creating a file named index.html 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:
 |
|---|
| Analysing index.android.bundle in Chrome DevTools taking advantage of an included map file |
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 index.android.bundle:
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 index.android.bundle 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:
 |
|---|
| Finding API endpoints by traversing through un-minified source |
Interfacing with Firebase
The following Python script can be used to interface with the Firebase database. Before using this script, install pyrebase using pip install pyrebase.
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 index.android.bundle file in the assets folder.
