En esta habitación vamos a aprender revisar manualmente una aplicación web, para ver sus problemas de seguridad, usando solo el navegador.

Demasiado a menudo, las herramientas automatizadas y scripts pasan por alto muchas vulnerabilidades potenciales e información útil.

Estas son las herramientas del navegador que vamos a usar en la habitación.

  • Ver el código fuente de la página.
  • Inspector, para inspeccionar elementos de la página y ver contenido que está bloqueado, normalmente.
  • Debugger, en el que usamos el depurador para controlar el flujo de Javascript de una página.
  • Network, para ver todas las peticiones que hace una página.

Iniciamos la máquina virtual de la habitación y la visitamos.

Explorando la web

Como pentesters, nuestro papel es revisar un sitio web o aplicación para descubrir características que pueden ser potencialmente vulnerables e intentar explotarlas para ver si lo son o no.

Estas prestaciones son partes de la web que requieren alguna interacción por parte del usuario.

Encontrar porciones interactivas puede ser tan fácil como ver un formulario de autenticación cuando revisas manualmente el Javascript de la web.

Un excelente lugar por el que empezar es navegando y anotando las páginas o áreas, junto a un resumen de cada una.

En el ejemplo de esta habitación tenemos:

Prestación URL Resumen
Home Page / Resumen de lo que hace la compañía y foto de su personal.
Latest News /news Lista de noticias. Cada artículo tiene un enlace con un númeor de id. Por ej: /news/article?id=1
News Article /news/article?id=1 Muestra el artículo individual, algunos son para miembros Premium.
Contact Page /contact Formulario de contacto. Contiene nombre, email y mensaje, además de un botón de enviar.
Customers /customers Redirige a /customers/login.
Customer Login /customers/login Contiene un formulario de autenticación con campos de usuario y contraseña.
Customer Signup /customers/signup Formulario de alta con campos de nombre de usuario, email, contraseña y confirmar contraseña.
Customer Reset Password /customers/reset Recuperación de contraseña con campo de email.
Customer Dashboard /customers Lista de tickets de usuario enviados al departamento de soporte con botón de «Create ticket».
Create Ticket /customers/ticket/new Formulario con campo de texto para introducir el problema y crear un ticket. Opción de subir archivo.
Customer Account /customers/account Permite al usuario editar su nombre de usuario, email y contraseña.
Customer Logout /customers/logout Cierra la sesión del usuario.

Veamos más a fondo algunas de las páginas.

Viendo el código fuente de la página

La fuente de la página es el código legible por humanos que el servidor devuelve a nuestro navegador cada vez que hace una petición.

Está hecho de html, css y javascript. Es lo que dice al navegador qué mostrar, cómo hacerlo y añade elementos de interactividad con javascript.

Ver el código fuente nos puede ayudar a descubrir más información sobre la aplicación web.

¿Cómo veo el código fuente?

  1. Mientras ves la web, clic derecho y veremos la opción en el menú.
  2. Muchos navegadores soportan poner esto delante dela dirección: view-source:https://www.google.com/
  3. En nuestro menú del navegador encontraremos una opción para ver el código fuente. Esta opción puede estar, a veces, en submenús como el de herramientas de desarrollador o más herramienta.
  4. Atajo Ctrl+U en Firefox y Chrome.

Echemos un vistazo al código fuente de la página ACME IT de la habitación.

Hay código que empieza por <!-- y termina por -->, eso son comentarios. Los deja el desarrollador y no se muestran en la página.

Aparece un comentario de cómo la página principal es temporal mientras se desarrolla otra. Mirando esa fuente, obtendremos la primera bandera.

Los enlaces a las diferentes páginas comienzan por <a> y el enlace al que nos dirigen está almacenado en el atributo href.

Ejemplo de página de contacto en línea 31.

Ejemplo de código

Si miramos más abajo, hay un enlace oculto a una página que empieza por «secr», podremos ver este enlace para conseguir otra bandera. Obviamente, no obtendrás un botín así en la realidad, pero puedes descubrir algún área privada usada por la empresa para almacenar información o algo así.

Archivos externos, como css, javascript e imágenes puede incluirse usando el código html. En este ejemplo, verás que hay archivos almacenados en el mismo directorio. Si lo ves en tu navegador, hay un error de configuración.

Debería mostrarse una página en blanco o un error 403 prohibido el acceso. Sin embargo, la característica de listar directorios está habilitada, pudiendo ver cada archivo que hay.

A veces no es problema, si estos archivos son públicos, pero a veces hay información confidencial, copias de seguridad, etc.

En este caso, veremos una bandera en forma de archivo flag.txt.

Muchas webs se hacen hoy día con frameworks, una colección de código prefabricado que permite al desarrollador añadir características comunes que requiere una web, como blogs, gestión de usuarios, procesado de formularios y más, ahorrando días de desarrollo.

Ver la fuente da pistas de la framework utilizada e incluso la versión.

Esto sirve para ver posibles vulnerabilidades y el sitio puede no estar actualizado a la última versión. Al final de la página se ver un comentario sobre dicha framework y que no está actualizada.

Leamos la nota de actualización y usemos la información para descubrir otra bandera.

¿Cuál es la bandera del comentario HTML? (El primer comentario apunta a una nueva página, ir a ella nos revela la bandera).

THM{HTML_COMMENTS_ARE_DANGEROUS}

¿Cuál es la bandera del enlace secreto?

THM{NOT_A_SECRET_ANYMORE}

¿Cuál es la bandera del listado de directorio?

THM{INVALID_DIRECTORY_PERMISSIONS}

¿Cuál es la bandera de la framework? (Leemos las notas de actualización, nos dice que el error de nuestra versión es que crea un archivo /tmp.zip que no debería. Lo bajamos de la web y lo abrimos).

THM{KEEP_YOUR_SOFTWARE_UPDATED}

Herramientas de desarrollador, el inspector

Los navegadores modernos incluyen herramientas de desarrollador. Unas caja de herramientas que ayudan a los desarrolladores web a depurar aplicaciones y nos da una visión de lo que hay «bajo el capó» y lo que ocurre.

Como pentester, podemos aprovechar estas herramientas para que nos den un mejor entendimiento de la aplicación web. Nos vamos a centrar en tres prestaciones:

  • Inspector.
  • Debugger (Depurador).
  • Network (Red).

Abriendo las herramientas de desarrollador

Es diferente en cada navegador. Normalmente, es a través del menú de opciones de la parte superior derecha (3 puntos en Chrome o 3 rayas en Firefox).

El inspector

El código fuente no representa siempre lo que se muestra en la página. Esto se debe a que el css, el javascript y la interacción del usuario pueden cambiar el contenido y el estilo de la página, lo que significa que necesitamos una manera de ver lo que se ha mostrado en la ventana del navegador en este instante concreto.

El inspector de elementos nos ayuda con esto proveyendo de una representación en vivo de lo que ocurre en la web.

Además de ver, podemos editar e interactuar con los elementos, algo útil para depurar errores por parte de los desarrolladores.

En el sitio web de la habitación, nos vamos a la sección «News» y veremos 3 artículos de noticias.

Los 2 primeros son legibles, pero el tercero ha sido bloqueado con una nota flotante de que debes ser Premium para ver el contenido, al estilo Paywall.

Paywall

Haciendo clic en el botón derecho, seremos capaces de seleccionar la opción «Inspeccionar» del menú, que abre las herramientas del desarrollador.

Ahora veremos los elementos/html de una manera similar a esto.

Paywall

Localizamos el elemento div con la clase premium-customer-blocker y hacemos clic en él. Veremos los estilos css que se aplican, como margen, alineación, etc.

El estilo que nos interesa es display: block. Si hacemos clic en block, podemos poner un valor a nuestra elección.

Si conocemos css, ya sabemos que debemos poner none como valor. Eso revelará el contenido que hay debajo y una bandera.

Si el elemento no tiene campo display, podemos hacer clic debajo del último estilo y añadirlo nosotros.

Recordemos que cualquier edición solo se ve en nuestro navegador, cuando refresquemos la página, todo volverá a la normalidad.

¿Cuál es la bandera del Paywall? (Seguimos las instrucciones que hemos visto).

THM{NOT_SO_HIDDEN}

Herramientas de desarrollador - Debugger / Depurador

Este panel en las herramientas de administrador es para depurar Javascript. Como pentesters nos da la opción de profundizar en el código javascript.

En Firefox y Safari es llamado Debugger, pero en Chrome se llama Sources.

En la web, hacemos clic en «Contact» y cada vez que carga, veremos un flash rápido y rojo en pantalla. Vamos a usar el depurador para ver qué es y si contiene algo interesante.

No va a ser algo que hagamos en el mundo real, pero nos permite usar esta prestación y acostumbrarnos al uso del Depurador.

En él veremos una lista de recursos que está usando la página. Si hacemos clic en la carpeta «Assets» de activos, veremos un archivo flash.min.js. Si hacemos clic, veremos los contenidos del archivo Javascript.

Muchas veces, cuando veamos un archivo de este tipo, estará todo presentado en una línea, porque se ha minimizado, lo que significa que se ha quitado todo el formato (espacios, tabulaciones, etc) para hacer más pequeño el archivo.

Además de eso, este archivo ha sido ofuscado, lo que lo hace más difícil de leer y que no sea copiado por otros desarrolladores.

Podemos volver a tener formato usando la opción «Pretty Print», que aparece como dos corchetes {}. Eso lo hace más legible, pero debido a la ofuscación, es difícil saber qué está ocurriendo.

Si vamos hacia abajo, veremos la línea:

flash['remove']();

Depurando Javascript

Este pequeño pedazos de javascript es lo que está quitando el popup rojo de la página.

Podemos usar otra prestación del depurador llamada breakpoints, o puntos de ruptura, son puntos que fuerzan al navegador a detener el procesado de Javascript y pausar la ejecución actual.

Si haces clic en el número de línea que contiene el código de arriba, verás que se vuelve azul con un indicador de ese color. Has insertado un breakpoint en esta línea.

Si refrescamos la página, veremos que la caja roja permanece en la página en lugar de desaparecer, y contiene una bandera.

¿Cuál es la bandera de la caja roja?

THM{CATCH_ME_IF_YOU_CAN}

Herramientas de desarrollador - Network / Red

La pestaña «Network» en las herramientas de desarrollador puede usarse para llevar la cuenta de las peticiones que hace la página. Si haces clic en «Network» y refrescas la página, verás todos los archivos que pide.

Trata de hacerlo con la página de contacto, puedes pulsar el icono de papelera si la lista está muy superpoblada.

Trata de rellenar el formulario de contacto y pulsar el botón «Enviar mensaje». Verás un evento en la pestaña «Network». Es el formulario enviado en segundo plano usando un método llamado AJAX.

Sirve para enviar y recibir en segundo plano sin interferir con cambios en la página actual.

Uso de Network

Examina la nueva entrada en la pestaña «Network» que ha creado el formulario de contaco y mira los datos que se han enviado para revelar la bandera.

¿Cuál es la bandera que se muestra en la petición contact-msg que hay en «Network»? (Asegurémonos de que el filtro a la hora de ver está marcado como «All» o no veremos contact-msg).

THM{GOT_AJAX_FLAG}