React Native Application - HackTricks

> [!TIP] Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
> Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

> Support HackTricks
> - Check the subscription plans!
> - Join the 💬 Discord group or the telegram group or follow us on Twitter 🐦 @hacktricks_live.
> - Share hacking tricks by submitting PRs to the HackTricks and HackTricks Cloud github repos.

# React Native Application Analysis

To confirm if the application was built on the React Native framework, follow these steps:

1. Rename the APK file with a zip extension and extract it to a new folder using the command `cp com.example.apk example-apk.zip` and `unzip -qq example-apk.zip -d ReactNative`.

2. Navigate to the newly created ReactNative folder and locate the assets folder. Inside this folder, you should find the file `index.android.bundle`, which contains the React JavaScript in a minified format.

3. Use the command `find . -print | grep -i ".bundle$"` to search for the JavaScript file.

## Javascript Code

If checking the contents of the `index.android.bundle` you find the JavaScript code of the application (even if minified), you can analyze it to find sensitive information and vulnerabilities.

As the bundle contains actually all the JS code of the application it's possible to divide it in different files (potentially making easier its reverse engineering) using the tool react-native-decompiler.

### Webpack

To further analyze the JavaScript code, you can upload the file to https://spaceraccoon.github.io/webpack-exploder/ or follow these steps:

1. Create a file named `index.html` in the same directory with the following code:

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

2. Open the `index.html` file in Google Chrome.

3. Open the Developer Toolbar by pressing Command+Option+J for OS X or Control+Shift+J for Windows.

4. Click on "Sources" in the Developer Toolbar. You should see a JavaScript file that is split into folders and files, making up the main bundle.

If you find a file called `index.android.bundle.map`, you will be able to analyze the source code in an unminified format. Map files contain source mapping, which allows you to map minified identifiers.

To search for sensitive credentials and endpoints, follow these steps:

1. Identify sensitive keywords to analyze the JavaScript code. React Native applications often use third-party services like Firebase, AWS S3 service endpoints, private keys, etc.

2. In this specific case, the application was observed to be using the Dialogflow service. Search for a pattern related to its configuration.

3. It was fortunate that sensitive hard-coded credentials were found in the JavaScript code during the recon process.

### Change JS code and rebuild

In this case changing the code is easy. You just need to rename the app to use the extension `.zip` and extract it. Then you can modify the JS code inside this bundle and rebuild the app. This should be enough to allow you to inject code in the app for testing purpses.

## Hermes bytecode

If the bundle contains Hermes bytecode, you won't be able to access the Javascript code of the app (not even to the minified version).

You can check if the bundle contains Hermes bytecode by running the following command:

    file index.android.bundle
    index.android.bundle: Hermes JavaScript bytecode, version 96

However, you can use the tools hbctool, hermes-dec or hermes_rs to disassemble the bytecode and also to decompile it to some pseudo JS code. To do this, for example these commands:

    hbc-disassembler ./index.android.bundle /tmp/my_output_file.hasm
    hbc-decompiler ./index.android.bundle /tmp/my_output_file.js

### Change code and rebuild

Ideally you should be able to modify the dissasembled code (changing a comparison, or a value or whatever you need to modify) and then rebuild the bytecode and then rebuild the app.

The tool hbctool supports dissasembling the bundle and building it back after the changes have been performed, however it only supports old versions of Hermes bytecode.

The tool hermes-dec doesn't support rebuilding the bytecode.

The tool hermes_rs supports rebuilding the bytecode, but it's actually a library and nto a CLI tool.

## Dyanmic Analysis

You could try to dynamically analyze the app would be to use Frida to enable the developer mode of the React app and use `react-native-debugger` to attach to it. However, for this you need the source code of the app apparently. You can find more info about this in https://newsroom.bedefended.com/hooking-react-native-applications-with-frida/.

## References

- https://medium.com/bugbountywriteup/lets-know-how-i-have-explored-the-buried-secrets-in-react-native-application-6236728198f7
- https://www.assetnote.io/resources/research/expanding-the-attack-surface-react-native-android-applications
- https://payatu.com/wp-content/uploads/2023/02/Mastering-React-Native-Application-Pentesting-A-Practical-Guide-2.pdf

> [!TIP] Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
> Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

> Support HackTricks
> - Check the subscription plans!
> - Join the 💬 Discord group or the telegram group or follow us on Twitter 🐦 @hacktricks_live.
> - Share hacking tricks by submitting PRs to the HackTricks and HackTricks Cloud github repos.