Hola y bienvenido a este capítulo: TryHackMe How Websites Work Cómo funcionan los sitios web. Para explotar un sitio web, primero es necesario saber cómo se crean. Al final de esta sala, sabrás cómo se crean los sitios web y conocerás algunos temas básicos de seguridad. En este capítulo aprenderás cómo funcionan los sitios web (qué hace el navegador y qué hace el servidor) y los fundamentos de seguridad del front-end que todo hacker o pentester debe dominar. Verás cómo dejar credenciales en el código o no limpiar entradas se convierten en vulnerabilidades explotables. Esto es útil y necesario para tu carrera porque te da la visión técnica para encontrar fallos reales, entender su impacto y proponer (o explotar) mitigaciones con criterio.
Cómo funcionan los sitios web
Cuando visitas un sitio web, tu navegador ( como Safari o Google Chrome ) realiza una solicitud a un servidor web solicitando información sobre la página que estás visitando. Este responderá con datos que tu navegador utiliza para mostrarte la página; un servidor web es simplemente una computadora dedicada, ubicado en otra parte del mundo, que gestiona tus solicitudes.
La imagen muestra de forma sencilla el proceso de comunicación entre un navegador web y un servidor a través de Internet. A la izquierda se observa un equipo portátil que representa el navegador (browser), el cual es el punto de inicio de la interacción. Desde ahí se genera una petición (request) que viaja a través de la red hasta llegar al servidor, representado por el equipo de la derecha.
En el centro se encuentra una nube que simboliza Internet, el medio por donde se transmiten tanto las peticiones como las respuestas. El flujo se da en dos direcciones: primero, el navegador envía una solicitud al servidor pidiendo un recurso (por ejemplo, una página web o un archivo), y luego el servidor procesa esa solicitud y envía de vuelta una respuesta (response) que regresa por el mismo camino hasta el navegador.
Este esquema ilustra el modelo clásico de comunicación cliente-servidor, donde el navegador actúa como cliente que solicita información y el servidor como el sistema que la proporciona. Es un concepto fundamental para entender cómo funcionan las páginas web y es la base de muchos ataques y pruebas dentro del ámbito del hacking y el pentesting, ya que cualquier vulnerabilidad en este intercambio puede ser aprovechada para comprometer la seguridad del sistema.
How Websites Work (HTML/JS & Web Security) – How the web works
Hay dos componentes principales que forman un sitio web:
- Front End (lado del cliente): la forma en que el navegador representa un sitio web.
- Back End (lado del servidor): un servidor que procesa la solicitud y devuelve una respuesta.
Hay muchos otros procesos involucrados cuando el navegador realiza una solicitud a un servidor web, pero por ahora, solo necesita comprender que realiza una solicitud a un servidor y este responde con datos que el navegador utiliza para brindar la información.
Responda la pregunta a continuación
¿Qué término describe mejor el componente de una aplicación web representada por su navegador?
Front End
HTML
Los sitios web se crean principalmente utilizando:
- HTML, para construir sitios web y definir su estructura
- CSS, para hacer que los sitios web se vean bonitos agregando opciones de estilo
- JavaScript, implementa funciones complejas en páginas usando interactividad
El lenguaje de marcado de hipertexto ( HTML) es el lenguaje en el que se escriben los sitios web. Los elementos (también conocidos como etiquetas) son los componentes básicos de las páginas HTML e indican al navegador cómo mostrar el contenido. El siguiente fragmento de código muestra un documento HTML simple, cuya estructura es la misma para todos los sitios web:
La estructura HTML (como se muestra en la captura de pantalla) tiene los siguientes componentes:
- <!DOCTYPE html> Define que la página es un documento HTML5. Esto facilita la estandarización en diferentes navegadores e indica al navegador que use HTML5 para interpretar la página.
- <html> El elemento es el elemento raíz de la página HTML: todos los demás elementos vienen después de este elemento .
- <head> El elemento contiene información sobre la página (como el título de la página)
- <body> El elemento define el cuerpo del documento HTML; solo el contenido dentro del cuerpo se muestra en el navegador.
- <h1> El elemento define un encabezado grande
- <p> El elemento define un párrafo
- <button><img> Existen muchos otros elementos (etiquetas) que se utilizan para diferentes propósitos. Por ejemplo, existen etiquetas para botones ( ), imágenes ( ), listas y mucho más.
Las etiquetas pueden contener atributos como el atributo de clase, que se puede usar para darle estilo a un elemento (por ejemplo, hacer que la etiqueta tenga un color diferente) , o el atributo src , que se usa en imágenes para especificar la ubicación de una imagen: Un elemento puede tener múltiples atributos, cada uno con su propósito único, por ejemplo, <p attribute1=»value1″ attribute2=»value2″> . <p class=»bold-text»><img src=»img/cat.jpg»>.
Los elementos también pueden tener un atributo id ( ), que es único para cada elemento. A diferencia del atributo class, donde varios elementos pueden usar la misma clase, un elemento debe tener diferentes id para identificarse de forma única . Los id de elemento se utilizan para el estilo y para su identificación mediante JavaScript. <p id=»example»>
Puede ver el HTML de cualquier sitio web haciendo clic derecho y seleccionando «Ver código fuente de la página» (Chrome) / «Mostrar código fuente de la página» (Safari).
Estructura de la página HTML
La imagen muestra la estructura básica de un documento HTML, el lenguaje fundamental para crear páginas web. Está organizada en dos grandes secciones: el head y el body, que representan respectivamente la parte informativa y la parte visible del sitio.
En la parte superior se encuentra la etiqueta <html>, que indica el inicio del documento. Dentro de ella, el bloque <head> contiene información sobre la página que no se muestra directamente al usuario, como el título, las metas o los enlaces a hojas de estilo. En este caso, se observa una etiqueta <title> con el texto Page title, que define el título que aparece en la pestaña del navegador.
Más abajo está el bloque <body>, donde se coloca todo el contenido visible de la página. Aquí se incluyen un encabezado <h1> con el texto This is a heading y dos párrafos <p> que contienen texto descriptivo. Cada uno de estos elementos representa una parte del contenido que el usuario verá cuando cargue la página en su navegador.
Este ejemplo ilustra claramente cómo se organiza el código HTML en niveles jerárquicos, donde cada etiqueta tiene una función específica. Comprender esta estructura es esencial para cualquier persona que quiera empezar a crear o analizar sitios web, y también es la base para entender cómo se pueden inyectar, modificar o manipular elementos desde el punto de vista del pentesting o la seguridad web.
Responda las preguntas a continuación:
¡Juguemos con HTML! Primero, haz clic en el botón «Ver sitio» dentro de esta tarea. A la derecha, verás un cuadro que muestra el HTML. Si introduces HTML en el cuadro y haces clic en el botón verde «Mostrar código HTML», se mostrará el HTML en la página; deberías ver una imagen de gatos.
Una de las imágenes en el sitio web del gato está rota: ¡arréglela y la imagen revelará la respuesta de texto oculta!
THMLHERO
Añade la imagen de un perro a la página añadiendo otra etiqueta img (<img>) en la línea 11. La ubicación de la imagen es img/dog-1.png. ¿Qué texto contiene la imagen?
DOGHTML
JavaScript
JavaScript (JS) es uno de los lenguajes de programación más populares del mundo y permite que las páginas sean interactivas. HTML se utiliza para crear la estructura y el contenido de un sitio web, mientras que JavaScript se utiliza para controlar la funcionalidad de las páginas web. Sin JavaScript, una página no tendría elementos interactivos y siempre sería estática. JS puede actualizar la página dinámicamente en tiempo real, lo que permite cambiar el estilo de un botón cuando ocurre un evento específico (como cuando un usuario hace clic en un botón) o mostrar animaciones en movimiento.
JavaScript se agrega dentro del código fuente de la página y se puede cargar dentro de las etiquetas o se puede incluir de forma remota con el atributo src: <script><script src=»/location/of/javascript_file.js»></script>
El siguiente código JavaScript encuentra un elemento HTML en la página con el id «demo» y cambia el contenido del elemento a «Hack the Planet»: document.getElementById(«demo»).innerHTML = «Hack the Planet»;
Los elementos HTML también pueden tener eventos, como «onclick» o «onhover», que ejecutan JavaScript cuando se produce el evento. El siguiente código cambia el texto del elemento con el ID de demostración a «Botón pulsado»: Los eventos «onclick» también pueden definirse dentro de las etiquetas de script de JavaScript, y no directamente en los elementos. <button onclick=’document.getElementById(«demo»).innerHTML = «Button Clicked»;’>Click Me!</button>
Responda las preguntas a continuación
Haz clic en el botón «Ver sitio» en esta tarea. A la derecha, agrega JavaScript que cambie el contenido del elemento de demostración a «Hack the Planet».
JSISFUN
Agregue el botón HTML de esta tarea que cambia el texto del elemento a «Botón hecho clic» en el editor de la derecha, actualice el código haciendo clic en el botón «Renderizar código HTML+JS» y luego haga clic en el botón.
Exposición de datos confidenciales
La exposición de datos confidenciales ocurre cuando un sitio web no protege (o elimina) adecuadamente la información confidencial en texto claro para el usuario final; generalmente se encuentra en el código fuente del frontend de un sitio.
Sabemos que los sitios web se crean con muchos elementos HTML (etiquetas), todos los cuales podemos ver simplemente al ver el código fuente de la página. Es posible que un desarrollador web haya olvidado eliminar las credenciales de inicio de sesión, los enlaces ocultos a secciones privadas del sitio web u otros datos confidenciales que se muestran en HTML o JavaScript.
La información confidencial puede utilizarse para facilitar el acceso de un atacante a diferentes partes de una aplicación web. Por ejemplo, podría haber comentarios HTML con credenciales de inicio de sesión temporales, y si al consultar el código fuente de la página se encuentra esto, podría usar estas credenciales para iniciar sesión en otra parte de la aplicación (o peor aún, para acceder a otros componentes del backend del sitio). Siempre que evalúe una aplicación web en busca de problemas de seguridad, una de las primeras cosas que debe hacer es revisar el código fuente de la página para ver si puede encontrar credenciales de inicio de sesión expuestas o enlaces ocultos.
Responda las preguntas a continuación
Visita el sitio web en este enlace . ¿Cuál es la contraseña oculta en el código fuente?
testpasswd
Inyección de HTML
La inyección HTML es una vulnerabilidad que se produce cuando se muestra información del usuario sin filtrar en la página. Si un sitio web no depura la información del usuario (filtra cualquier texto malicioso que este introduzca) y dicha información se utiliza en la página, un atacante puede inyectar código HTML en un sitio web vulnerable.
La desinfección de la entrada es fundamental para mantener la seguridad de un sitio web, ya que la información que un usuario introduce suele utilizarse en otras funciones del frontend y del backend. Una vulnerabilidad que explorarás en otro laboratorio es la inyección de bases de datos, donde se puede manipular una consulta de búsqueda en la base de datos para iniciar sesión como otro usuario controlando la entrada que se utiliza directamente en la consulta. Por ahora, centrémonos en la inyección HTML (que se realiza del lado del cliente).
Cuando un usuario tiene control de cómo se muestra su entrada, puede enviar código HTML (o JavaScript) y el navegador lo usará en la página, lo que le permitirá controlar la apariencia y la funcionalidad de la página. La imagen de arriba muestra cómo un formulario envía texto a la página. Lo que el usuario introduce en el campo «¿Cuál es tu nombre?» se pasa a una función JavaScript y se muestra en la página. Esto significa que si el usuario añade su propio HTML o JavaScript en el campo, este se utiliza en la función sayHi y se añade a la página. Esto significa que puedes añadir tu propio HTML (como una etiqueta <h1>) y se mostrará como HTML puro.
La regla general es no confiar nunca en la entrada del usuario. Para evitar entradas maliciosas, el desarrollador del sitio web debe depurar todo lo que el usuario introduzca antes de usarlo en la función JavaScript; en este caso, el desarrollador podría eliminar cualquier etiqueta HTML.
Explicación de la imagen
La imagen explica de forma visual cómo funciona la vulnerabilidad. Muestra el proceso paso a paso de cómo un sitio web puede ser manipulado si no valida correctamente la información que introduce el usuario.
En el primer paso, el usuario escribe su nombre en un campo de texto dentro de una página web. Este dato se almacena en una variable mediante una función en JavaScript, como se observa en el código que aparece en la parte inferior de la imagen. El segundo paso indica que esa información se utiliza directamente dentro de la página para mostrar un mensaje de bienvenida, usando la propiedad innerHTML para insertar el texto dinámicamente en el documento.
El problema surge en el tercer paso, donde se señala que no existe ningún tipo de sanitización o validación sobre la entrada del usuario. Esto significa que, si en lugar de escribir un nombre común se introduce código HTML o JavaScript, el navegador lo interpretará y ejecutará. Este comportamiento permite que un atacante inyecte código malicioso dentro de la página, lo cual podría manipular su contenido, robar cookies o ejecutar acciones en nombre del usuario.
Esta representación es perfecta para entender cómo un simple descuido en la manipulación de entradas puede abrir la puerta a un ataque XSS, resaltando la importancia de validar y escapar cualquier dato que provenga del usuario antes de mostrarlo en una aplicación web.
Tarea
Responda las preguntas a continuación
Vea el sitio web en esta tarea e inyecte HTML para que se muestre un enlace malicioso a http://hacker.com.
HTML_INJ3CTI0N
Finalizamos!
Cuando terminan toda la ruta les da un certificado
Resumen del artículo (para facilitar su comprensión)
- Modelo cliente-servidor: El navegador (cliente) hace una request y el servidor responde con datos (response).
- Componentes de un sitio:
- Front End: lo visible en el navegador —HTML (estructura), CSS (estilos) y JavaScript (interactividad).
- Back End: lógica del servidor, base de datos, APIs y control de acceso.
- HTML básico: etiquetas, <!DOCTYPE html>, <html>, <head>, <body>, atributos class e id. Puedes inspeccionar cualquier web con “Ver código fuente”.
- Prácticas interactivas del laboratorio: arreglar una imagen rota añadiendo <img>, insertar una imagen extra (ej. img/dog-1.png) y leer texto oculto en la imagen para obtener pistas.
- JavaScript y DOM: document.getElementById(…).innerHTML puede cambiar contenido dinámicamente; los eventos (onclick) disparan funciones. Entender esto te permite manipular la página durante pruebas.
- Exposición de datos confidenciales: los desarrolladores a veces dejan contraseñas, claves o enlaces ocultos en HTML/JS —buscar en el código fuente puede revelar credenciales (ej.: testpasswd).
- Inyección HTML / XSS (cliente): cuando la entrada del usuario se inserta en la página sin sanitizar, se puede inyectar HTML o JS. Ejemplo práctico del laboratorio: introducir un payload que muestre un enlace malicioso a http://hacker.com.
- Consejos de defensa (breve): eliminar secretos del frontend, validar y escapar toda entrada del usuario, usar políticas de seguridad (CSP), almacenamiento seguro de credenciales y least privilege en el backend.
- Objetivo del laboratorio: combinar teoría y ejercicios prácticos para que sepas tanto cómo construir/analizar páginas como reconocer y explotar fallos básicos de seguridad.
Diez preguntas (respondibles con lo aprendido en el artículo)
- ¿Qué término describe mejor el componente de una aplicación web que se ejecuta en el navegador del usuario?
- ¿Cuáles son los tres lenguajes principales usados para crear sitios web y cuál es la función principal de cada uno?
- ¿Qué etiqueta HTML define el elemento raíz de un documento HTML?
- ¿Cuál es la diferencia práctica entre los atributos class y id en HTML?
- ¿Qué hace document.getElementById(«demo»).innerHTML = «Hack the Planet»; en JavaScript?
- ¿Qué son los eventos en HTML/JS y da un ejemplo de uso común?
- ¿Qué significa “exposición de datos confidenciales” en el frontend y por qué es peligrosa?
- ¿Qué es la inyección HTML (XSS de cliente) y cómo puede un atacante aprovecharla?
- En el modelo cliente-servidor, ¿qué papel juega el navegador y qué hace el servidor?
- Menciona dos medidas básicas para evitar la inyección HTML (XSS) en una aplicación web.
Diez ejercicios prácticos basados en el artículo (para que el alumno resuelva)
1 — Identificar componente: Indica si las siguientes tareas corresponden al Front End o al Back End:
(a) aplicar estilos con CSS,
(b) validar credenciales en una base de datos,
(c) manipular el DOM con JavaScript.
2 — Plantilla HTML: Escribe una plantilla HTML mínima (doctype, html, head con título, body con un h1 y un p).
3 — Etiquetas y atributos: Crea una etiqueta img que muestre la imagen img/dog-1.png y añade un atributo alt descriptivo y una clase pet.
4 — Reparar imagen rota (práctico del artículo): En el HTML hay una imagen rota que, al corregir la ruta, revela el texto oculto DOGHTML. Escribe la línea img correcta para conseguir eso.
5 — JavaScript básico: Escribe el JavaScript necesario para cambiar el contenido del elemento con id demo a Hack the Planet cuando se cargue la página.
6 — Botón con evento: Añade un botón que, al pulsarlo, cambie el texto de demo a Botón hecho clic.
7 — Buscar información en el código fuente: Indica dónde buscarías una contraseña expuesta en una página y cómo la identificarías (qué patrones/comentarios/atributos mirarías).
8 — Crear ejemplo de inyección (safely): Escribe un ejemplo (solo como texto) de una entrada de usuario que, si no se filtra, mostraría un enlace a http://hacker.com en la página. (No lo ejecutes en sitios reales)
9 — Sanitización: Escribe una función JavaScript que escape los caracteres <, >, &, » y ‘ en una cadena (una función simple de sanitización para el frontend).
10 — Diagrama en palabras: Describe en 4 pasos el flujo de una petición desde que el usuario hace clic en una URL hasta que ve la página en su navegador (cliente → Internet → servidor → respuesta → renderizado).
3) Respuestas detalladas a las 10 preguntas
- Front End.
El navegador (p. ej. Chrome, Firefox) representa la parte cliente de la aplicación web: HTML + CSS + JavaScript que el usuario ve y con la que interactúa. - HTML, CSS y JavaScript.
- HTML: estructura y contenido (etiquetas, texto, imágenes).
- CSS: estilos visuales (colores, fuentes, disposición).
- JavaScript: comportamiento e interactividad (eventos, manipulación del DOM, lógica en el cliente).
- <html>.
La etiqueta <html> es el elemento raíz que contiene todo el documento HTML. - class vs id.
- class: puede usarse en muchos elementos (no único); útil para agrupar y dar estilo a varios elementos.
- id: único por página; se usa para identificar un elemento de forma única (manipulación con JS, anclas, estilos específicos).
- Cambia el contenido del elemento con id «demo» por el texto «Hack the Planet».
document.getElementById(«demo») localiza el elemento; .innerHTML = «…» escribe HTML/texto en su interior, actualizando lo mostrado. - Eventos = acciones que disparan código; ejemplo onclick.
Eventos como onclick, onhover (más formalmente onmouseover), onchange, etc., permiten ejecutar JavaScript cuando ocurre una interacción. Ejemplo: <button onclick=»alert(‘Hola’)»>Pulsa</button>. - Exposición de datos confidenciales = información sensible visible en el frontend.
Puede incluir credenciales, tokens, enlaces a áreas privadas o comentarios con datos. Es peligrosa porque cualquiera que vea el código fuente puede usar esos datos para acceder a partes privadas o a sistemas backend. - Inyección HTML (XSS cliente) = mostrar entrada del usuario sin filtrar.
Si el sitio inserta directamente la entrada del usuario con innerHTML, un atacante puede añadir etiquetas HTML o <script> que el navegador ejecutará, permitiendo redirecciones, robo de cookies o acciones en nombre del usuario. - Navegador = cliente que hace la solicitud; servidor = responde con los datos.
El navegador pide un recurso (request) a un servidor; el servidor procesa la petición y devuelve una respuesta (response) que el navegador renderiza. - Medidas básicas contra XSS y exposición:
- Escape/sanitizar toda entrada del usuario antes de mostrarla en el DOM (usar textContent en vez de innerHTML si solo se necesita texto).
- No dejar credenciales/tokens en el HTML/JS público; moverlos al backend o a entornos seguros y restringir su acceso.
4) Respuestas detalladas a los 10 ejercicios
Ejercicio 1 — Identificar componente
a) aplicar estilos con CSS → Front End
b) validar credenciales en una base de datos → Back End
c) manipular el DOM con JavaScript → Front End
Explicación: CSS y DOM afectan lo que el usuario ve y hace; la validación con datos persistentes normalmente ocurre en el servidor.
Ejercicio 2 — Plantilla HTML mínima
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»utf-8″>
<title>Ejemplo mínimo</title>
</head>
<body>
<h1>Bienvenido</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Explicación: Contiene <!DOCTYPE html>, <html>, <head> con <title>, y <body> con contenido visible.
Ejercicio 3 — Etiqueta img con alt y class
<img src=»img/dog-1.png» alt=»Perro feliz» class=»pet»>
Explicación: src indica la ruta de la imagen; alt mejora accesibilidad y SEO; class=»pet» permite aplicar estilos CSS a múltiples elementos.
Ejercicio 4 — Reparar imagen rota (línea correcta)
Si la línea 11 del ejemplo debía mostrar la imagen img/dog-1.png, la etiqueta correcta sería (ejemplo):
<img src=»img/dog-1.png» alt=»Dog image»>
Resultado esperado: Al colocar la ruta correcta, la imagen se carga y el texto oculto que la imagen muestra en ese laboratorio es DOGHTML. (En el artículo el texto resultante fue DOGHTML.)
Ejercicio 5 — JavaScript para cambiar demo a Hack the Planet
Opción colocada dentro de <script>:
<script>
// Al cargar el DOM, cambiar el contenido
window.addEventListener(‘DOMContentLoaded’, function() {
var el = document.getElementById(‘demo’);
if (el) el.innerHTML = ‘Hack the Planet’;
});
</script>
Explicación: Esperar DOMContentLoaded asegura que el elemento exista antes de modificarlo.
Ejercicio 6 — Botón que cambia texto
HTML + JS mínimo:
<button id=»miBoton»>Click me</button>
<p id=»demo»>Texto original</p>
<script>
document.getElementById(‘miBoton’).addEventListener(‘click’, function() {
document.getElementById(‘demo’).textContent = ‘Botón hecho clic’;
});
</script>
Nota de seguridad: Aquí uso textContent (no innerHTML) porque solo necesitamos texto, evitando riesgos de XSS.
Ejercicio 7 — Buscar contraseña expuesta en código fuente
Dónde mirar y qué patrones buscar:
- Abrir “Ver código fuente” o “Inspeccionar” en el navegador.
- Buscar comentarios HTML como <!– password: … –>.
- Buscar variables JS en scripts: var password = «…» o const secret = «…».
- Buscar valores en atributos ocultos: <input type=»hidden» value=»…»>.
- Buscar cadenas con palabras clave: password, passwd, token, secret, admin.
Ejemplo concreto (según el artículo): la contraseña oculta encontrada fue testpasswd.
Ejercicio 8 — Ejemplo de entrada maliciosa (solo texto)
Texto que un atacante podría introducir si el campo no se filtra (no ejecutar esto en sitios reales):
<a href=»http://hacker.com»>Pulsa aquí</a>
Resultado si se inserta sin sanitizar: el enlace aparecería en la página y los usuarios podrían ser dirigidos al sitio malicioso. (En laboratorios de aprendizaje este tipo de entrada sirve para demostrar XSS.)
Ejercicio 9 — Función JS simple para escapar caracteres
function escapeHtml(str) {
return String(str)
.replace(/&/g, ‘&’)
.replace(/</g, ‘<’)
.replace(/>/g, ‘>’)
.replace(/»/g, ‘"’)
.replace(/’/g, ‘'’);
}
// Uso:
var safe = escapeHtml(userInput);
element.innerHTML = safe; // aunque mejor: element.textContent = userInput;
Explicación: Reemplaza caracteres especiales para que no se interpreten como HTML. Para insertar texto sin riesgo, preferir textContent o métodos de plantillas seguras.
Ejercicio 10 — Flujo de petición en 4 pasos (simplificado)
- Cliente → petición: El usuario solicita una URL en el navegador (ej. escribe o hace clic). El navegador crea y envía una petición HTTP(S).
- Internet → enrutamiento: La petición viaja por la red (ISP, routers, DNS resuelve la IP, llega al servidor).
- Servidor → respuesta: El servidor recibe la petición, procesa lógica (backend, base de datos si hace falta) y devuelve una respuesta (HTML/CSS/JS/JSON).
- Cliente → renderizado: El navegador recibe la respuesta, interpreta el HTML/CSS/JS, descarga recursos adicionales y renderiza la página para el usuario.
Qué aprendiste
Has aprendido los cimientos técnicos que todo hacker necesita: cómo el navegador y el servidor se hablan, cómo se construyen las páginas con HTML/CSS/JS y por qué errores comunes (imágenes rotas, secretos en el código, uso de innerHTML sin sanitizar) son vectores de ataque. Esto te será útil para más adelante poder:
- Auditar interfaces web de forma más eficiente (buscar credenciales expuestas, endpoints ocultos).
- Diseñar y ejecutar pruebas de inyección HTML/XSS en entorno controlado.
- Comunicar hallazgos con recomendaciones claras (qué corregir y por qué).
Sigue practicando: inspecciona código fuente, juega con el DOM en la consola del navegador y crea payloads simples para entender el impacto. Con estos cimientos podrás avanzar a pruebas más avanzadas (autenticación, sesiones, inyección SQL, CSRF, etc.) y convertirte en un pentester más eficaz. ¡Bien hecho y a seguir aprendiendo!