Hola hacketones! Bienvenidos a un nuevo CTF de la ruta completa de Web Fundamentals, en este capítulo veremos: TryHackMe – Walking An Application
En este capítulo: TryHackMe – Walking An Application -Examinar una aplicación, aprenderás a auditar manualmente una aplicación web usando únicamente las herramientas integradas del navegador: ver código fuente, Inspector/DOM, Depurador (Sources) y Red (Network). Entenderás cómo descubrir funcionalidad, leer y manipular HTML/CSS/JS en vivo, pausar y analizar ejecución de JavaScript, y rastrear solicitudes AJAX para hallar información sensible, fallos de autorización y errores de configuración (como directory listing).
¿Por qué es crucial para tu carrera como hacker? Porque en entornos reales:
- Los scanners automáticos pasan por alto pistas y vulnerabilidades lógicas.
- Las devtools te dan visibilidad total del cliente y te permiten validar hipótesis rápido, sin instalar nada ni generar ruido de red innecesario.
- Dominar estas técnicas te convierte en un pentester más silencioso, preciso y eficiente, capaz de transformar “pistas” en hallazgos reproducibles.
Revise manualmente una aplicación web para detectar problemas de seguridad usando únicamente las herramientas de desarrollo de su navegador. Hackee solo con su navegador, sin herramientas ni scripts.
La expresión “Walking an application” se traduce literalmente como “recorrer una aplicación”, pero en el contexto técnico —especialmente en pentesting o desarrollo— su significado más preciso es: “Analizar paso a paso el funcionamiento de una aplicación” o “Explorar manualmente una aplicación”.
En pentesting web, “walking an application” significa navegar por todas las páginas y funciones de una aplicación para entender su estructura, cómo maneja las solicitudes y qué posibles vulnerabilidades puede tener. Por ejemplo: “Recorrer la aplicación para entender su flujo y detectar posibles vulnerabilidades.” En QA o desarrollo, puede referirse a revisar manualmente la interfaz o el flujo de usuario. Por ejemplo: “Hacer un recorrido de prueba por la aplicación.”
En resumen: “Walking an application” = “Recorrer / examinar manualmente una aplicación para entender su funcionamiento y detectar fallos.”
En la cultura popular, el hacking suele representarse como una lluvia de código verde en pantallas negras, ejecutando scripts crípticos y utilizando software de miles de dólares. Sin embargo, en el mundo real de la ciberseguridad, la herramienta más versátil ya está instalada en tu computadora. Los scanners automáticos, aunque eficientes para tareas masivas, suelen pasar por alto vulnerabilidades lógicas y detalles sutiles que solo el ojo humano puede interpretar.
Aquí es donde surge la metodología esencial del «Walking an application» (recorrer una aplicación). Lejos de ser un simple paseo, es una exploración manual exhaustiva para comprender la estructura, el flujo de datos y las debilidades ocultas de una plataforma. Antes de lanzar cualquier herramienta externa, un auditor profesional debe saber «caminar» la aplicación, utilizando únicamente las funciones integradas de su navegador para desvelar lo que está a simple vista pero permanece invisible para el usuario común.
Tarea 1 Walking An Application
En esta sala aprenderá a revisar manualmente una aplicación web para detectar problemas de seguridad utilizando únicamente las herramientas integradas en su navegador. Con frecuencia, las herramientas y scripts de seguridad automatizados pasan por alto muchas vulnerabilidades potenciales e información útil.
A continuación se muestra un breve resumen de las herramientas de navegador integradas que utilizará en esta sala:
- Ver código fuente : utilice su navegador para ver el código fuente legible por humanos de un sitio web.
- Inspector : aprenda a inspeccionar elementos de la página y realizar cambios para ver contenido normalmente bloqueado.
- Depurador : inspecciona y controla el flujo de JavaScript de una página
- Red : vea todas las solicitudes de red que realiza una página.
Presione el botón «Iniciar máquina» para iniciar la máquina virtual en esta tarea, luego espere 2 minutos y visite la siguiente URL: https://LAB_WEB_URL.p.thmlabs.com (esta URL se actualizará 2 minutos después de que inicie la máquina)
Auditar manualmente una aplicación web según el concepto de walking an application permite al pentester entender el contexto de cada función. Mientras que una herramienta automatizada ve parámetros, el profesional ve procesos de negocio. Esta técnica es fundamental para ser silencioso, preciso y, sobre todo, eficiente.
El uso de las herramientas de desarrollo (DevTools) frente a los scanners ofrece ventajas críticas:
• Visibilidad del lado del cliente: Permite observar en tiempo real cómo el navegador interpreta el HTML, CSS y JavaScript enviado por el servidor.
• Identificación de fallos lógicos: Facilita la detección de errores de autorización que las herramientas automáticas suelen ignorar.
• Mínimo ruido de red: El tráfico generado es indistinguible del de un usuario legítimo.
Análisis de eficiencia: En un entorno profesional, el «ruido de red» innecesario es el enemigo. Una ráfaga de peticiones automáticas puede activar fácilmente sistemas de detección de intrusiones (IDS/IPS) o firewalls de aplicaciones web (WAF). El navegador, en cambio, permite realizar una exploración quirúrgica, extrayendo información crítica sin alertar a los equipos de defensa.
Tarea 2 Explorando el sitio web
Como evaluador de penetración, su función al revisar un sitio web o una aplicación web es descubrir características que podrían ser vulnerables e intentar explotarlas para evaluar si lo son. Estas características suelen ser partes del sitio web que requieren cierta interacción con el usuario.
Encontrar partes interactivas del sitio web puede ser tan fácil como encontrar un formulario de inicio de sesión o revisar manualmente el JavaScript del sitio web. Un excelente punto de partida es explorar el sitio web con su navegador y anotar las páginas, áreas y características individuales, con un resumen de cada una.
Un ejemplo de revisión del sitio web de soporte de TI de Acme se vería así:
| Característica | URL | Resumen |
| Página de inicio | / | Esta página contiene un resumen de lo que hace Acme IT Support con una fotografía corporativa de su personal. |
| Últimas noticias | /noticias | Esta página contiene una lista de artículos de noticias publicados recientemente por la empresa, y cada artículo de noticias tiene un enlace con un número de identificación, es decir, /news/article?id=1 |
| Artículo de noticias | /noticias/articulo?id=1 | Muestra la noticia individual. Algunos artículos parecen estar bloqueados y reservados solo para clientes premium. |
| Página de contacto | /contacto | Esta página contiene un formulario para que los clientes contacten con la empresa. Contiene campos para introducir nombre, correo electrónico y mensaje, además de un botón de envío. |
| Clientes | /clientes | Este enlace redirige a /customers/login. |
| Inicio de sesión del cliente | /clientes/inicio de sesión | Esta página contiene un formulario de inicio de sesión con campos de nombre de usuario y contraseña. |
| Registro de clientes | /clientes/registro | Esta página contiene un formulario de registro de usuario que consta de campos de entrada de nombre de usuario, correo electrónico, contraseña y confirmación de contraseña. |
| Restablecer contraseña del cliente | /clientes/reiniciar | Formulario de restablecimiento de contraseña con un campo de entrada de dirección de correo electrónico. |
| Panel de control del cliente | /clientes | Esta página contiene una lista de los tickets del usuario enviados a la empresa de soporte de TI y un botón «Crear ticket». |
| Crear ticket | /clientes/ticket/nuevo | Esta página contiene un formulario con un cuadro de texto para ingresar el problema de TI y una opción de carga de archivos para crear un ticket de soporte de TI. |
| Cuenta de cliente | /clientes/cuenta | Esta página permite al usuario editar su nombre de usuario, correo electrónico y contraseña. |
| Cierre de sesión del cliente | /clientes/cerrar sesión | Este enlace cierra la sesión del usuario del área de clientes. |
Comenzaremos a analizar más profundamente algunas de las páginas que hemos descubierto en la próxima tarea.
Tarea 3 Visualización del código fuente de la página
El código fuente de la página es el código legible por humanos que el servidor web devuelve a nuestro navegador/cliente cada vez que realizamos una solicitud.
El código devuelto se compone de HTML (lenguaje de marcado de hipertexto), CSS (hojas de estilo en cascada) y JavaScript, y es lo que le dice a nuestro navegador qué contenido mostrar, cómo mostrarlo y agrega un elemento de interactividad con JavaScript.
Para nuestros propósitos, ver el código fuente de la página puede ayudarnos a descubrir más información sobre la aplicación web.
¿Cómo puedo ver el código fuente de la página?
- Mientras visualiza un sitio web, puede hacer clic derecho en la página y verá una opción en el menú que dice Ver código fuente de la página.
- La mayoría de los navegadores admiten colocar view-source: delante de la URL, por ejemplo, view-source:https://www.google.com/
- En el menú de tu navegador, encontrarás una opción para ver el código fuente de la página. Esta opción a veces se encuentra en submenús como «Herramientas para desarrolladores» o «Más herramientas».
¡Veamos algunas fuentes de la página!
Intente ver el código fuente de la página de inicio del sitio web de Soporte Técnico de Acme. Lamentablemente, explicar todo lo que ve aquí está fuera del alcance de esta sala, y necesitará consultar cursos de diseño y desarrollo web para comprenderlo completamente. Lo que podemos hacer es seleccionar información importante para nosotros.
En la parte superior de la página, verás código que empieza <!–y termina con –>estos comentarios. Los comentarios son mensajes que deja el desarrollador del sitio web, generalmente para explicar algo del código a otros programadores o incluso como notas o recordatorios para sí mismo. Estos comentarios no se muestran en la página web. Este comentario describe cómo la página de inicio es temporal mientras se desarrolla una nueva. Consulta la página web en el comentario para obtener tu primera notificación.
Los enlaces a diferentes páginas en HTML se escriben en etiquetas de anclaje (son elementos HTML que comienzan con <a), y el enlace al que será dirigido se almacena en el hrefatributo .
Por ejemplo, verá el enlace de la página de contacto en la línea 31:
Si consulta más abajo el código fuente de la página, encontrará un enlace oculto a una página que empieza por «secr». Consulte este enlace para obtener otra alerta. Obviamente, no se vería una alerta en una situación real, pero podría descubrir un área privada utilizada por la empresa para almacenar información de la empresa, el personal y los clientes.
Se pueden incluir archivos externos como CSS, JavaScript e imágenes mediante el código HTML. En este ejemplo, observará que todos estos archivos se almacenan en el mismo directorio. Si consulta este directorio en su navegador web, hay un error de configuración. Lo que debería mostrarse es una página en blanco o una página 403 Prohibida con un error que indica que no tiene acceso al directorio. En cambio, se ha habilitado la función de listado de directorios, que, de hecho, lista todos los archivos del directorio. A veces, esto no supone un problema y todos los archivos del directorio son seguros para el público, pero en otros casos, podrían almacenarse aquí copias de seguridad, código fuente u otra información confidencial. En este caso, se muestra una alerta en el archivo flag.txt.
Hoy en día, muchos sitios web no se crean desde cero y utilizan lo que se denomina un framework. Un framework es una colección de código prediseñado que permite a los desarrolladores incluir fácilmente funciones comunes que un sitio web requeriría, como blogs, gestión de usuarios, procesamiento de formularios y mucho más, ahorrándoles horas o días de desarrollo.
Consultar el código fuente de la página a menudo nos da pistas sobre si un framework está en uso y, de ser así, qué framework e incluso qué versión. Conocer el framework y la versión puede ser un hallazgo importante, ya que puede haber vulnerabilidades públicas en el framework y que el sitio web no esté utilizando la versión más actualizada. Al final de la página, encontrará un comentario sobre el framework y la versión en uso, así como un enlace a su sitio web. Al consultar el sitio web, verá que nuestro sitio web está desactualizado. Lea el aviso de actualización y utilice la información que encuentre para descubrir otra alerta.
El comando «Ver código fuente» es el primer paso de cualquier auditoría manual. Aunque el servidor entrega este código para que el navegador renderice la página, a menudo contiene información residual que nunca debió ser pública.
Al examinar el código, un pentester puede descubrir:
• Comentarios de desarrollo: Notas internas que exponen lógica de negocio o recordatorios (ej. THM{HTML_COMMENTS_ARE_DANGEROUS}).
• Enlaces a áreas privadas: Rutas que no están en el menú visual, como directorios que comienzan por /secr, los cuales podrían llevar a paneles de administración o datos de personal (ej. THM{NOT_A_SECRET_ANYMORE}).
• Exposición de directorios (Directory Listing): Fallos de configuración donde, al navegar a una carpeta de recursos, el servidor lista todos los archivos disponibles, permitiendo el acceso a archivos sensibles como flag.txt (ej. THM{INVALID_DIRECTORY_PERMISSIONS}).
• Vulnerabilidades de Frameworks: Al final del código, es común encontrar la versión del framework utilizado. Si el auditor visita el sitio web oficial de dicho framework y revisa los registros de cambios o «avisos de actualización», puede encontrar fallos conocidos que afectan a la versión desactualizada del sitio auditado.
«Los comentarios son mensajes que deja el desarrollador del sitio web, generalmente para explicar algo del código a otros programadores o incluso como notas o recordatorios para sí mismo.»
Responda las preguntas a continuación
¿Cuál es la bandera del comentario HTML?
THM{HTML_COMMENTS_ARE_DANGEROUS}
¿Cual es la bandera del enlace secreto?
THM{NOT_A_SECRET_ANYMORE}
¿Qué es la bandera de listado de directorio?
THM{INVALID_DIRECTORY_PERMISSIONS}
¿Qué es la bandera del marco?
Curiosamente hay una bandera más pero no la piden…..
Tarea 4 Herramientas para desarrolladores – Inspector
Herramientas para desarrolladores
Todos los navegadores modernos incluyen herramientas para desarrolladores. Se trata de un conjunto de herramientas que ayuda a los desarrolladores web a depurar aplicaciones y permite echar un vistazo a la estructura interna de un sitio web para ver qué sucede. Como pentester, podemos aprovechar estas herramientas para comprender mejor la aplicación web. Nos centraremos específicamente en tres funciones del conjunto de herramientas para desarrolladores: Inspector, Depurador y Red.
A diferencia del código fuente estático, el Inspector de elementos ofrece una representación en vivo del Document Object Model (DOM). Esto permite editar el HTML y CSS en tiempo real, permitiendo al auditor manipular la interfaz para saltar restricciones visuales.
Un caso clásico es el «muro de pago» (paywall). Si un sitio web oculta contenido premium mediante un recuadro flotante —como un elemento DIV con la clase premium-customer-blocker—, un pentester puede localizar ese elemento en el Inspector y cambiar su propiedad CSS de display: block a none. Al eliminar el obstáculo visual, el contenido protegido (y flags como THM{NOT_SO_HIDDEN}) queda expuesto.
Análisis de seguridad: Este método pone de relieve un error de seguridad fundamental: confiar en controles del lado del cliente. Implementar restricciones únicamente mediante CSS para ocultar datos que ya han sido enviados al navegador genera una falsa sensación de seguridad en los stakeholders, cuando en realidad la información es accesible para cualquiera con conocimientos básicos de DevTools.
Abrir herramientas para desarrolladores
La forma de acceder a las herramientas para desarrolladores varía según el navegador. Si no está seguro de cómo hacerlo, haga clic en el botón «Ver sitio» en la esquina superior derecha para obtener instrucciones sobre cómo acceder a las herramientas de su navegador.
Inspector
El código fuente de la página no siempre representa lo que se muestra en una página web; esto se debe a que CSS, JavaScript y la interacción del usuario pueden cambiar el contenido y el estilo de la página, lo que significa que necesitamos una forma de ver lo que se muestra en la ventana del navegador en ese momento. El inspector de elementos nos ayuda con esto, brindándonos una representación en vivo de lo que se encuentra actualmente en el sitio web.
Además de ver esta vista en vivo, también podemos editar e interactuar con los elementos de la página, lo que resulta útil para que los desarrolladores web depuren problemas.
En el sitio web de soporte técnico de Acme, haga clic en la sección de noticias, donde verá tres artículos de noticias.
Los dos primeros artículos son legibles, pero el tercero ha sido bloqueado con un aviso flotante sobre el contenido que indica que es necesario ser cliente premium para verlo. Estos recuadros flotantes que bloquean el contenido de la página se conocen como muros de pago, ya que colocan un muro metafórico frente al contenido que se desea ver hasta que se paga.
Al hacer clic derecho en el aviso premium (muro de pago), debería poder seleccionar la opción «Inspeccionar» en el menú. Esta opción abre las herramientas de desarrollo en la parte inferior o derecha, según su navegador o preferencias. Ahora verá los elementos/HTML que componen el sitio web (similares a las capturas de pantalla a continuación).
(Haga clic en la imagen para ampliarla)
Localiza el elemento DIV con la clase premium-customer-blockery haz clic en él. Verás todos los estilos CSS en el cuadro de estilos que se aplican a este elemento, como margin-top: 60pxy text-align: center. El estilo que nos interesa es el display: block. Si haces clic en la palabra block, puedes escribir un valor a tu elección. Intenta escribir none; esto hará que el cuadro desaparezca, revelando el contenido debajo y una bandera. Si el elemento no tenía un campo de visualización, puedes hacer clic debajo del último estilo y añadir el tuyo. Experimenta con el inspector de elementos y verás que puedes cambiar cualquier información del sitio web, incluido el contenido. Recuerda que esto solo se edita en la ventana de tu navegador y, al pulsar «Actualizar», todo volverá a la normalidad.
Responda las preguntas a continuación
¿Qué es la bandera detrás del muro de pago?
THM{NOT_SO_HIDDEN}
Tarea 5 Herramientas para desarrolladores – Depurador
Herramientas para desarrolladores – Depurador
Este panel de las herramientas para desarrolladores está diseñado para depurar JavaScript y, de nuevo, es una función excelente para desarrolladores web que desean averiguar por qué algo no funciona. Sin embargo, como evaluadores de penetración, nos permite analizar a fondo el código JavaScript. En Firefox y Safari, esta función se llama Depurador, pero en Google Chrome, Fuentes.
En el sitio web de soporte técnico de Acme, haga clic en la página de contacto. Cada vez que se cargue, podría ver un destello rápido de luz roja en la pantalla. Usaremos el depurador para averiguar qué es este destello rojo y si contiene algo interesante. Depurar un punto rojo no sería algo que harías en la práctica como experto en pruebas de penetración, pero nos permite usar esta función y familiarizarnos con el depurador.
En ambos navegadores, a la izquierda, verá una lista de todos los recursos que utiliza la página web actual. Si hace clic en la carpeta «recursos», verá un archivo llamado flash.min.js. Al hacer clic en este archivo, se muestra el contenido del archivo JavaScript.
Muchas veces, al visualizar archivos JavaScript, notarás que todo está en una sola línea. Esto se debe a que se ha minimizado, lo que significa que se ha eliminado todo el formato (tabulaciones, espaciado y saltos de línea) para reducir el tamaño del archivo. Este archivo no es la excepción, y también se ha ofuscado, lo que dificulta su lectura a propósito y dificulta su copia por parte de otros desarrolladores.
Podemos recuperar algunos de los formatos usando la opción «Pretty Print», que se presenta como dos llaves { } para facilitar la lectura, aunque debido a la ofuscación, sigue siendo difícil comprender qué sucede con el archivo. Si se desplaza hasta el final del archivo flash.min.js, verá la línea:flash[‘remove’]();
(Haga clic en la imagen para ampliarla)
Este pequeño fragmento de JavaScript es lo que elimina la ventana emergente roja de la página. Podemos utilizar otra función del depurador llamada puntos de interrupción . Estos son puntos en el código que podemos obligar al navegador a detener el procesamiento de JavaScript y pausar la ejecución actual.
Si hace clic en el número de línea que contiene el código anterior, verá que se vuelve azul; ha insertado un punto de interrupción en esta línea. Ahora, intente actualizar la página y verá que el cuadro rojo permanece en la página en lugar de desaparecer, y que contiene una bandera.
El Depurador (o pestaña Sources) es la herramienta definitiva para controlar el flujo de ejecución de JavaScript. En aplicaciones modernas, el código suele estar «minificado» u «ofuscado» para ahorrar ancho de banda y proteger la propiedad intelectual. Para contrarrestar esto, el auditor utiliza la opción «Pretty Print» (representada por el icono { }), que devuelve al código un formato legible por humanos.
Esta herramienta permite gestionar lo que llamamos «datos efímeros» o situaciones de race condition. Por ejemplo, si una aplicación muestra una información sensible mediante un «destello rojo» que desaparece casi instantáneamente, el auditor puede establecer un punto de interrupción (breakpoint) en la línea de código encargada de borrar ese dato (ej. flash[‘remove’]();). Al pausar el flujo de ejecución, el pentester detiene el tiempo, permitiendo capturar la bandera THM{CATCH_ME_IF_YOU_CAN} antes de que el script complete su ciclo de limpieza.
Responda las preguntas a continuación
¿Qué es la bandera en el cuadro rojo?
THM{CATCH_ME_IF_YOU_CAN}
Tarea 6 Herramientas para desarrolladores – Red
Herramientas para desarrolladores – Red
La pestaña de red de las herramientas para desarrolladores permite realizar un seguimiento de cada solicitud externa que realiza una página web. Si hace clic en la pestaña de red y actualiza la página, verá todos los archivos que solicita. Intente hacer esto en la página de contacto; puede presionar el ícono de la papelera para eliminar la lista si se sobrecarga un poco.
Con la pestaña de red abierta, intenta rellenar el formulario de contacto y pulsar el botón «Enviar mensaje» . Verás un evento en la pestaña de red: el formulario se envía en segundo plano mediante AJAX. AJAX permite enviar y recibir datos de red en segundo plano en una aplicación web sin modificar la página web actual.
Examine la nueva entrada en la pestaña de red que creó el formulario de contacto y vea la página a la que se enviaron los datos para revelar una bandera.
Escuchando las Conversaciones Privadas (Pestaña de Red)
La pestaña de Red registra cada comunicación entre el cliente y el servidor, siendo vital para analizar solicitudes AJAX. Estas peticiones permiten intercambiar datos en segundo plano sin recargar la página, lo que las convierte en un objetivo primario para los atacantes.
Al interactuar con elementos como formularios de contacto, la pestaña de Red revela:
• Endpoints específicos: La dirección exacta a donde se envían los datos (ej. solicitudes a contact-msg).
• Estructura de la respuesta: Información detallada del servidor que la interfaz de usuario no muestra, como la bandera THM{GOT_AJAX_FLAG}.
Análisis de comunicación: Las solicitudes de fondo son el terreno ideal para detectar fallos de IDOR (Insecure Direct Object Reference) o Manipulación de Parámetros (Parameter Tampering). Debido a que estas peticiones no son visibles directamente en la URL del navegador, los desarrolladores a menudo asumen —erróneamente— que el usuario no puede ver ni modificar los datos enviados, omitiendo validaciones de seguridad esenciales en el backend.
Responda las preguntas a continuación
¿Cuál es la bandera que se muestra en la solicitud de red contact-msg?
THM{GOT_AJAX_FLAG}
Despedida — Lo que te llevas para tu carrera como hacker
Hoy aprendiste a auditar una web solo con tu navegador: mapear funcionalidad, leer el cliente, forzar el DOM, pausar JavaScript y escuchar el tráfico para extraer evidencia (flags). Esto se traduce en habilidades clave de pentesting web:
- Detectar controles solo de cliente y verificar si hay enforcement en servidor.
- Identificar endpoints y parámetros útiles (para futuras pruebas de inyección/IDOR).
- Reconocer indicios de frameworks desactualizados y exposición de directorios.
- Documentar hallazgos con pasos reproducibles, capturas de devtools y impacto.
Dominar las herramientas integradas del navegador transforma a un observador pasivo en un auditor capaz de validar hipótesis de seguridad en cuestión de segundos. Esta metodología de exploración manual es el paso previo y obligatorio antes de saltar a herramientas de interceptación avanzadas como Burp Suite, ya que proporciona una comprensión profunda de la lógica de la aplicación.
El pentester más eficiente no es el que posee el software más automatizado, sino el que sabe interpretar los indicios ocultos en el código que todos los demás simplemente renderizan.
Con estas técnicas, podrás iniciar y progresar en una auditoría sin herramientas externas, entendiendo la app desde dentro hacia afuera. Mantén este enfoque metódico, apóyate en tus devtools y luego escala a proxys (Burp/mitmproxy) solo cuando lo necesites. ¡Sigue practicando y conviértete en ese hacker que ve lo que los escáneres no ven! 🚀
Sigan entrenando, Hacketones, Nos vemos en el próximo laboratorio!!!