Cómo capturar tráfico HTTPS de tu app de Flutter en iOS

1. Flutter y las llamadas de red

Flutter es un framework popular de Google que permite a los desarrolladores crear apps para iOS, Android y otras plataformas con una única base de código.

Al crear apps con Flutter, los desarrolladores suelen necesitar hacer llamadas de red para obtener datos de servidores o enviarles datos. Sin embargo, estas llamadas a veces fallan o no funcionan como se espera. Poder ver e inspeccionar el tráfico HTTP/HTTPS real entre tu app y los servidores es muy útil para encontrar y solucionar problemas durante el desarrollo.

2. Cómo capturar tráfico HTTPS de una app de Flutter en iOS con Proxyman

2.1 Añadir la configuración de proxy HTTP a Flutter

Por defecto, Flutter no usa ninguna configuración de proxy HTTP. Debes añadir manualmente la configuración de proxy HTTP a tu proyecto de Flutter.

Depende de la biblioteca de red HTTP que uses en tu proyecto de Flutter. En este ejemplo usaremos el paquete http.

Asegúrate de reemplazar <YOUR_LOCAL_IP> por la IP externa de tu computadora si usas Android. Puedes obtener la IP en Proxyman → menú Tools → Install for iOS → Physical Device

Paquete http

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new HttpClient instance.
HttpClient httpClient = new HttpClient();

// Hook into the findProxy callback to set
// the client's proxy.
httpClient.findProxy = (uri) {
  return "PROXY $proxy;";
};

// This is a workaround to allow Proxyman to receive
// SSL payloads when your app is running on Android.
httpClient.badCertificateCallback = 
  ((X509Certificate cert, String host, int port) => true);

// Pass your newly instantiated HttpClient to http.IOClient.
IOClient myClient = IOClient(httpClient);

// Make your request as normal.
var response = myClient.get('/my-url');

Biblioteca Dio

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new Dio instance.
Dio dio = Dio();

// Tap into the onHttpClientCreate callback
// to configure the proxy just as we did earlier.
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
  // Hook into the findProxy callback to set the client's proxy.
  client.findProxy = (url) {
    return 'PROXY $proxy'?;
  };
  
  // This is a workaround to allow Proxyman to receive
  // SSL payloads when your app is running on Android.
  client.badCertificateCallback = (X509Certificate cert, String host, int port) => true;
}

Paquete HTTP de Dart

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new HttpClient instance.
HttpClient httpClient = new HttpClient();

// Hook into the findProxy callback to set
// the client's proxy.
httpClient.findProxy = (uri) {
  return "PROXY $proxy;";
};

// This is a workaround to allow Proxyman to receive
// SSL payloads when your app is running on Android
httpClient.badCertificateCallback = 
  ((X509Certificate cert, String host, int port) => true);

Puedes encontrar más detalles técnicos en la documentación de Proxyman para Flutter

2.2 Capturar tráfico HTTPS/HTTP de Flutter en el simulador de iOS

1. Abre primero tu simulador de iOS. Asegúrate de que sea el simulador que usas para ejecutar tu app de Flutter.
2. Abre Proxyman → menú Certificate → Install for iOS → Simulator → sigue los pasos. Proxyman configura el proxy automáticamente y instala el certificado en un solo clic.

Ha llegado el momento de ejecutar tu app de Flutter en el simulador de iOS y empezar a capturar el tráfico HTTP/HTTPS.

Proxyman empezará a capturar automáticamente el tráfico HTTP/HTTPS de tu app de Flutter.

2.3. Capturar tráfico HTTPS/HTTP de Flutter en dispositivos iOS

Para capturar el tráfico HTTP/HTTPS de tu app de Flutter en un dispositivo iOS o iPadOS, debes instalar el certificado de Proxyman en el dispositivo.

Sigue los pasos de Proxyman → menú Certificate → Install for iOS → Physical Device → sigue los pasos.

Asegúrate de instalar el certificado y de confiar en él en el último paso.

Ahora puedes ejecutar tu app de Flutter en el dispositivo iOS o iPadOS y empezar a capturar el tráfico HTTP/HTTPS.

Proxyman empezará a capturar automáticamente el tráfico HTTP/HTTPS de tu app de Flutter.

Conclusión

Capturar el tráfico HTTP/HTTPS de tu app de Flutter es muy sencillo.

1. Añade la configuración de proxy HTTP a tu proyecto de Flutter
2. Instala el certificado de Proxyman en tu dispositivo iOS o iPadOS
3. Ejecuta tu app de Flutter y empieza a capturar el tráfico HTTP/HTTPS con Proxyman

Mantén el código del proxy fuera de las compilaciones de release

Envuelve el código del proxy y de badCertificateCallback en una comprobación que solo se ejecute en depuración. Un callback que acepta cualquier certificado nunca debe llegar a los usuarios, porque elimina una comprobación de seguridad HTTPS importante. Este artículo se centra en iOS. Para el emulador de Android actual, Proxyman 6.4 o posterior puede usar su configuración de un solo clic para Flutter sin cambiar el código de red de Flutter.

¿Qué sigue?

• Prueba algunas herramientas de depuración para inspeccionar y modificar el contenido (payload) de las solicitudes y respuestas.
• Descarga Proxyman desde el sitio web de Proxyman