TryHackMe – Putting it all together

Poniéndolo todo junto

Hola hacketones! En este capítulo, TryHackMe – Putting it all together, vas a encajar todas las piezas: DNS, HTTP(S), servidores web, hosts virtuales, contenido estático vs. dinámico, balanceadores, CDN, bases de datos y WAF. Verás el viaje completo de una solicitud desde tu navegador hasta el backend y de vuelta al cliente. ¿Por qué es vital para tu carrera como hacker? Porque entender el flujo extremo a extremo te da un mapa mental para localizar cuellos de botella, puntos de control, superficies de ataque y controles de defensa. Con ese mapa sabrás dónde mirar, qué romper y cómo medir impacto sin perderte en detalles. Descubra cómo todos los componentes individuales de la web funcionan juntos para brindarle acceso a sus sitios web.

Cada vez que escribes una URL en tu navegador y presionas «Enter», desencadenas una secuencia de eventos casi instantánea que solemos dar por sentada. Para la mayoría de los usuarios, la aparición de una página web en pantalla parece un acto de magia digital. Sin embargo, detrás de esa simplicidad estética existe un baile coreografiado de protocolos y servidores que ocurre en milisegundos.

Cuando solicitas un sitio, tu computadora primero utiliza el sistema DNS para encontrar la dirección IP del servidor. Luego, se comunica mediante el protocolo HTTP (un conjunto especial de comandos) para solicitar archivos. El servidor responde entregando HTML, JavaScript, CSS e imágenes que el navegador procesa para mostrarte el sitio. Pero este viaje no es tan lineal como parece; basándonos en la arquitectura de TryHackMe, descubriremos los engranajes «ocultos» que hacen que internet sea rápido, resiliente y seguro.

Cuando visitas un sitio web, ocurren muchos pasos invisibles:

1. DNS: El navegador necesita saber la IP del sitio web (traduce nombre de dominio a IP).
2. HTTP/HTTPS: Se realiza una solicitud al servidor web con este protocolo.
3. Servidor Web: Recibe la solicitud y responde con archivos HTML, CSS, JS, imágenes, etc.
4. Navegador (cliente): Interpreta los archivos y muestra el sitio web en pantalla.

Putting it all together – How the web works

Tarea 1 Poniéndolo todo junto

En los módulos anteriores, habrás aprendido que hay muchas cosas que suceden detrás de escena cuando solicitas una página web en tu navegador. En resumen, cuando accedes a un sitio web, tu equipo necesita conocer la dirección IP del servidor con el que se conecta; para ello, utiliza DNS .

Tu PC se comunica con el servidor web mediante un conjunto especial de comandos llamado protocolo HTTP . El servidor web devuelve HTML, JavaScript, CSS, imágenes, etc., que tu navegador utiliza para formatear y mostrar el sitio web correctamente.

Tarea 2 Otros componentes

Balanceadores de carga

Cuando el tráfico de un sitio web aumenta considerablemente o se ejecuta una aplicación que requiere alta disponibilidad, es posible que un servidor web deje de funcionar. Los balanceadores de carga ofrecen dos funciones principales: garantizar que los sitios web con alto tráfico puedan gestionar la carga y proporcionar conmutación por error si un servidor deja de responder.

Cuando el tráfico de un sitio crece masivamente o se requiere «alta disponibilidad», un solo servidor no es suficiente. Aquí entra el Load Balancer (Balanceador de Carga), que recibe tu petición primero y la redirige a uno de los múltiples servidores que tiene detrás.

Para decidir a qué servidor enviar el tráfico, utiliza algoritmos inteligentes. El round-robin envía peticiones a cada servidor en orden secuencial. Por otro lado, el algoritmo weighted (ponderado) es más analítico: verifica cuántas solicitudes está manejando cada servidor en ese momento y envía la nueva petición al que esté menos ocupado. Además, realiza health checks (chequeos de salud) periódicos; si un servidor no responde adecuadamente, el balanceador deja de enviarle tráfico hasta que vuelva a estar operativo.

«Los balanceadores de carga proporcionan dos funciones principales: asegurar que los sitios de alto tráfico puedan manejar la carga y proporcionar un ‘failover’ (conmutación por error) si un servidor deja de responder.»

Análisis: Este componente es vital para la resiliencia. Sin él, el fallo de un solo nodo físico tumbaría plataformas enteras. Es la pieza que garantiza que, aunque un servidor falle en un centro de datos, tú sigas navegando sin interrupciones.

Entonces cuando solicitas un sitio web con un balanceador de carga, este recibirá primero tu solicitud y la reenviará a uno de los múltiples servidores que lo respaldan. El balanceador utiliza diferentes algoritmos para decidir qué servidor es el más adecuado para procesar la solicitud. Algunos ejemplos de estos algoritmos son  «round-robin» , que envía la solicitud a cada servidor por turno, o  «weighted» , que verifica cuántas solicitudes está procesando un servidor y la envía al servidor con menos tráfico.

Los balanceadores de carga también realizan comprobaciones periódicas de cada servidor para garantizar su correcto funcionamiento; esto se denomina  comprobación de estado . Si un servidor no responde correctamente, el balanceador de carga dejará de enviar tráfico hasta que vuelva a responder correctamente.

CDN (Redes de distribución de contenido)

Una CDN puede ser un excelente recurso para reducir el tráfico a un sitio web concurrido. Permite alojar archivos estáticos de su sitio web, como JavaScript, CSS, imágenes y vídeos, en miles de servidores en todo el mundo. Cuando un usuario solicita uno de los archivos alojados, la CDN determina la ubicación física del servidor más cercano y envía la solicitud allí, en lugar de enviarla al otro lado del mundo.

 

Una CDN (Content Delivery Network) es una red de miles de servidores distribuidos globalmente que alojan archivos estáticos: JavaScript, CSS, imágenes y videos. Su misión es doble: reducir la distancia física entre el usuario y los datos, y aliviar la carga del servidor principal.

Cuando pides un archivo, la CDN calcula cuál es el servidor más cercano a tu ubicación y te sirve el contenido desde allí. Esto evita que la petición tenga que viajar, por ejemplo, de Ciudad de México a Singapur si el servidor de origen está del otro lado del mundo.

Análisis: El impacto es radical tanto para el usuario como para el dueño del sitio. Para el usuario, la velocidad de carga aumenta drásticamente. Para el administrador, la CDN es un recurso excelente para recortar el tráfico hacia un servidor web saturado, permitiendo que este se concentre solo en procesar la lógica del sitio mientras la red global se encarga de los archivos pesados.

 

Bases de datos

A menudo, los sitios web necesitan una forma de almacenar información para sus usuarios. Los servidores web pueden comunicarse con bases de datos para almacenar y recuperar datos.

Las bases de datos pueden ir desde un simple archivo de texto sin formato hasta complejos clústeres de múltiples servidores que proporcionan velocidad y resiliencia. Encontrará algunas bases de datos comunes: MySQL, MSSQL, MongoDB, Postgres y más; cada una con sus características específicas.

WAF ( Firewall de aplicaciones web )

Un WAF se interpone entre tu solicitud web y el servidor web; su objetivo principal es protegerlo de ataques de hackers o denegación de servicio. Analiza las solicitudes web en busca de técnicas de ataque comunes, independientemente de si provienen de un navegador real o de un bot. También comprueba si se envía un número excesivo de solicitudes web mediante la limitación de velocidad, que solo permite una cierta cantidad de solicitudes por segundo desde una IP. Si una solicitud se considera un posible ataque, se descarta y nunca se envía al servidor web.

Antes de que una petición toque el servidor, debe pasar por el WAF (Web Application Firewall). Este componente actúa como un filtro protector que analiza cada solicitud en busca de técnicas de hacking o ataques de denegación de servicio (DoS).

El WAF utiliza el rate limiting (limitación de tasa), que restringe cuántas peticiones puede enviar una dirección IP por segundo. Si detecta un comportamiento anómalo, la petición es descartada de inmediato. Su objetivo primordial es distinguir si quien llama a la puerta es un navegador real o un bot malicioso.

Análisis: El valor del WAF reside en su capacidad preventiva. Al neutralizar amenazas antes de que interactúen con la lógica interna del sistema, protege la integridad de los datos y la disponibilidad del servicio frente a ataques automatizados que ningún humano podría frenar manualmente.

Responda las preguntas a continuación

¿Qué se puede utilizar para alojar archivos estáticos y acelerar la visita de un cliente a un sitio web?

CDN

¿Qué realiza un balanceador de carga para garantizar que un host siga activo?

health check

¿Qué se puede utilizar para ayudar contra el hackeo de un sitio web?

WAF

 

Tarea 3 Cómo funcionan los servidores web

¿Qué es un servidor web?

Un servidor web es un software que detecta conexiones entrantes y utiliza el protocolo HTTP para entregar contenido web a sus clientes. Los servidores web más comunes son Apache , Nginx, IIS y NodeJS. Un servidor web entrega archivos desde su directorio raíz, definido en la configuración del software. Por ejemplo, Nginx y Apache comparten la misma ubicación predeterminada: /var/www/html en sistemas operativos Linux , mientras que IIS usa C:\inetpub \ wwwroot en sistemas operativos Windows. Por ejemplo, si solicita el archivo   http://www.example.com/picture.jpg , enviará el archivo /var/www/html/picture.jpg desde su disco duro local.

 

Hosts virtuales

Los servidores web pueden alojar varios sitios web con diferentes nombres de dominio; para ello, utilizan hosts virtuales. El software del servidor web comprueba el nombre de host solicitado en los encabezados HTTP y lo compara con sus hosts virtuales (los hosts virtuales son simplemente archivos de configuración de texto). Si encuentra una coincidencia, se proporcionará el sitio web correcto. Si no encuentra ninguna coincidencia, se proporcionará el sitio web predeterminado.

Los hosts virtuales pueden tener su directorio raíz asignado a diferentes ubicaciones en el disco duro. Por ejemplo, one.com se asigna a /var/www/website_one y two.com a /var/www/website_two. No hay límite en la cantidad de sitios web diferentes que puedes alojar en un servidor web.

 

En la arquitectura web moderna, no necesitas un servidor físico para cada sitio. Gracias a los Virtual Hosts, un software de servidor como Apache, Nginx, IIS o NodeJS puede alojar múltiples dominios (como uno.com y dos.com) simultáneamente.

¿Cómo lo logra? Los Virtual Hosts son simplemente archivos de configuración basados en texto. El servidor inspecciona los encabezados HTTP de tu petición para ver qué nombre de host solicitas, busca una coincidencia en sus configuraciones y entrega el contenido correspondiente. Cada sitio tiene su propio Root Directory (directorio raíz), que es la carpeta en el disco duro donde viven sus archivos. Por ejemplo, en Linux, Apache y Nginx suelen usar /var/www/html, mientras que en Windows, IIS utiliza C:\inetpub\wwwroot.

Análisis: Esta tecnología permite una eficiencia de recursos extraordinaria. Al mapear diferentes dominios a distintas carpetas en un mismo hardware, se democratiza el acceso al hosting, permitiendo que miles de sitios web pequeños coexistan de forma económica y escalable.

 

 

Contenido estático vs. contenido dinámico

El contenido estático, como su nombre indica, es contenido que nunca cambia. Ejemplos comunes son imágenes, JavaScript, CSS, etc., pero también puede incluir HTML que nunca cambia. Además, estos son archivos que se sirven directamente desde el servidor web sin modificaciones.

El contenido dinámico, por otro lado, es contenido que puede cambiar según las solicitudes. Por ejemplo, un blog. En la página principal, se muestran las últimas entradas. Si se crea una nueva entrada, la página principal se actualiza con ella. Otro ejemplo podría ser la página de búsqueda de un blog. Según la palabra que busques, se mostrarán diferentes resultados.

Estos cambios en lo que ves se realizan en el  backend  mediante lenguajes de programación y scripting. Se llama backend porque todo lo que se hace se realiza en segundo plano. No puedes ver el código HTML de los sitios web y ver lo que sucede en el backend, mientras que el HTML es el resultado del procesamiento del backend. Todo lo que ves en tu navegador se llama  frontend.

Lenguajes de scripting y backend

No hay muchos límites para lo que un lenguaje de backend puede lograr, y estos son los que hacen que un sitio web sea interactivo para el usuario. Algunos ejemplos de estos lenguajes (sin ningún orden en particular :p) son PHP , Python , Ruby, NodeJS, Perl y muchos más. Estos lenguajes pueden interactuar con bases de datos, llamar a servicios externos , procesar datos del usuario y mucho más. Un ejemplo básico de PHP sería solicitar el sitio web http://example.com/index.php?name=adam

La web se divide en Frontend (lo que ves) y Backend (lo que sucede tras bambalinas). Mientras que el contenido estático nunca cambia, el contenido dinámico se genera en el momento mediante lenguajes de programación como PHP, Python, Ruby, NodeJS o Perl.

Estos lenguajes del Backend interactúan con Bases de Datos para almacenar y recuperar información. Dependiendo de la necesidad, se utilizan sistemas como MySQL, MSSQL, MongoDB o Postgres. La magia aquí es la «opacidad»: el cliente nunca ve el código fuente del servidor. Por ejemplo, si pides index.php?name=adam, el servidor procesa este código:

<html><body>Hello <?php echo $_GET[«name»]; ?></body></html>

Pero lo único que llega a tu navegador es el resultado final en HTML:

<html><body>Hello adam</body></html>

«El cliente no ve ningún código de lenguaje de servidor (como PHP) porque está en el Backend. El HTML que recibe el navegador es solo el resultado del procesamiento realizado tras bambalinas.»

Análisis: Esta separación de capas es lo que permite la interactividad moderna (buscadores, redes sociales, carritos de compra). Sin embargo, esta complejidad también abre la puerta a riesgos de seguridad si el código no está programado correctamente, ya que el Backend es el puente directo hacia los datos sensibles de la empresa.

Si index.php se construyó así:

<html><body>Hello <?php echo $_GET[«name»]; ?></body></html>

Esto le enviaría al cliente lo siguiente:

<html><body>Hello adam</body></html>

Notarás que el cliente no ve ningún código PHP porque está en el  backend . Esta interactividad plantea muchos más problemas de seguridad para las aplicaciones web que no se han creado de forma segura, como aprenderás en los siguientes módulos.

Responda las preguntas a continuación

¿Qué utiliza el software de servidor web para alojar varios sitios?

Virtual Hosts

¿Cómo se llama el tipo de contenido que puede cambiar?

Dynamic

¿El cliente ve el código del backend? Sí/No

Nay

Prueba

El cuestionario

Haz clic en el botón «Ver sitio» a la derecha. Con todo lo aprendido en los otros módulos, arrastra y suelta los mosaicos en el orden correcto de cómo funciona una solicitud a un sitio web para mostrar la bandera.

Nota : Al colocar un mosaico en la posición correcta, se resaltará en verde. Si está en el lugar incorrecto, se resaltará en rojo. ¡ No actualice la página, ya que se borrarán todos los mosaicos!

Responda las preguntas a continuación

Bandera

THM{YOU_GOT_THE_ORDER}

Resumen del capítulo — De la URL al HTML renderizado (y todo lo que pasa entre medio)

• 1) Resolución y conexión
  • DNS traduce dominio → IP del servidor/servicio (a veces del balanceador o CDN).
  • El navegador abre conexión y habla HTTP(S) para pedir recursos.
• 2) Puertas de entrada y distribución
  • Balanceador de carga recibe la petición y la reparte con algoritmos (round-robin, weighted).
    • Hace health checks y saca de rotación servidores caídos.
  • CDN sirve estáticos (CSS/JS/imagen/video) desde el edge más cercano reduciendo latencia y carga al origen.
• 3) Capa de aplicación
  • Servidor web (Nginx/Apache/IIS/Node) decide qué sitio entregar vía Virtual Hosts (por Host:).
  • Contenido estático sale directo del document root.
  • Contenido dinámico lo genera el backend (PHP, Python, Node, Ruby, etc.) que puede:
    • leer parámetros (GET/POST),
    • llamar servicios externos,
    • consultar bases de datos (MySQL, PostgreSQL, MSSQL, MongoDB…).
• 4) Seguridad en el perímetro y el camino
  • WAF inspecciona solicitudes (patrones de ataque, rate-limit) y bloquea lo sospechoso antes de tocar la app.
  • TLS/HTTPS cifra tráfico y valida identidad del servidor.
• 5) Respuesta y render
  • El servidor devuelve HTML + CSS + JS (y otros assets); el navegador construye DOM/CSSOM, ejecuta JS y pinta la página.
• Claves de pentesting que se desprenden del flujo
  • Dónde interceptar: CDN (cabeceras/cache), balanceador (comportamientos diferenciales), server web (vhosts, rutas), backend (parámetros), DB (inyecciones).
  • Qué observar: códigos de estado, redirecciones, encabezados de seguridad, separación estático/dinámico, patrones de caché, diferencias entre sitios por Host.
  • Qué probar: parámetros en endpoints dinámicos, políticas del WAF (bypass), exposición de estaticos sensibles, enumeración de vhosts, fallos de sesión en capas distribuidas.

 

 Componentes adicionales que intervienen

Componente	Función	Ejemplo/Detalle
CDN (Content Delivery Network)	Aloja y distribuye archivos estáticos (imágenes, JS, CSS, etc.) desde servidores cercanos al usuario.	Acelera la carga del sitio.
Balanceador de carga	Distribuye el tráfico entre varios servidores para evitar sobrecarga y permitir alta disponibilidad.	Algoritmos: round-robin, least-connections, etc.
Health Check	Técnica usada por balanceadores para verificar que un servidor está activo y operativo.	Si falla, deja de enviarle tráfico.
Base de datos	Almacena datos dinámicos del sitio (usuarios, productos, etc.)	Ej: MySQL, PostgreSQL, MongoDB
WAF (Web Application Firewall)	Filtra y bloquea solicitudes maliciosas antes de que lleguen al servidor web.	Protege contra XSS, SQLi, DDoS, etc.

Cómo funcionan los servidores web

¿Qué es un servidor web?

Software que entrega contenido web a los usuarios. Ejemplos:

• Apache
• Nginx
• IIS
• NodeJS

📂 Ubicación típica de archivos:

• Linux: /var/www/html
• Windows: C:\inetpub\wwwroot

Hosts virtuales (Virtual Hosts)

Permiten que un solo servidor aloje múltiples sitios web.

Ejemplo:

• one.com → /var/www/website_one
• two.com → /var/www/website_two

Tipos de contenido

Tipo	Qué es	Ejemplos
Estático	No cambia, se sirve tal cual está guardado	HTML fijo, CSS, imágenes, JS
Dinámico	Se genera en tiempo real, cambia según el usuario o la situación	Páginas con resultados, perfiles de usuario, etc.

Backend vs. Frontend

Concepto	Qué hace	Visible al usuario
Frontend	Todo lo que ve el usuario en el navegador (HTML, CSS, JS)	✅ Sí
Backend	Lógica, procesamiento de datos, conexión a bases de datos, seguridad	❌ No

🔧 Lenguajes backend comunes: PHP, Python, Ruby, Node.js, Perl

Ejemplo PHP:

<html><body>Hello <?php echo $_GET[«name»]; ?></body></html>

Al visitar example.com/index.php?name=adam, el usuario verá:

<html><body>Hello adam</body></html>

Prioriza tus pruebas según la capa que estés utilizando

Lo que te llevas

Ahora entiendes el circuito completo: del DNS al WAF, del balanceador al servidor web, del backend a la base de datos, y de vuelta a tu navegador via CDN. Con este mapa podrás:

• priorizar pruebas según la capa (perímetro, app, datos),
• diferenciar problemas de red, de configuración o de lógica,
• explicar impacto con claridad (qué componente falla y por qué),
• y optimizar tu recon para atacar donde más duele.

Lo que percibimos como una simple página cargando es, en realidad, una sinfonía invisible donde el DNS, los balanceadores de carga, las CDN, los WAF y los servidores virtuales trabajan en armonía perfecta. Cada componente tiene una misión crítica: garantizar que la información llegue de forma rápida, segura y precisa desde su origen hasta tu pantalla.

Sigan practicando el orden de la cadena (resolución → entrada → procesamiento → respuesta) y piensa cada vulnerabilidad en qué tramo rompe. Si dominas el recorrido, dominas el terreno. ¡A la próxima sala con esa mentalidad de arquitecto y atacante a la vez! 🚀

Sigan entrenando, Hacketones, Nos vemos en el próximo laboratorio!!!