Inspecciona Apps con Charles Proxy

Con Charles Proxy puedes analizar todas las llamadas que ocurren dentro de tu móvil. Su uso es muy simple y muchas veces nos ayuda a debugar posibles errores en nuestro código. Básicamente lo que hace este programa es de "man in the middle", el móvil se conecta a un ordenador y el ordenador escucha todas las llamadas que pasan a travé de él. Así de simple.

Lo típico que backend nos dice de debugar un endpoint concreto pero no queremos poner breakpoints o tenemos una codebase enorme y tardaríamos más de 10 minutos en sacar algo claro.

Podemos detectar errores fácilmente en nuestras llamadas API Rest ya sea porque estamos enviando el parámetro que no toca, porque en lugar de GET es un POST, o porque hay algún typo en el parámetro.

Vamos a ver cómo usarlo y configurarlo. Antes de todo necesitas descargarlo, puedes ir a su página web.

Después de instalarlo, tenemos que ir a la barra de menú y selecciona Help, ahí tenemos que seleccionar la opción SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser.

Lo que vamos hacer es probarlo en un dispositivo físico, si queremos probarlo en un simulador tenemos que seleccionar la opción de Install Charles Root Certificate on iOS Simulators.

Aparecerá la siguiente pantalla:

Tal y como nos indica, debemos coger nuestro dispositivo móvil e ir a Settings.
⚠️ Sobretodo no cierres esta ventana, necesitaremos la IP más adelante

Entramos en Wi-Fi y pulsamos el botón que aparece a la derecha del nombre (el que es una i dentro de un círculo). Al pulsar el botón nos aparece otra pantalla, debemos hacer scroll hasta llegar a la última sección y seleccionar la única opción que hay. La última sección tiene de título HTTP Proxy y la opción tiene de título Configure Proxy

Cuando nos aparezca la vista para configurar el proxy, debemos añadir la IP que hemos mencionado en uno de los pasos del principio. En este caso es 192.168.8.109 y el puerto 8888. Una vez introducida toda la información le damos a Save.

Ahora debemos ir al explorador, y poner la URL chls.pro/ssl

Cuando accedas a la URL, aparecerá un popup en el ordenador, indicando que si permitimos la conexión desde el móvil.

Clickamos en Allow y continuamos:

Nos parecerá un popup, debemos seleccionar Allow, se descargará un Profile. (Debemos escoger el Device iPhone, y una vez seleccionado el Profile será descargado).

Como indica en la última imagen debemos ir Settings -> General -> Profile para poder instalar el nuevo Profile que acabamos de descargar.

Nos queda un último paso. Debemos habilitar el certificado de Charles Proxy. Este paso es igual de importante que los demás, ya que sino lo hacemos no podremos ver las llamadas en el panel del Charles Proxy.

Para ello, vamos a Settings -> General -> About y justo seleccionamos la opción Certificate Trust Settings. Una vez dentro del listado de Certificados, habilitamos el de Charles Proxy.

Ahora ya podemos usar Charles Proxy para interceptar las llamadas que salen o entran al móvil.

El problema es que nos falta un último paso, ahora mismo si os fijáis todas las llamadas salen con un candado (en el panel de la izquierda). Para solucionarlo basta con ir al menú y seleccionar la opción Proxy -> SSL Proxy Settings y incluir una nueva opción. Fíjate que la opción de macOS Proxy la tengo seleccionada (la imagen de la izquierda)

Ahora, el resultado dentro de Charles Proxy será el siguiente:

Hemos hecho la prueba con la aplicación de TikTok. En la última captura os muestro todos los test a/b que recibimos cuando inicializamos la aplicación (hay bastantes). Si eres un poco curioso puedes pasarte horas explorando aplicaciones con Charles Proxy.

Hasta aquí el post de hoy, gracias por leernos! 🤓
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter