Charles Proxy: Inspección y Depuración de APIs -

Un proxy HTTP/monitor HTTP/proxy inverso que permite a desarrolladores y testers interceptar, ver e inspeccionar todo el tráfico de datos (HTTP y SSL/HTTPS) entre su equipo o dispositivo móvil e Internet.

Una herramienta esencial para la depuración y el diagnóstico de problemas en aplicaciones web y móviles, especialmente en la comunicación con APIs. También te dejo nuestro blog para que lo puedas visitar y saber un poco más de información sobre nuestros temas visitar blog.

Características Principales

Inspección de Tráfico Completa: Permite ver los detalles de las solicitudes (requests) y respuestas (responses), incluyendo encabezados HTTP (headers), datos de formulario (form data), parámetros de consulta (query parameters), y el cuerpo del mensaje (body).
Proxy SSL/HTTPS: Con la instalación de su certificado raíz, Charles puede descifrar y mostrar el tráfico HTTPS (encriptado), que es crucial para depurar APIs modernas.
Simulación de Condiciones: Ofrece herramientas para simular escenarios de prueba:
- Throttle (Limitador): Simula conexiones lentas (como 3G o dial-up) para probar el rendimiento de la aplicación.
- Breakpoint: Permite detener el tráfico en un punto específico (antes del request o antes del response) para inspeccionar y modificar los datos sobre la marcha.
Map Local: Permite mapear peticiones a archivos locales, lo que es útil para probar cambios en la interfaz de usuario o simular respuestas de la API sin depender del servidor (lo que se conoce como mocking).
Rewrite (Reescritura): Permite reescribir o modificar partes de una solicitud o respuesta (ej. encabezados, cuerpo, URL) automáticamente según reglas predefinidas.

Ejemplos de Uso (Hack: Diagnóstico de APIs)

Charles Proxy es invaluable para el desarrollo y el diagnóstico de APIs.

1. Diagnóstico de Problemas de Conexión y Autenticación

Escenario: Una aplicación móvil muestra un error al intentar iniciar sesión.

Uso de Charles:
- Inspecciona la solicitud de login para verificar que el username y la contraseña (o el token de autenticación) se estén enviando correctamente en el cuerpo o los encabezados de la solicitud.
- Verifica el código de estado HTTP de la respuesta. Un 401 Unauthorized indica un problema de credenciales o token. Un 403 Forbidden puede indicar un problema de permisos. Un 5xx indica un problema del servidor API.
- Analiza el cuerpo de la respuesta para ver el mensaje de error exacto que la API está devolviendo, lo cual es mucho más informativo que un mensaje genérico en la app.

2. Mocking de Respuestas de la API (Map Local)

Escenario: El backend de una nueva función aún no está listo, o necesitas forzar un caso de uso difícil de replicar, como un error específico o una lista de datos muy larga.

Uso de Charles:
- Utiliza la herramienta Map Local para interceptar una petición a una API (ej. /api/v1/productos) y, en lugar de enviarla al servidor real, Charles devuelve un archivo JSON que tú has creado localmente.
- Esto permite a los desarrolladores del frontend o de la app móvil continuar su trabajo sin depender del estado del backend.

3. Prueba de Errores Específicos (Rewrite y Breakpoints)

Escenario: La aplicación necesita manejar correctamente un error específico de la API (ej. un error de validación 400 Bad Request con un cuerpo de error particular).

Uso de Charles:
- Con Rewrite: Configuras una regla para que, cuando la API responda, Charles reescriba el código de estado de la respuesta a 400 y cambie el cuerpo de la respuesta por el JSON de error deseado.
- Con Breakpoints: Detienes la respuesta de la API (response breakpoint), modificas manualmente el código de estado y el cuerpo del mensaje, y luego dejas que la respuesta modificada llegue a tu aplicación, probando cómo reacciona.

⚙️ ¿Cómo Funciona Charles Proxy?

Charles es un proxy man-in-the-middle. Esto significa que se interpone entre tu dispositivo (navegador, aplicación móvil, etc.) e Internet.

Tu Dispositivo envía una solicitud (Request).
Charles la intercepta, la registra y la reenvía al servidor de destino.
El Servidor envía una respuesta (Response).
Charles la intercepta, la registra y la reenvía a tu dispositivo.

El Reto de HTTPS y el Certificado SSL

Cuando la comunicación es HTTP (no encriptada), Charles simplemente registra el tráfico. Sin embargo, la mayoría de las APIs y sitios web modernos usan HTTPS (encriptado con SSL/TLS).

Para poder «ver» el tráfico HTTPS, Charles realiza lo siguiente:

Genera un Certificado Raíz propio.
Para interceptar el tráfico, tu dispositivo debe confiar en este certificado (instalándolo en el sistema operativo o en el dispositivo móvil).
Cuando tu dispositivo se conecta al servidor, Charles se presenta ante el dispositivo como el servidor (usando su certificado falso) y se presenta ante el servidor como el dispositivo (manteniendo dos conexiones SSL separadas).
Esto le permite descifrar la información que entra y encriptar la que sale, permitiéndote inspeccionar los datos en texto plano. A este proceso se le llama SSL Proxying.

🛠️ Funcionalidades Avanzadas para la Depuración

Característica	Descripción	Uso Clave en Diagnóstico de APIs (Hack)
Breakpoints	Te permite pausar la comunicación justo antes de que una solicitud se envíe o una respuesta se reciba.	Simular Inyección: Modificar un request para inyectar datos (ej. forzar un ID de usuario diferente) o modificar un response para cambiar un valor o estado de error.
Rewrite Tool	Permite crear reglas automáticas para modificar solicitudes y respuestas.	Forzar Entornos/Tokens: Reemplazar automáticamente un header (ej. un token de autenticación vencido por uno válido) o cambiar la URL base de la API (de staging a production).
Map Remote	Redirecciona una solicitud a un servidor o endpoint diferente.	Pruebas A/B o Migración: Probar el mismo llamado de API contra dos versiones de backend diferentes (ej. el antiguo y el nuevo) sin cambiar código en la aplicación.
Throttling	Simula diferentes velocidades de conexión.	Pruebas de Red Lenta: Diagnosticar problemas de timeouts o fallos de la UI en conexiones lentas, crucial para apps móviles.
Repeat/Advanced Repeat	Permite re-ejecutar una solicitud con un solo clic.	Stress Testing Básico: Repetir una solicitud cientos de veces para verificar cómo responde el servidor API a una carga alta, o simplemente re-probar un fix.

Exportar a Hojas de cálculo

📱 Configuración en Dispositivos Móviles (iOS/Android)

Para usar Charles con una aplicación móvil, necesitas:

Conectar a la misma red Wi-Fi: Tu computadora (donde corre Charles) y el dispositivo móvil deben estar en la misma red.
Configurar el Proxy: En la configuración Wi-Fi del dispositivo móvil, debes indicar la dirección IP de tu computadora y el puerto que Charles usa (por defecto, 8888) como servidor Proxy.
Instalar el Certificado: Navegar a la URL especial (chls.pro/ssl) en el navegador del dispositivo para descargar e instalar el certificado raíz de Charles. Sin este paso, solo verás tráfico encriptado.

Este proceso es la clave para diagnosticar problemas directamente en la aplicación móvil, ya que te permite ver el tráfico exacto que genera la aplicación nativa, no solo el tráfico web.

Este video visitar es relevante porque ofrece un tutorial sobre cómo instalar el certificado raíz de Charles Proxy, un paso esencial para poder descifrar e inspeccionar el tráfico HTTPS de las APIs en dispositivos móviles.