Inspección de solicitudes HTTPS con HTTP Toolkit
Cuando tu llamada a la API falla silenciosamente o la autenticación se rompe sin explicación, las DevTools del navegador a menudo se quedan cortas. Necesitas ver el tráfico cifrado real que sale de tu aplicación. HTTP Toolkit proporciona exactamente esta capacidad: una forma directa de interceptar el tráfico HTTPS e inspeccionar lo que realmente está sucediendo en la red.
Este artículo cubre cómo funciona HTTP Toolkit como proxy local, lo que necesitas saber sobre el soporte de protocolos y los flujos de trabajo prácticos que los desarrolladores frontend utilizan para depurar solicitudes HTTPS.
Puntos clave
- HTTP Toolkit opera como un proxy man-in-the-middle, descifrando el tráfico HTTPS mediante el uso de una autoridad certificadora raíz de confianza.
- La herramienta soporta completamente la interceptación de HTTP/1.1, HTTP/2 y WebSocket, mientras que HTTP/3 recurre a protocolos anteriores.
- La interceptación del navegador funciona automáticamente a través de instancias preconfiguradas, mientras que las aplicaciones móviles y de escritorio requieren configuración manual del proxy y del certificado.
- Más allá de la inspección pasiva, HTTP Toolkit te permite establecer puntos de interrupción, modificar solicitudes y probar diferentes respuestas de API sin cambios en el backend.
Cómo funciona HTTP Toolkit como proxy MITM
HTTP Toolkit opera como un proxy man-in-the-middle (MITM). Se sitúa entre tu cliente (navegador, aplicación móvil o aplicación de escritorio) y el servidor, interceptando todo el tráfico que pasa a través de él.
Para el tráfico HTTP, esto es sencillo. La inspección HTTPS requiere un paso adicional: confiar en la autoridad certificadora (CA) raíz generada por HTTP Toolkit. Cuando confías en este certificado, la herramienta puede descifrar el tráfico TLS, mostrarlo en forma legible y luego volver a cifrarlo antes de reenviarlo al servidor de destino.
La confianza del certificado ocurre automáticamente para los navegadores iniciados a través de HTTP Toolkit. Para otras aplicaciones, necesitarás configurar los ajustes del proxy e instalar el certificado manualmente.
Soporte de protocolos y limitaciones
HTTP Toolkit soporta completamente la interceptación de HTTP/1.1 y HTTP/2. Estos protocolos cubren la gran mayoría de los escenarios de depuración frontend.
HTTP/3 (QUIC) presenta una situación diferente. Cuando un cliente normalmente usaría HTTP/3, HTTP Toolkit fuerza un retroceso a HTTP/2 o HTTP/1.1. La interceptación nativa de QUIC aún no está disponible. Para la mayoría del trabajo de depuración frontend, esta limitación rara vez importa: los datos de solicitud y respuesta permanecen idénticos independientemente del protocolo de transporte.
La herramienta también maneja conexiones WebSocket, permitiéndote inspeccionar la comunicación en tiempo real junto con el tráfico HTTP estándar.
Conexión de navegadores y aplicaciones
Interceptación del navegador
El flujo de trabajo más simple comienza desde el panel de control de HTTP Toolkit. Haz clic en la opción del navegador (Chrome, Firefox o Edge), y HTTP Toolkit lanza una instancia preconfigurada con los ajustes del proxy y la confianza del certificado ya configurados.
Cada solicitud desde esa ventana del navegador aparece en la pestaña View de HTTP Toolkit. Ves la solicitud completa (método, URL, encabezados y cuerpo) junto con la respuesta completa.
Tráfico de aplicaciones móviles
La depuración móvil requiere más configuración. Para dispositivos Android, tienes varias opciones:
- Conexión ADB: Conecta un dispositivo vía USB y deja que HTTP Toolkit lo configure
- Proxy manual: Configura los ajustes WiFi de tu dispositivo para enrutar a través de HTTP Toolkit
- Dispositivos rooteados: Instala el certificado a nivel del sistema para una cobertura más amplia
El modelo de seguridad de Android crea fricción aquí. Las aplicaciones dirigidas a Android 7+ solo confían en certificados instalados por el usuario si están configuradas explícitamente para hacerlo. Muchas aplicaciones ignoran completamente los certificados CA de usuario, lo que significa que solo verás el tráfico de aplicaciones que no han restringido la confianza de certificados.
El certificate pinning añade otra capa. Las aplicaciones que fijan certificados específicos rechazarán el certificado de HTTP Toolkit independientemente de la configuración de confianza del sistema. Existen algunas soluciones alternativas (scripts de Frida, dispositivos rooteados con instalación de CA del sistema), pero están fuera de la funcionalidad principal de HTTP Toolkit.
Discover how at OpenReplay.com.
Aplicaciones de escritorio
Para aplicaciones Electron y otro software de escritorio, configura la aplicación para usar HTTP Toolkit como su proxy. El método exacto varía según la aplicación: algunas respetan la configuración del proxy del sistema, otras requieren variables de entorno o flags de línea de comandos.
Visualización y modificación del tráfico
Una vez que el tráfico fluye a través de HTTP Toolkit, la página View muestra cada intercambio interceptado. La interfaz se divide en una lista de solicitudes y un panel de detalles.
El panel de detalles desglosa cada intercambio en secciones colapsables: encabezados de solicitud, cuerpo de solicitud, encabezados de respuesta, cuerpo de respuesta e información de tiempo. El contenido del cuerpo se formatea automáticamente según el tipo de contenido: JSON obtiene resaltado de sintaxis, y JavaScript minificado se expande para mayor legibilidad.
Para la depuración frontend, las características más útiles incluyen:
- Filtrado: Reduce a hosts, métodos o códigos de estado específicos
- Búsqueda: Encuentra solicitudes por patrón de URL o contenido
- Exportación: Genera fragmentos de código en fetch, axios, curl y otros formatos
Más allá de la inspección pasiva, HTTP Toolkit soporta puntos de interrupción y reglas. Puedes pausar solicitudes antes de que lleguen al servidor, modificar encabezados o cuerpos, y luego reenviar la solicitud alterada. Esto ayuda a probar cómo tu aplicación maneja diferentes respuestas de API sin cambiar el código del backend.
Flujos de trabajo prácticos de depuración frontend
La inspección HTTPS con HTTP Toolkit brilla en varios escenarios:
- Depuración de autenticación: Inspecciona encabezados de tokens, valores de cookies y flujos OAuth
- Problemas de integración de API: Ve exactamente qué payload envía tu aplicación versus lo que el servidor espera
- Análisis de scripts de terceros: Monitorea qué transmiten los scripts de analítica y publicidad
- Resolución de problemas de CORS: Examina solicitudes preflight y encabezados de respuesta
La herramienta captura tráfico que las DevTools del navegador podrían perder: solicitudes de service workers, fetches en segundo plano o scripts que detectan herramientas de desarrollador abiertas.
Conclusión
HTTP Toolkit proporciona a los desarrolladores frontend una inspección HTTPS confiable en navegadores, aplicaciones móviles y aplicaciones de escritorio. El requisito de confianza del certificado habilita el descifrado, mientras que el comportamiento de retroceso para HTTP/3 garantiza la compatibilidad con infraestructura moderna. Para depurar llamadas a API, flujos de autenticación y comportamiento de red, proporciona visibilidad que las herramientas del navegador por sí solas no pueden igualar.
Preguntas frecuentes
Las aplicaciones dirigidas a Android 7 y superiores solo confían en certificados instalados por el usuario si su configuración de seguridad de red lo permite explícitamente. Muchas aplicaciones restringen la confianza de certificados a certificados del sistema o usan certificate pinning, que rechaza cualquier certificado que no coincida con sus valores esperados. Para estas aplicaciones, es posible que necesites un dispositivo rooteado con instalación de CA a nivel del sistema.
HTTP Toolkit no intercepta nativamente el tráfico HTTP/3 (QUIC). En su lugar, fuerza a los clientes a retroceder a HTTP/2 o HTTP/1.1. Este retroceso es transparente para la mayoría de los propósitos de depuración, ya que los datos de solicitud y respuesta permanecen iguales independientemente del protocolo de transporte subyacente.
Sí. HTTP Toolkit soporta puntos de interrupción y reglas que te permiten pausar solicitudes, modificar encabezados o contenido del cuerpo, y reenviar la solicitud alterada. También puedes interceptar respuestas y cambiarlas antes de que lleguen a tu aplicación, lo cual es útil para probar el manejo de errores y casos extremos.
HTTP Toolkit captura tráfico que las DevTools podrían perder, incluyendo solicitudes de service workers, fetches en segundo plano y scripts que detectan herramientas de desarrollador abiertas. También funciona en navegadores, aplicaciones móviles y aplicaciones de escritorio, proporcionando una vista unificada de todo el tráfico de red desde múltiples fuentes.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
