{{#include ../../banners/hacktricks-training.md}}

# Analyse von React Native Anwendungen

Um zu bestätigen, ob die Anwendung auf dem React Native Framework basiert, befolgen Sie diese Schritte:

1. Benennen Sie die APK-Datei mit einer Zip-Erweiterung um und extrahieren Sie sie in einen neuen Ordner mit dem Befehl `cp com.example.apk example-apk.zip` und `unzip -qq example-apk.zip -d ReactNative`.

2. Navigieren Sie zum neu erstellten ReactNative-Ordner und suchen Sie den Ordner assets. In diesem Ordner sollten Sie die Datei `index.android.bundle` finden, die das React JavaScript in minifizierter Form enthält.

3. Verwenden Sie den Befehl `find . -print | grep -i ".bundle$"`, um nach der JavaScript-Datei zu suchen.

## Javascript-Code

Wenn Sie beim Überprüfen des Inhalts der `index.android.bundle` den JavaScript-Code der Anwendung finden (auch wenn er minifiziert ist), können Sie **ihn analysieren, um sensible Informationen und Schwachstellen zu finden**.

Da das Bundle tatsächlich den gesamten JS-Code der Anwendung enthält, ist es möglich, **ihn in verschiedene Dateien zu unterteilen** (was die Rückentwicklung potenziell erleichtert) mit dem **Tool [react-native-decompiler](https://github.com/numandev1/react-native-decompiler)**.

### Webpack

Um den JavaScript-Code weiter zu analysieren, können Sie die Datei auf [https://spaceraccoon.github.io/webpack-exploder/](https://spaceraccoon.github.io/webpack-exploder/) hochladen oder diese Schritte befolgen:

1. Erstellen Sie eine Datei namens `index.html` im selben Verzeichnis mit dem folgenden Code:
```html
<script src="./index.android.bundle"></script>
```
2. Öffnen Sie die `index.html`-Datei in Google Chrome.

3. Öffnen Sie die Entwicklertools, indem Sie **Command+Option+J für OS X** oder **Control+Shift+J für Windows** drücken.

4. Klicken Sie im Entwicklertool auf "Sources". Sie sollten eine JavaScript-Datei sehen, die in Ordner und Dateien unterteilt ist und das Hauptbündel bildet.

Wenn Sie eine Datei namens `index.android.bundle.map` finden, können Sie den Quellcode in einem unminifizierten Format analysieren. Map-Dateien enthalten Quellzuordnungen, die es Ihnen ermöglichen, minifizierte Bezeichner zuzuordnen.

Um nach sensiblen Anmeldeinformationen und Endpunkten zu suchen, befolgen Sie diese Schritte:

1. Identifizieren Sie sensible Schlüsselwörter, um den JavaScript-Code zu analysieren. React Native-Anwendungen verwenden häufig Drittanbieterdienste wie Firebase, AWS S3-Dienstendpunkte, private Schlüssel usw.

2. In diesem speziellen Fall wurde beobachtet, dass die Anwendung den Dialogflow-Dienst verwendet. Suchen Sie nach einem Muster, das mit seiner Konfiguration zusammenhängt.

3. Es war günstig, dass während des Recon-Prozesses sensible hartcodierte Anmeldeinformationen im JavaScript-Code gefunden wurden.

### Ändern Sie den JS-Code und bauen Sie neu

In diesem Fall ist es einfach, den Code zu ändern. Sie müssen die App nur umbenennen, um die Erweiterung `.zip` zu verwenden, und sie extrahieren. Dann können Sie **den JS-Code innerhalb dieses Bündels ändern und die App neu bauen**. Das sollte ausreichen, um Ihnen zu ermöglichen, **Code** in die App zu **injizieren** zu Testzwecken.

## Hermes-Bytecode

Wenn das Bündel **Hermes-Bytecode** enthält, **werden Sie nicht auf den JavaScript-Code** der App zugreifen können (nicht einmal auf die minifizierte Version).

Sie können überprüfen, ob das Bündel Hermes-Bytecode enthält, indem Sie den folgenden Befehl ausführen:
```bash
file index.android.bundle
index.android.bundle: Hermes JavaScript bytecode, version 96
```
Sie können jedoch die Tools **[hbctool](https://github.com/bongtrop/hbctool)**, **[hermes-dec](https://github.com/P1sec/hermes-dec)** oder **[hermes_rs](https://github.com/Pilfer/hermes_rs)** verwenden, um **den Bytecode zu disassemblieren** und auch um **ihn in einen Pseudo-JS-Code zu dekompilieren**. Dazu beispielsweise diese Befehle:
```bash
hbc-disassembler ./index.android.bundle /tmp/my_output_file.hasm
hbc-decompiler ./index.android.bundle /tmp/my_output_file.js
```
### Code ändern und neu erstellen

Idealerweise sollten Sie in der Lage sein, den disassemblierten Code zu ändern (einen Vergleich, einen Wert oder was auch immer Sie ändern müssen) und dann **den Bytecode neu zu erstellen** und anschließend die App neu zu erstellen.

Das Tool **[hbctool](https://github.com/bongtrop/hbctool)** unterstützt das Disassemblieren des Bundles und das Wiederherstellen nach den Änderungen, jedoch **unterstützt es nur alte Versionen** des Hermes-Bytecodes.

Das Tool **[hermes-dec](https://github.com/P1sec/hermes-dec)** unterstützt nicht das Neuaufbauen des Bytecodes.

Das Tool **[hermes_rs](https://github.com/Pilfer/hermes_rs)** unterstützt das Neuaufbauen des Bytecodes, ist jedoch tatsächlich eine Bibliothek und kein CLI-Tool.

## Dynamische Analyse

Sie könnten versuchen, die App dynamisch zu analysieren, indem Sie Frida verwenden, um den Entwicklermodus der React-App zu aktivieren und **`react-native-debugger`** daran anzuhängen. Allerdings benötigen Sie dafür anscheinend den Quellcode der App. Weitere Informationen dazu finden Sie unter [https://newsroom.bedefended.com/hooking-react-native-applications-with-frida/](https://newsroom.bedefended.com/hooking-react-native-applications-with-frida/).

## Referenzen

- [https://medium.com/bugbountywriteup/lets-know-how-i-have-explored-the-buried-secrets-in-react-native-application-6236728198f7](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://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](https://payatu.com/wp-content/uploads/2023/02/Mastering-React-Native-Application-Pentesting-A-Practical-Guide-2.pdf)

{{#include ../../banners/hacktricks-training.md}}