Cómo capturar tráfico HTTP/HTTPS de apps de React Native y Expo en iOS y Android

React Native es un framework muy popular para crear apps móviles con JavaScript y React. Permite a los desarrolladores crear apps nativas usando React y JavaScript.

Sin embargo, no es fácil capturar e inspeccionar el tráfico HTTPS de las apps de React Native. La solución más común es usar la función console.log() para imprimir el tráfico HTTPS en la consola.

Este tutorial muestra cómo capturar e inspeccionar el tráfico HTTPS de las apps de React Native con Proxyman.

Aquí tienes el video de demostración en YouTube: https://www.youtube.com/watch?v=4LkKXyIPulM

1. Descargar y configurar Proxyman para macOS

Proxyman es una herramienta potente que te permite capturar HTTP y HTTPS desde tu iPhone, iPad y simuladores de iOS sin hacer jailbreak ni pasos complicados.

Antes de empezar, descarga y configura Proxyman para macOS.

1. Abre el sitio web de Proxyman y descarga la última versión de Proxyman para macOS

• Proxyman para macOS: compatible con macOS 12 o posterior

2. Abre Proxyman -> Certificate Menu -> Install Certificate for this Mac...
3. Sigue los pasos para instalar el certificado
4. Comprueba que todas las marcas verdes aparezcan marcadas

2. Clonar la app de ejemplo de React Native desde GitHub e iniciar la app para iOS o Android

1. Clona la app de ejemplo de React Native desde GitHub: https://github.com/ProxymanApp/Proxyman-React-Native-Sample-App

git clone https://github.com/ProxymanApp/Proxyman-React-Native-Sample-App
cd Proxyman-React-Native-Sample-App

Este proyecto se creó con Expo. Puedes crear tu propia app de React Native siguiendo la documentación de Expo.

2. Instala las dependencias y asegúrate de usar NodeJS 22 o posterior

npm install

2. Inicia la app en iOS con este comando:

npm run ios

Se abrirá un nuevo simulador de iOS y la app se iniciará.

3. Capturar e inspeccionar el tráfico HTTPS desde el simulador de iOS

Antes de empezar a capturar el tráfico HTTPS, debemos instalar el certificado de Proxyman en el simulador de iOS.

Es un paso importante para que Proxyman pueda descifrar tus datos HTTPS sin mostrar errores de SSL.

Proxyman facilita instalar el certificado en el simulador de iOS en solo unos clics.

Abramos Proxyman -> Certificate Menu -> Install Certificate for iOS -> Simulators -> Sigue los pasos

Listo. Empecemos a capturar el tráfico HTTPS.

Vuelve al simulador de iOS e inicia la app de nuevo. Prueba a tocar los botones GET / POST / PUT de la pantalla principal. Esta app hará una solicitud HTTPS a https://httpbin.proxyman.app, un servidor de eco para pruebas HTTPS.

En este punto, vemos que Proxyman captura el tráfico HTTPS, pero sigue cifrado.

Mira el panel Response: verás que el tráfico HTTPS está cifrado. Haz clic en el botón "Enable SSL Proxying".

Listo. Vuelve a abrir el simulador de iOS y toca los botones GET / POST / PUT de la pantalla principal. Esta vez, verás que el tráfico HTTPS está descifrado.

4. Capturar e inspeccionar el tráfico HTTPS desde emuladores de Android

4.1 Crear un nuevo emulador de Android con imágenes de Google APIs

Es igual que con el simulador de iOS. Sin embargo, necesitamos crear un nuevo emulador de Android en Android Studio.

1. En Android Studio -> ve a Virtual Device Manager -> crea un nuevo emulador de Android
2. Puedes elegir el dispositivo que quieras, por ejemplo, Pixel 9 Pro
3. Eso sí, asegúrate de seleccionar la versión con Google APIs y no la versión con Play Store.
4. En este tutorial usamos un Pixel 9 Pro con una imagen del sistema de Google APIs disponible en Android Studio.

5. Inicia la app de React Native en el emulador de Android con este comando:

npm run android

4.2 Instalar el certificado de Proxyman en el emulador de Android

Para capturar el tráfico HTTPS del emulador de Android, debemos instalar el certificado de Proxyman en él.

Con el script automático para emuladores de Android, lo hacemos todo con un solo clic. Es una función que ahorra tiempo.

1. Abre Proxyman -> Certificate Menu -> Install Certificate for Android -> Emulators -> haz clic en el botón Override Emulator

En esta pantalla, puedes ver que el certificado de Proxyman está instalado en el emulador de Android.

Listo. Vuelve a abrir el emulador de Android y toca los botones GET / POST / PUT de la pantalla principal. Esta vez, verás que el tráfico HTTPS está descifrado.

5. Conclusión

En este tutorial hemos mostrado cómo capturar e inspeccionar el tráfico HTTPS de las apps de React Native con Proxyman.

Proxyman es una herramienta potente que te permite capturar HTTP y HTTPS desde tu iPhone, iPad, simuladores de iOS y emuladores de Android sin hacer jailbreak ni pasos complicados.

Elige una imagen de emulador con Google APIs en lugar de una imagen con Google Play cuando la configuración del certificado necesite acceso al sistema. El script automático para emuladores de Android de Proxyman puede preparar el proxy y el certificado, y su acción de revertir ayuda a restaurar el emulador más adelante. Si el registro se llena de solicitudes de Metro o de desarrollo, filtra por el host de tu API antes de empezar las pruebas.

Proxyman es una app de alto rendimiento para macOS, Windows y Linux que permite a los desarrolladores capturar el tráfico HTTPS en dispositivos iOS, en el simulador de iOS y en dispositivos Android.

Descárgala en https://proxyman.com