Introduction
Cross-platform applications have been emerging in recent years. The React Native framework is also gaining lots of traction in the world of mobile application development. In this blog, we will dive into the underrated territory of React Native application pentesting.
Prerequisites
It is assumed that the reader has prior knowledge of the following:
- Basic knowledge of Android applications. Below are some references to get started:
– Android pentesting lab
– Android pentesting tools
– Oversecured vulnerable app overview
– Getting started with Frida on Android App
– Android Security Part-1
- Basic knowledge of JavaScript and webpack bundler
- Introductory knowledge of React Native language (Core React Native, JSX, Babel)
What is a React Native?
- React Native is a JavaScript-based framework curated for developing Native applications on platforms like Android and iOS. Facebook initially made React Native available as an open-source project in 2015. It quickly rose to the top of the list of tools used for mobile application development.
- React Native is a game-changing technology that allows you to run JavaScript code inside the mobile environment. React Native combines the best parts of Native development with React, a best-in-class JavaScript library for building user interfaces.
React Native Application Architecture
React Native applications are written in a combination of JavaScript and JSX. JSX is a special syntax extension to JavaScript. A key concept in React Native is “component”. A component is a piece of a user interface similar to “activities” in JAVA-based Android applications. A React Native application can be made of multiple components that are interconnected. These components are composable and reusable throughout the application.
Image Source: https://ReactNative.dev/architecture/render-pipeline
Behind the scenes:
- React Native code ⇒ JS+JSX code written during development.
- JS core engine ⇒ Converts JS code into respective Native code with the help of a bridge between React Native and Native code.
- Bridge ⇒ Facilitates communication between JavaScript code and Native components.
- Android/iOS Native code ⇒ Runs the converted Native code on the platform and also provides support for all Native features such as camera access, sensor access, device information, etc.
Note: You can learn more about React Native application architecture, React Native framework, code transition, etc. in our ebook.
Reverse Engineering React Native Applications
- Rename the extension of the APK file to .zip
- Now open this file with any compression management tool such as WinZip, 7zip
- Extract all the files in that zip, and you will be able to access the files. Some of the files will not be in a human-readable format.
React Native APK File Structure
Let’s sneak into the release build of a sample React Native Android application.
├── MyReactNativeApp.APK/
│ ├── assets/
│ │ ├── index.android.bundle
│ │ └── <<Other-files>>
│ ├── com/
│ ├── kotlin/
│ ├── lib/
│ ├── META-INF/
│ │ ├── services/
│ │ ├── <<Other files>>
│ │ ├── MANIFEST.MF
│ │ ├── BNDLTOOL.RSA
│ │ └── BNDLTOOL.SF
│ ├── okhttp3/
│ └── res/
│ └── <<layout-related-files>>
├── AndroidManifest.xml
├── classes.dex
└── <<other files>>Note: Learn more about these files and directories in detail in our React Native Ebook.
The Mystery of “index. android.bundle” File
What is the “index.android.bundle” file?
- In React Native applications, all of the JavaScript code written in the project gets compiled into the “index.android.bundle” file when the application is built. Thus, this file contains all the JavaScript code of the application in minified format.
- When you decompile the React Native APK, the contents of the main ‘App.js’ file and all other components will be bundled together in JS format in the “index.android.bundle” file, as mentioned above. This means the “index.android.bundle” file contains all the source code of React Native application. We can search for hardcoded stuff in this file.
Steps:
- Decompile application using apktool.
- Locate the “index.android.bundle” file in the “/assets” folder.
/<appfolder>/assets/ You can search for keywords such as “secrets, tokens, password, apikey, username, login” etc., to find such goofy hidden secrets in the “index.android.bundle” file.
Note: You can split this huge “index.android.bundle” file into multiple JS components explained in our ebook.
Hermes Engine
What is Hermes?
- Hermes is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.
- Thus, when you decompile the React Native application that uses Hermes during compilation, the code in the file “index.android.bundle” will be converted into an Hermes byte. The contents of the file will look like this:
- This becomes a headache while reversing and pentesting React Native applications. The core logic of the application is obscured, and we must make it human-readable.
Presenting hbctool
Fortunately, there is a way to convert this mess into a human-readable format.
Shoutout to: bongtrop for creating hbctool. This tool lets us disassemble the encrypted bundle files back to the Hermes instruction set which is in human-readable bytecode.
Decompiling Hermes Bytecode
Steps:
- Decompile APK and go to the “/assets” folder
- There you will find the “index.android.bundle” file
- Install the hbctool with the following command:
pip install hbctool - Open the command terminal in the “/assets” folder and type the following command to disassemble Hermes bytecode into human-readable format:
hbctool disasm <index.android.bundle> <output_folder_name> 
- A folder will be created containing disassembled Hermes bytecode. Now go to the output folder (dis_code)
- metadata.json: stores the important information of the Hermes bytecode file
- instruction.hasm: stores the application instructions or logic in HASM format (edit application logic in this file)
- string.json: store the application strings or texts (edit strings in this file)
- Open the “instructions.hasm” file and analyze instructions sets
- You can find secrets stored in string constants by searching for specific keywords such as password, tokens, secret, apikey, etc.
- You can use the keyword:
Oper[1]: String(to grep all of the strings in the bytecode).
Note: In our React Native ebook, we have explained how to understand the Hermes bytecode, how to navigate through the bytecode, and how to modify the bytecode to change the logic of the application.
React Native npm packages
React Native utilizes many npm packages such as “jail-monkey” and “React-Native-ssl-pinning” npm packages. You can find information on “How to identify npm packages that are being used in React Native application?” in our <ebook>
Final Thoughts
We, as pentesters are always curious about new technologies, and it’s no different in the case of React Native. The technology is still new and needs more research and trial & error to uncover the nastiest loopholes for the purpose of exploiting them for fun and profit. Finally, thank you all for taking the time to read this blog.
You can refer to our ebook for more detailed information on React Native applications and the pentesting approach for them. Also, we have released two React Native CTF applications which you can find below:
- VulnerableRN.apk (Without Hermes)
- RNHermesCTF.apk (With Hermes)
References:
- https://medium.com/coox-tech/deep-dive-into-React-Natives-new-architecture-fb67ae615ccd
- https://www.educba.com/React-Native-architecture/
- https://hackernoon.com/understanding-React-Native-bridge-concept-e9526066ddb8
- https://www.slideshare.net/idsecconf/pentesting-React-Native-application-for-fun-and-profit-abdullah
- https://suam.wtf/posts/React-Native-application-static-analysis-en/
- https://www.slideshare.net/idsecconf/pentesting-React-Native-application-for-fun-and-profit-abdullah
- https://github.com/facebook/hermes/releases
- https://medium.com/mii-cybersec/modifying-React-Native-apk-d68ad878fdf1
About Payatu
Payatu is a research-powered, CERT-In empaneled cybersecurity consulting company specializing in security assessments of IoT product ecosystems, Web applications & Networks with a proven track record of securing applications and infrastructure for customers across 20+ countries.
Want to check the security posture of your organization? Browse through Payatu’s Service and get started with the most effective cybersecurity assessments.
