Charles Proxy

Charles Proxy facilita la depuración de solicitudes HTTP actuando como un proxy de intermediario (man-in-the-middle), capturando y permitiendo la inspección y modificación de todo el tráfico de red entre una aplicación cliente y los servidores de destino.

Charles Proxy funciona como un servidor proxy HTTP local, permitiendo a los desarrolladores e ingenieros de QA observar, interceptar y manipular la comunicación de red. Esta capacidad es fundamental para comprender las interacciones cliente-servidor, diagnosticar problemas de integración, probar casos extremos y verificar el comportamiento de la API, especialmente cuando se trabaja con o se desarrollan servicios que interactúan con un proxy ascendente.

Configuración de Charles Proxy

Instalación y primer inicio

Descargue e instale Charles Proxy desde su sitio web oficial. Al iniciar por primera vez, Charles normalmente intenta configurarse como el proxy del sistema. Acepte esta solicitud para permitir que Charles intercepte el tráfico de las aplicaciones que respetan la configuración del proxy del sistema.

Configuración de los ajustes del proxy del sistema

Cuando Charles está en ejecución, configura automáticamente los ajustes del proxy HTTP/HTTPS del sistema a 127.0.0.1 (localhost) en el puerto 8888 (predeterminado). La mayoría de las aplicaciones, incluidos los navegadores web, respetan esta configuración.

Para verificar o configurar manualmente:
* macOS: Ajustes del Sistema > Red > Wi-Fi/Ethernet > Detalles > Proxies. Asegúrese de que "Proxy web (HTTP)" y "Proxy web seguro (HTTPS)" estén habilitados y apunten a 127.0.0.1:8888.
* Windows: Configuración > Red e Internet > Proxy > Configuración manual del proxy. Asegúrese de que "Usar un servidor proxy" esté habilitado con 127.0.0.1 y el puerto 8888.
* Linux (GNOME): Configuración > Red > Proxy de red. Establezca el Método en "Manual" y configure el proxy HTTP/HTTPS en 127.0.0.1:8888.

Configuración de aplicaciones cliente

Algunas aplicaciones, particularmente las herramientas de línea de comandos o SDK específicos, pueden no respetar la configuración de proxy de todo el sistema. En estos casos, configure la aplicación directamente.

Ejemplo: curl con proxy

curl -x http://127.0.0.1:8888 https://api.example.com/data

Ejemplo: axios de Node.js con proxy

const axios = require('axios');

axios.get('https://api.example.com/data', {
  proxy: {
    host: '127.0.0.1',
    port: 8888
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

Proxy SSL para tráfico HTTPS

Para inspeccionar el tráfico HTTPS, Charles Proxy debe realizar un proxy SSL (o TLS). Esto implica que Charles genere y firme certificados para los dominios de destino, los presente al cliente y luego establezca su propia conexión segura con el servidor real.

Instalación del certificado raíz de Charles

La aplicación cliente debe confiar en el certificado raíz de Charles para que el proxy SSL funcione sin advertencias de seguridad.

• Navegadores de escritorio/Sistema:
  • Vaya a Help > SSL Proxying > Install Charles Root Certificate. Siga las indicaciones específicas del sistema operativo para instalarlo en el almacén de certificados raíz de confianza del sistema.
• Dispositivos móviles:
  • Configure el dispositivo móvil para usar Charles como su proxy HTTP (por ejemplo, ip_de_su_mac:8888).
  • En el dispositivo, navegue a chls.pro/ssl y siga las instrucciones para descargar e instalar el certificado.

Habilitación del proxy SSL para hosts específicos

Después de instalar el certificado raíz, habilite el proxy SSL para los hosts específicos que desee inspeccionar.

1. Vaya a Proxy > SSL Proxying Settings....
2. Haga clic en "Add".
3. Introduzca el Host (por ejemplo, api.example.com, *.example.com para un comodín, o * para todos los hosts) y el Port (típicamente 443 para HTTPS, o * para todos los puertos).
4. Haga clic en "OK" y luego en "OK" de nuevo.

El tráfico a los hosts especificados ahora será desencriptado y visible en Charles.

Funciones clave de depuración

Monitoreo y filtrado de tráfico

Las vistas "Structure" y "Sequence" muestran las solicitudes capturadas.
* Vista de secuencia: Muestra las solicitudes en orden cronológico.
* Vista de estructura: Organiza las solicitudes por host y ruta.

Para centrarse en el tráfico relevante:
* Campo de filtro: Utilice el campo de filtro en la parte superior de la ventana de Charles para buscar URLs, hosts o contenido.
* Herramienta de enfoque: Haga clic derecho en una solicitud y seleccione "Focus" para ocultar todos los demás hosts de la vista actual.
* Botón de grabación: Active/desactive el botón de grabación (círculo rojo) para iniciar/detener la captura de tráfico.

Puntos de interrupción

Los puntos de interrupción le permiten pausar y modificar las solicitudes antes de que se envíen al servidor, o las respuestas antes de que se envíen al cliente.

1. Vaya a Proxy > Breakpoints Settings....
2. Haga clic en "Add" para solicitudes o respuestas.
3. Especifique el Host y Path (por ejemplo, /login).
4. Cuando una solicitud/respuesta coincida, Charles se pausará y aparecerá una pestaña de "Breakpoints".
5. Modifique los encabezados, los parámetros de consulta o el cuerpo.
6. Haga clic en "Execute" para enviar la solicitud/respuesta modificada.

Herramienta de reescritura

La herramienta de reescritura proporciona modificaciones automatizadas y persistentes a las solicitudes y respuestas. Esto es útil para simular comportamientos específicos del servidor o condiciones del cliente sin intervención manual.

1. Vaya a Tools > Rewrite....
2. Habilite Rewrite y añada un nuevo "Set".
3. Añada "Locations" (URLs a las que aplicar reglas) usando Host y Path.
4. Añada "Rules" dentro del conjunto:
   • Add Header/Remove Header: Modificar encabezados HTTP.
   • Change Query Parameter: Modificar parámetros de consulta de URL.
   • Body Replace: Buscar y reemplazar texto dentro del cuerpo de la solicitud/respuesta.
   • URL Replace: Modificar partes de la URL de la solicitud.

Ejemplo: Modificación del cuerpo de una respuesta de API
Una regla de reescritura podría reemplazar {"status": "active"} por {"status": "maintenance"} en una respuesta JSON para probar cómo un cliente maneja diferentes estados.

Map Local / Map Remote

Estas herramientas redirigen las solicitudes a diferentes fuentes.

• Map Local: Sirve un archivo local en lugar de una respuesta remota.

  1. Vaya a Tools > Map Local....
  2. Habilite Map Local y añada una nueva entrada.
  3. Especifique el Host y Path de la URL remota.
  4. Seleccione la ruta del File local a servir.
     Esto es útil para probar rápidamente cambios en la interfaz de usuario o simular respuestas de API específicas sin modificar el backend.

• Map Remote: Redirige una solicitud para una URL a una URL completamente diferente.

  1. Vaya a Tools > Map Remote....
  2. Habilite Map Remote y añada una nueva entrada.
  3. Especifique el Host y Path de la solicitud original.
  4. Especifique el nuevo Host y Path para la solicitud redirigida.
     Útil para redirigir llamadas a la API a un entorno de staging o a un servidor de desarrollo local.

Throttling

El Throttling simula condiciones de red lentas, ayudando a identificar cuellos de botella de rendimiento o problemas de UI relacionados con la carga lenta de datos.

1. Vaya a Proxy > Throttle Settings....
2. Habilite "Enable Throttling".
3. Configure los parámetros Bandwidth, Utilisation y Latency.
4. Opcionalmente, seleccione "Only for selected hosts" y añada hosts específicos para aplicar el throttling.

Repeat / Advanced Repeat

Estas funciones permiten reenviar solicitudes.

• Repeat: Haga clic derecho en una solicitud y seleccione "Repeat" para enviarla de nuevo inmediatamente.
• Advanced Repeat: Haga clic derecho en una solicitud y seleccione "Advanced Repeat" para enviarla varias veces con concurrencia y recuentos de iteración personalizables. Esto es útil para pruebas de carga o para verificar condiciones de carrera.

Depuración de interacciones con proxy ascendente

Cuando su aplicación cliente está configurada para usar Charles, y Charles mismo está configurado para usar un proxy ascendente (por ejemplo, un proxy corporativo), Charles actúa como intermediario.

Para configurar Charles para usar un proxy ascendente:
1. Vaya a Proxy > External Proxy Settings....
2. Habilite "Use external proxy".
3. Introduzca el Host, Port y cualquier Username/Password requerido para su proxy ascendente.
4. Habilite "SOCKS proxy" si su proxy ascendente es un proxy SOCKS.

En esta configuración, Charles captura el tráfico de su cliente y luego lo reenvía al proxy ascendente. Esto le permite inspeccionar el tráfico antes de que llegue al proxy ascendente, lo cual es crucial para diagnosticar problemas en los que el proxy ascendente podría estar modificando solicitudes o bloqueando ciertos endpoints.

Problemas comunes y solución de problemas