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.”
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)
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.
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
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.
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).
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
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’]();
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.
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.
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}
Resumen del whitepaper (paso a paso y con atajos mentales)
1 — Walking an Application
- Objetivo: recorrer la app como un usuario, identificar áreas interactivas y mapear superficie de ataque.
- Herramientas: páginas, menús, formularios, enlaces con parámetros (?id=), áreas autenticadas.
2 — Explorando el sitio
- Crea un inventario: funcionalidad → URL → resumen.
- Busca patrones: rutas “/login”, “/register”, “/reset”, IDs numéricos en noticias/tickets, áreas “/admin” o “/customers”.
- Este mapeo guía pruebas de IDOR, controles de acceso, inyección, y abuso de métodos HTTP.
3 — Ver código fuente
- Cómo: Right click → Ver código fuente, view-source:, o desde devtools.
- Qué buscar:
- Comentarios HTML (<!– … –>) con pistas internas → Flag: THM{HTML_COMMENTS_ARE_DANGEROUS}.
- Enlaces ocultos (anclas <a href> con rutas tipo “secr…”) → Flag: THM{NOT_A_SECRET_ANYMORE}.
- Recursos estáticos (CSS/JS/img) y listado de directorios mal configurado → Flag: THM{INVALID_DIRECTORY_PERMISSIONS}.
- Framework y versión en comentarios o archivos → Flag del marco: (se obtiene revisando el aviso de actualización del framework indicado al final del HTML).
- Lección: el cliente revela más de lo que crees: rutas internas, dependencias desactualizadas y configuraciones débiles.
4 — DevTools: Inspector (Elements)
- Meta: modificar el DOM/CSS en vivo para ver contenido oculto por overlays o “paywalls”.
- Ejercicio: localizar el div.premium-customer-blocker y cambiar display: block por display: none;
- Resultado: aparece el contenido y la flag: THM{NOT_SO_HIDDEN}.
- Uso real: verificar si el bloqueo es solo de cliente (cosmético) o existe control de acceso en servidor.
5 — DevTools: Depurador (Sources)
- Meta: leer/beautify JS minimizado y pausar ejecución con breakpoints.
- Ejercicio: abrir flash.min.js, aplicar Pretty Print {}, poner breakpoint en flash[‘remove’]();
- Resultado: el pop-up rojo no se elimina y muestra flag: THM{CATCH_ME_IF_YOU_CAN}.
- Uso real: entender flujos de lógica, rutas ocultas y tokens gestionados en cliente.
6 — DevTools: Red (Network)
- Meta: trazar cada request, ver método, URL, headers, payload, respuesta y AJAX.
- Ejercicio: enviar el formulario “Contacto”, observar la petición contact-msg.
- Resultado: en la respuesta aparece la flag: THM{GOT_AJAX_FLAG}.
- Uso real: descubrir endpoints no documentados, parámetros y datos sensibles devueltos al frontend.
Mini-checklist práctico (solo navegador)
- Fuente: comentarios, rutas, framework/versión, recursos expuestos.
- Inspector: quitar overlays, editar atributos, revelar texto/imágenes ocultas.
- Depurador: pretty print, breakpoints (línea/XHR/event listeners), observar variables.
- Red: filtrar por XHR/Fetch, revisar Request/Response/Preview, repetir con Replay, modificar parámetros.
- General: busca id=, page=, ?debug=1, rutas /backup/, /old/, /admin, y revisa CORS, cache, exposición de mapas fuente (.map).
10 Preguntas Basadas en el Contenido
- ¿Qué herramientas de desarrollo del navegador puedes usar para analizar una aplicación web?
- ¿Qué utilidad tiene el «Inspector» de elementos en pruebas de seguridad web?
- ¿Por qué es útil revisar los comentarios en el código fuente HTML?
- ¿Qué es un listado de directorio y por qué puede representar un riesgo?
- ¿Qué información se puede obtener desde los archivos JavaScript usando el depurador?
- ¿Qué es un punto de interrupción (breakpoint) en el contexto del depurador?
- ¿Qué función cumple la pestaña “Red” en herramientas del desarrollador?
- ¿Qué es AJAX y cómo se detecta usando herramientas del navegador?
- ¿Qué tipo de información o funcionalidades podrían ocultarse en enlaces «secretos» descubiertos en HTML?
- ¿Qué vulnerabilidad representa el uso de versiones desactualizadas de frameworks?
Respuestas Detalladas a las Preguntas
1. Las principales herramientas integradas que puedes usar son:
- Ver código fuente
- Inspector de elementos
- Depurador (Debug)
- Red (Network)
2. El inspector permite:
- Visualizar y modificar el DOM en tiempo real
- Alterar estilos CSS
- Eliminar overlays como paywalls
- Revelar contenido oculto, como banderas o secciones bloqueadas
3. Porque pueden incluir (poco probable pero no imposible):
- Comentarios del desarrollador con pistas
- Rutas ocultas o en construcción
- Información sensible o rutas hacia archivos internos
4. Es una configuración del servidor que muestra todos los archivos en un directorio cuando se accede a él directamente. Si está habilitado indebidamente, se puede acceder a:
- Archivos de configuración
- Respaldos (backups)
- Código fuente o documentos privados
5. Puedes ver:
- Funciones ejecutadas al cargar la página
- Código JavaScript minimizado u ofuscado
- Operaciones como validaciones, animaciones o eliminación de elementos
6. Es una pausa en la ejecución del código que te permite:
- Inspeccionar el estado actual
- Detener scripts antes de que realicen acciones (como ocultar contenido)
- Ver el valor de variables y llamadas activas
7. Permite monitorear todas las solicitudes que hace la web, como:
- Llamadas a APIs
- Cargas de imágenes, CSS, JS
- Formularios enviados por POST o AJAX
- Cookies y encabezados
8. AJAX (Asynchronous JavaScript and XML) permite enviar/recibir datos sin recargar la página. Lo detectas en la pestaña “Red” cuando ves solicitudes enviadas dinámicamente tras una acción del usuario (ej. botón “Enviar”).
9. Esconden (poco probable pero no imposible):
- Funciones administrativas
- Rutas privadas
- Interfaces en desarrollo o sin protección
- Ficheros con información confidencial
10. Puede contener vulnerabilidades públicas conocidas. Si el framework no está actualizado:
- Un atacante puede buscar exploits específicos de esa versión
- Puede haber errores de seguridad no corregidos
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.
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! 🚀