Tras el telón de un sitio web… HTML, CSS, JavaScript… y ciberseguridad.

Descubre cómo funciona realmente una página web y por qué entender su estructura básica es clave para protegerte en Internet.

Cuando visitas un sitio web (por ejemplo, https://cybersec4you.net), tu navegador como Chrome, Firefox o Safari envía una solicitud a un servidor web preguntando: “¿Me puedes mostrar esta página?”. Ese servidor, que es básicamente un computador ubicado en alguna parte del mundo, recibe tu solicitud y responde con los archivos necesarios para que tú puedas ver el sitio web en tu pantalla.

Aprenderemos:

Estructura básica de un sitio web?
Qué es HTML?
Etiquetas y atributos HTML
Qué es JavaScript?
Qué es exposición de datos sensibles?
Qué es HTML injection?
Ciberseguridad básica e importante en Sitios Web.

¿Qué ocurre en términos simples en una comunicación web?

Paso 1: El navegador hace una solicitud (request)

Tú escribes una dirección web o haces clic en un enlace.
El navegador envía una solicitud al servidor donde está alojado el sitio.

Paso 2: El servidor responde con archivos

El servidor devuelve varios archivos como:

.html (estructura)
.css (estilo)
.js (comportamiento)

Paso 3: El navegador interpreta y renderiza

Tu navegador interpreta esos archivos y dibuja la página que ves

¿Qué partes componen un sitio web?

1. Front-End (Cliente) – Lo que se ve

Es la parte visual de la web. Es decir, lo que se carga en tu navegador. Se compone principalmente de:

Lenguaje	Función
HTML	Estructura del sitio (textos, botones, imágenes, menús).
CSS	Estilo visual (colores, fuentes, diseño responsive, animaciones).
JavaScript	Comportamiento interactivo (formularios, botones dinámicos, sliders, etc).

Ejemplo práctico: HTML pone un botón, CSS le da color y forma, y JavaScript hace que funcione cuando haces clic.

2. Back-End (Servidor) – Lo que no ves

Es el “cerebro” del sitio. Se encarga de:

Procesar tus datos (como iniciar sesión)
Conectarse con bases de datos
Enviar respuestas personalizadas

Ejemplo práctico: Cuando te logueas, el back-end verifica tu usuario y contraseña, y si es correcto, te muestra tu panel personal.

¿Con qué se crean los sitios web?

Todos los sitios web modernos utilizan, al menos, esta combinación:

HTML → para definir la estructura del contenido
CSS → para dar estilo visual
JavaScript → para añadir interacción dinámica

Este pequeño sitio:

Muestra un título azul (CSS)
Tiene un botón que al hacer clic muestra un mensaje (JavaScript)

¿Qué es HTML y cómo funciona?

HTML (HyperText Markup Language) es el lenguaje base con el que se construyen todos los sitios web. Su función principal es dar estructura al contenido, indicándole al navegador qué mostrar y cómo organizarlo.

Estructura básica de un documento HTML

Aquí tienes un ejemplo de un archivo HTML muy simple:

¿Qué significa cada parte?

Parte del código	Explicación
<!DOCTYPE html>	Indica que el documento está escrito en HTML5, lo cual ayuda a que los navegadores lo interpreten correctamente.
<html>	Es el elemento raíz. Todo el contenido del sitio debe estar contenido dentro de esta etiqueta.
<head>	Contiene información de la página: título, enlaces a hojas de estilo, metadatos, scripts, etc. Esta parte no se muestra directamente al usuario.
<title>	Define el título que aparece en la pestaña del navegador.
<body>	Es la parte visible del sitio web. Aquí va todo el contenido que el usuario verá.
<h1>	Representa un encabezado grande. Existen otros tamaños como <h2> hasta <h6>.
<p>	Muestra un párrafo de texto.

Etiquetas (tags) comunes en HTML

Además de los ejemplos anteriores, HTML tiene muchas otras etiquetas útiles. Aquí te dejo algunas:

Etiqueta	Propósito	Ejemplo
<button>	Crea un botón interactivo	<button>Enviar</button>
<img>	Muestra una imagen	<img src=»img/gato.jpg»>
<a>	Crea un enlace	<a href=»https://example.com»>Ir al sitio</a>
<ul> / <ol>	Lista desordenada / ordenada	<ul><li>Elemento</li></ul>
<div>	Contenedor genérico de contenido	<div class=»seccion»></div>

¿Qué son los atributos?

Los atributos permiten personalizar o dar información adicional a una etiqueta HTML. Se escriben dentro de la etiqueta de apertura.

Ejemplos de atributos:

Atributo	Uso	Ejemplo
class	Se usa para aplicar estilos con CSS	<p class=»texto-rojo»>Hola</p>
id	Identificador único del elemento	<div id=»menu»></div>
src	Ruta a una imagen o archivo	<img src=»img/logo.png»>
href	Enlaces en etiquetas <a>	<a href=»https://google.com»>Buscar</a>
alt	Texto alternativo de una imagen	<img src=»gato.jpg» alt=»Foto de un gato»>

Una sola etiqueta puede tener varios atributos, por otro lado, se debe tomar en cuenta que una etiqueta tiene un id, que es único para la etiqueta y se identifica de forma única dentro de toda la página, a diferencia de que un atributo class por ejemplo puede ser el mismo en diferentes etiquetas.

Por tanto, en JavaScript, el atributo id permite seleccionar y manipular esa etiqueta, veremos un ejemplo después en JavaScript. Y en CSS permite aplicar estilos específicos a esa única etiqueta.

Para tomar en cuenta: En HTML, cuando hablamos de un elemento, nos referimos comúnmente a una etiqueta (tag) junto con su contenido y atributos, no solo a la etiqueta en sí.

Consejo desde la ciberseguridad:

Aunque HTML por sí solo no ejecuta código peligroso, se puede usar para incluir etiquetas <script> o enlaces maliciosos si el sitio no valida entradas.

Por eso es importante tener cuidado con:

Contenido HTML inyectado por usuarios (ej. formularios).
Archivos HTML descargados desde fuentes desconocidas.
Correos que te muestran HTML con enlaces ocultos o redireccionamientos.

¿Qué es JavaScript y por qué es tan importante en la web?

JavaScript (JS) es uno de los lenguajes de programación más utilizados del mundo y es lo que permite que los sitios web sean dinámicos, interactivos y funcionales. JavaScript agrega vida a tu sitio web: botones que reaccionan, menús desplegables, formularios inteligentes, sliders de imágenes, validaciones, animaciones y mucho más.

¿Qué hace JavaScript?

Sin JavaScript, un sitio sería completamente estático. No habría interacción. Solo verías texto, imágenes y enlaces sin poder interactuar con ellos más allá de navegar.

Con JavaScript puedes:

Acción	Ejemplo práctico
Cambiar texto o color en tiempo real	Al hacer clic en un botón
Validar formularios	Antes de enviar datos al servidor
Crear animaciones o efectos visuales	Como menús flotantes, sliders
Mostrar u ocultar elementos	Como respuestas en una sección FAQ
Capturar eventos del usuario	Clics, teclas, scroll, etc.

¿Cómo se agrega JavaScript a una página?

JavaScript puede agregarse de dos formas principales:

1.Dentro del mismo archivo HTML:

2.Desde un archivo externo:

Esto ayuda a mantener limpio el HTML y facilita el mantenimiento del código.

Ejemplo 1: Cambiar contenido dinámicamente

Este script encuentra un elemento en la página con el ID demo y cambia su contenido a un mensaje:

Fuente (tryhackme.com)

¿Qué hace este código?

Busca el elemento con id=»demo»
Cambia su contenido interno (innerHTML) por el texto «CyberSec4You

Ejemplo 2: Interacción con botones

JavaScript se puede ejecutar cuando un usuario hace clic en un botón:

Fuente (tryhackme.com)

Cada vez que haces clic, el texto se actualiza dinámicamente.

Consejos de seguridad en JavaScript

JavaScript también puede ser un canal de ataque si no se maneja correctamente. Algunas recomendaciones:

Nunca insertes texto sin filtrar en innerHTML, para evitar XSS (Cross-Site Scripting).
Usa atributos como Content-Security-Policy en los headers del servidor.
Valida y sanitiza siempre las entradas del usuario.

Exposición de Datos Sensibles en el Código Fuente Web?

Uno de los errores más comunes y peligrosos en el desarrollo web es la exposición de datos sensibles directamente en el código fuente del sitio. Esta mala práctica puede abrir una puerta a ciberataques que comprometan la seguridad de usuarios y sistemas completos.

¿Qué es la exposición de datos sensibles?

Ocurre cuando un sitio web muestra información confidencial sin cifrar o sin eliminarla, permitiendo que cualquier usuario con conocimientos básicos pueda acceder a ella simplemente revisando el código fuente (clic derecho → “Ver código fuente”).

¿Dónde ocurre?

En el frontend del sitio: HTML, JavaScript o incluso comentarios olvidados por desarrolladores. Algunos ejemplos comunes incluyen:

Credenciales de prueba dejadas por accidente (usuario y contraseña).
Enlaces ocultos hacia paneles administrativos.
Tokens de sesión, claves API u otros identificadores únicos.

Ejemplo de una mala práctica

En la siguiente imagen, puedes ver un código HTML donde el desarrollador olvidó eliminar unas credenciales temporales:

Esto significa que cualquier visitante que vea el código fuente podrá usar estas credenciales y, si el sistema aún las acepta, acceder como administrador u obtener privilegios no autorizados.

Riesgos de esta vulnerabilidad

Acceso no autorizado a secciones restringidas.
Escalada de privilegios dentro de la aplicación web.
Acceso lateral a otros sistemas, si las credenciales también son usadas en la base de datos, FTP, paneles, etc.

Buenas prácticas para desarrolladores

Nunca dejes comentarios con datos reales en HTML/JavaScript.
Elimina cualquier referencia a contraseñas de prueba antes de lanzar un sitio web.
Usa variables de entorno para información sensible.
Implementa auditorías de código regulares antes de publicar.
Aplica principios de seguridad por diseño.

Consejo para analistas de ciberseguridad Si estás evaluando la seguridad de una aplicación web, siempre revisa el código fuente del navegador. Muchos errores graves pueden descubrirse con solo presionar CTRL + U.

HTML Injection: La vulnerabilidad silenciosa del lado del cliente

Uno de los errores más comunes en el desarrollo web es confiar en lo que el usuario escribe. Este fallo puede abrir la puerta a un tipo de ataque llamado HTML Injection, en el cual un atacante puede alterar la estructura o el contenido de una página web simplemente enviando código HTML a través de un formulario o campo de texto.

¿Qué es HTML Injection?

La inyección HTML ocurre cuando un sitio web no filtra ni limpia el texto que el usuario introduce, y luego lo muestra directamente en la página. Al no haber una validación o sanitización del input, el navegador interpreta ese texto como si fuera parte del código del sitio.

Ejemplo práctico del ataque

El usuario escribe su nombre en un campo de texto (por ejemplo: Juan Carlos).
Una función JavaScript toma ese valor e imprime: Welcome Juan Carlos.
Pero si en lugar del nombre se escribe <h1>CyberSec4You.com</h1>, el navegador interpretará esa etiqueta HTML. Por otro lado, en vez de inyectar una etiqueta <h1> inyectas la siguiente: <a ref=»http://cibercriminal.com»> Haz clic aquí</a>, el navegador interpretará ese HTML como un enlace real. Resultado: aparece un link malicioso en la web, inyectado por el propio usuario.

Veamos el código vulnerable que permite HTML Injection:

Este fragmento es vulnerable porque imprime el contenido directamente en el DOM, sin ningún tipo de validación. El navegador no distingue si ese «nombre» es texto plano o código HTML.

¿Por qué es peligroso?

Puede insertar enlaces maliciosos que redirijan al usuario.
Puede usarse como punto de partida para ataques XSS (Cross-site Scripting).
Puede alterar la interfaz del sitio o romper su funcionalidad.

Buenas prácticas para prevenir HTML Injection

Nunca confíes en lo que el usuario introduce.
Evita el ingreso de caracteres especiales (<, >, » y ‘) usando funciones de sanitización.
Usa textContent en lugar de innerHTML cuando no necesitas interpretar HTML:

Implementa un framework de seguridad que maneje estas validaciones automáticamente.

Conclusiones generales:

HTML es la estructura base de cualquier sitio web.
Nos permite definir títulos, párrafos, botones, imágenes y mucho más. Aunque no ejecuta código como tal, su correcta organización es fundamental para la accesibilidad, funcionalidad y seguridad de un sitio.
JavaScript aporta interactividad y dinamismo.
Gracias a JS, podemos responder a eventos del usuario como clics, movimientos del mouse o entradas de texto. Sin embargo, un uso descuidado de funciones como innerHTML puede convertirse en una vulnerabilidad si se inyecta código malicioso.
HTML Injection es un riesgo real cuando no se valida la entrada del usuario.
Mostrar directamente lo que un usuario escribe dentro del código HTML sin filtros puede permitir a un atacante insertar etiquetas o incluso scripts. Esto puede llevar a ataques más peligrosos como el XSS (Cross-site Scripting).
Nunca debes exponer datos sensibles en el código fuente.
Información como contraseñas, tokens, rutas ocultas o notas internas no deben quedar en el HTML, ni siquiera en los comentarios. Los navegadores permiten a cualquier usuario inspeccionar el código con facilidad (Ctrl + U o F12), y un atacante lo hará sin dudarlo.
DOM (Docuement Object Model) El DOM es la estructura viva del HTML que el navegador construye. JavaScript puede modificarla en tiempo real, lo cual permite sitios dinámicos, pero también representa un punto crítico donde pueden introducirse vulnerabilidades si no se controla lo que se inserta.

Recomendaciones extra:

Valida y filtra cualquier entrada del usuario antes de mostrarla en la página.
Usa textContent o value en lugar de innerHTML si solo necesitas mostrar texto sin interpretación de etiquetas.
No confíes nunca en el frontend para la seguridad. Cualquier lógica crítica debe validarse también en el servidor (backend).
Audita tu sitio regularmente para buscar información expuesta accidentalmente o comportamiento inesperado.
Si trabajas con formularios, busca prevenir ataques como inyección SQL o XSS, incluso en ambientes de pruebas.