Cómo un navegador muestra una página web
Una página web no se muestra tal cual en el momento en que introduces una URL en el navegador.
En realidad ocurre una secuencia: interpretar la URL, obtener una dirección IP mediante DNS, conectarse al servidor, establecer una conexión segura mediante HTTPS, enviar una solicitud HTTP, recibir una respuesta del servidor y renderizar en el navegador.
Sin embargo, no todos los procesos empiezan necesariamente desde cero cada vez. Los resultados DNS pueden estar en caché, puede reutilizarse una conexión existente o pueden cargarse datos desde la caché del navegador.
Este artículo evita profundizar demasiado en especificaciones detalladas y ordena lo que ocurre antes de que se muestre una página web, siguiendo el flujo real de comunicación.
Qué ocurre después de introducir una URL
Por ejemplo, supón que introduces la cadena "https[:]//example.com" en la barra de direcciones del navegador.
El navegador primero comprueba la cadena introducida.
Determina si es una palabra de búsqueda o una URL de sitio web, y si es una URL, interpreta el destino.
Una URL contiene principalmente los siguientes tipos de información.
| Elemento | Ejemplo | Significado |
|---|---|---|
| Esquema | https | Muestra qué método se usa para la comunicación |
| Nombre de host | example.com | Muestra el nombre del sitio web al que quieres conectarte |
| Número de puerto | 443 | Muestra a qué extremo de comunicación conectarse. A menudo se omite |
| Ruta | /about | Muestra qué ubicación del servidor se está solicitando |
| Cadena de consulta | ?id=10 | Pasa información adicional al servidor |
| Fragmento | #section | Muestra una posición dentro de la página. Normalmente no se envía al servidor |
Una URL es una forma que facilita a las personas especificar un sitio web.
Sin embargo, al buscar el servidor con el que comunicarse en una red, finalmente hace falta una dirección IP.
Por eso, el navegador procede a buscar la dirección IP a partir del nombre de host.
Buscar la dirección IP con DNS
El navegador no puede conectarse a un servidor solo con el nombre "example.com."
DNS es el mecanismo usado para esto.
DNS relaciona nombres de dominio con direcciones IP.
El navegador o el sistema operativo comprueba primero si quedan resultados DNS localmente. Si accediste al mismo dominio en el pasado, puede ser posible obtener la dirección IP desde la caché DNS.
Si no hay información en la caché, consulta a un resolver DNS. El resolver DNS busca la dirección IP correspondiente al nombre de dominio objetivo, consultando varios servidores DNS cuando hace falta.
| Paso | Qué ocurre | Finalidad |
|---|---|---|
| 1 | El navegador o sistema operativo comprueba la caché | Comprobar si puede reutilizarse una dirección IP buscada antes |
| 2 | Consulta al resolver DNS | Buscar la dirección IP correspondiente al nombre de dominio |
| 3 | Obtener un registro A o AAAA | Obtener el destino IPv4 o IPv6 |
| 4 | Decidir el destino usando la dirección IP | Identificar la contraparte real de comunicación |
La dirección IP obtenida aquí no necesariamente es fija.
Incluso para el mismo nombre de dominio, pueden devolverse direcciones IP distintas según región, configuración DNS, balanceo de carga, CDN y otros factores.
Conectarse al servidor
Una vez conocida la dirección IP, el navegador se conecta al servidor que tiene esa dirección IP.
En comunicación web, no solo importa la dirección IP de destino, sino también el número de puerto.
Normalmente, HTTP usa el puerto 80 y HTTPS usa el puerto 443.
| Método de comunicación | Número de puerto principal | Significado |
|---|---|---|
| HTTP | 80 | Se usa a menudo para comunicación web no cifrada |
| HTTPS | 443 | Se usa a menudo para comunicación web protegida por TLS |
Con HTTP/1.1 y HTTP/2, normalmente se usa TCP para conexiones con servidores.
En cambio, HTTP/3 usa un mecanismo llamado QUIC, que funciona sobre UDP.
Este artículo no entra en detalles de HTTP/2 o HTTP/3, pero el punto importante es que el navegador usa una dirección IP y un número de puerto para crear una conexión con el servidor.
Además, no necesariamente se crea una conexión nueva cada vez. Si ya queda una conexión con el mismo servidor, el navegador puede reutilizarla.
Crear una conexión segura con HTTPS
Si la URL empieza con "https", el navegador se comunica con el servidor usando HTTPS.
HTTPS es comunicación en la que HTTP está protegido por TLS.
TLS tiene principalmente los siguientes roles.
| Rol | Significado | Importancia |
|---|---|---|
| Cifrado | Hace que el contenido de comunicación sea más difícil de leer para terceros | Protege contraseñas y contenido de página |
| Detección de alteración | Comprueba si el contenido cambió durante la comunicación | Facilita prevenir modificaciones por una persona atacante intermediaria |
| Verificación de identidad del servidor | Comprueba si el destino es el servidor del dominio previsto | Ayuda a defenderse de sitios falsos y ataques de intermediario |
El punto importante aquí es que HTTPS no es simplemente "un mecanismo que cifra la comunicación".
El navegador comprueba el certificado presentado por el servidor y verifica si ese certificado es válido para el nombre de dominio al que se accede.
Mediante esta comprobación, el navegador puede juzgar que "el servidor al que estoy conectado probablemente es el servidor previsto".
Sin embargo, incluso cuando se usa HTTPS, no toda la información sobre la comunicación queda oculta.
Por ejemplo, la dirección IP de destino, el momento en que ocurre la comunicación y la cantidad de comunicación no son cosas que HTTPS por sí solo pueda ocultar por completo.
Además, según el entorno, información sobre el nombre de dominio de destino puede ser visible a lo largo de la ruta de red.
En otras palabras, HTTPS es muy importante para proteger el contenido de comunicación y verificar a la otra parte, pero no es un mecanismo que garantice plenamente el anonimato.
Solicitar una página con HTTP/HTTPS
Una vez creada una conexión segura, el navegador solicita la página al servidor.
Esta solicitud se llama solicitud HTTP.
Con HTTPS, el contenido de la solicitud HTTP se envía protegido por TLS.
Por ejemplo, el navegador puede enviar al servidor los siguientes tipos de información.
| Información | Significado | Nota |
|---|---|---|
| Método | Qué operación quiere realizar | GET se usa a menudo para recuperar páginas |
| Ruta | Qué página o datos quiere | Como / o /about |
| Host | Para qué dominio es la solicitud | También se usa cuando varios sitios son manejados por una IP |
| User-Agent | Información como navegador y sistema operativo | Usado para detección de entorno y ajuste de visualización |
| Accept-Language | Idioma preferido | Usado para decisiones como mostrar páginas en japonés |
| Referer | Si se envía la página de referencia | Puede no enviarse según ajustes o especificaciones |
| Información identificativa almacenada para el sitio | Usada para mantener estado de inicio de sesión y ajustes |
El servidor mira esta solicitud y decide qué datos devolver.
Incluso al acceder a la misma URL, el contenido devuelto puede cambiar según estado de inicio de sesión, cookies, ajustes de idioma, tipo de dispositivo y otros factores.
El servidor devuelve datos
Después de recibir una solicitud del navegador, el servidor devuelve una respuesta HTTP.
Una respuesta HTTP incluye código de estado, encabezados, cuerpo y otras partes.
| Elemento | Ejemplo | Significado |
|---|---|---|
| Código de estado | 200 | Muestra si la solicitud tuvo éxito, si hubo un error e información similar |
| Encabezado | Content-Type | Muestra el tipo de datos, política de caché e información similar |
| Cuerpo | HTML y datos similares | Los datos reales usados por el navegador |
HTML es central en una página web, pero HTML por sí solo no necesariamente completa toda la página.
Muchas páginas web se muestran combinando varios tipos de datos.
| Datos | Rol |
|---|---|
| HTML | Representa la estructura de la página |
| CSS | Especifica apariencia como colores, espacios, diseño y tamaño de texto |
| JavaScript | Realiza procesamiento y cambios dinámicos en la página |
| Imágenes | Muestra fotos, iconos, diagramas y contenido similar |
| Fuentes | Ajusta cómo se ve el texto |
| Video y audio | Reproduce contenido multimedia |
El navegador primero recibe HTML, y luego obtiene además CSS, JavaScript, imágenes, fuentes y otros recursos especificados en ese HTML.
Por eso, incluso abrir una sola página web a menudo causa varias solicitudes HTTP en la práctica.
El navegador lo muestra en pantalla
Cuando el navegador recibe datos del servidor, convierte esos datos en una forma que puede mostrarse en pantalla.
En términos generales, ocurren los siguientes tipos de procesamiento.
| Paso | Qué ocurre |
|---|---|
| Analizar HTML | Leer la estructura de la página |
| Aplicar CSS | Reflejar reglas de apariencia |
| Calcular diseño | Decidir dónde se coloca cada elemento |
| Pintar | Mostrar texto, imágenes, fondos y contenido similar en pantalla |
| Ejecutar JavaScript | Cambiar contenido o comportamiento de la página según sea necesario |
El punto que hay que entender aquí es que el navegador no recibe una pantalla terminada desde el servidor.
El servidor devuelve materiales como HTML, CSS, JavaScript e imágenes.
El navegador los interpreta y ensambla la página según su propio tamaño de pantalla, ajustes y funciones soportadas.
Por eso, incluso la misma página web puede mostrarse de forma distinta según PC, smartphone, tipo de navegador, ancho de pantalla y ajustes.
Una página puede causar varias comunicaciones
Un punto importante en la visualización de páginas web es que, aunque abras una página, no necesariamente hay un solo destino de comunicación.
Aunque el cuerpo de la página se obtenga desde "example.com", imágenes, anuncios, analíticas, fuentes externas, scripts externos y recursos similares pueden cargarse desde otros dominios.
| Destino de comunicación | Finalidad | Ejemplo |
|---|---|---|
| Servidor del cuerpo de la página | Obtener HTML | Texto del cuerpo y estructura de página |
| Servidor de entrega de imágenes | Obtener imágenes | Imágenes de artículos e iconos |
| Servidor de publicidad | Mostrar anuncios | Banners y scripts publicitarios |
| Servidor de analíticas | Medir estado de acceso | Etiquetas de analíticas |
| Servidor de fuentes externas | Cargar fuentes | Fuentes web |
| Servidor de scripts externos | Añadir funcionalidad | Widgets incrustados y partes de interfaz |
Desde la vista de la persona usuaria, puede parecer que solo "abrió una página", pero detrás de escena el navegador puede estar comunicándose con varios servidores.
También puede ocurrir comunicación adicional no solo inmediatamente después de abrir la página, sino también en respuesta al desplazamiento, operaciones de botones, búsquedas, entrada de formularios, reproducción de video y acciones similares.
En páginas web recientes también son comunes los diseños que cargan inicialmente solo los datos mínimos y obtienen datos adicionales en respuesta a acciones de la persona usuaria.
La comunicación puede omitirse por cachés
Al mostrar una página web, el navegador no necesariamente obtiene todos los datos del servidor cada vez.
El navegador puede almacenar temporalmente imágenes, CSS, JavaScript y otros datos obtenidos en el pasado.
Esto se llama caché.
Cuando la caché es válida, el navegador puede usar datos almacenados dentro del dispositivo sin obtener de nuevo los mismos datos del servidor.
| Objetivo | Efecto de la caché |
|---|---|
| Resultados DNS | Reduce la necesidad de buscar de nuevo la dirección IP a partir del nombre de dominio |
| Imágenes | Evita descargar la misma imagen muchas veces |
| CSS | Reutiliza archivos relacionados con la apariencia de la página |
| JavaScript | Usa el mismo script sin volver a obtenerlo |
| Conexión | Pueden reutilizarse conexiones existentes |
Las cachés son importantes para aumentar la velocidad de visualización y reducir el volumen de comunicación.
Sin embargo, al pensar en anonimato y privacidad, también es necesario prestar atención a información que permanece dentro del navegador, como cachés y cookies.
Perspectivas importantes para pensar el anonimato
Al pensar en anonimato, es importante que abrir una página web no es una comunicación simple de una sola vez.
En el acceso web intervienen varios elementos, incluidos DNS, direcciones IP, HTTPS, cookies, User-Agent, Referer, scripts externos y cachés.
Aunque el contenido de comunicación esté protegido por HTTPS, la dirección IP de destino, el momento de comunicación, el volumen de comunicación, los encabezados enviados por el navegador, la identificación mediante cookies y la comunicación adicional con servidores externos se vuelven problemas desde otras perspectivas.
| Perspectiva | Qué comprobar |
|---|---|
| DNS | Qué nombre de dominio se consultó |
| Dirección IP | A qué servidor se conectó |
| HTTPS | Si se realiza cifrado del contenido de comunicación, detección de alteración y verificación de identidad del servidor |
| Cookie | Si la persona usuaria puede identificarse como la misma |
| User-Agent | Si se envía información de entorno como navegador y sistema operativo |
| Referer | Si se comunica la página desde la que vino la persona usuaria |
| Comunicación externa | Si también ocurre comunicación con servidores distintos del cuerpo de la página |
| Caché | Si navegación pasada o datos obtenidos permanecen dentro del dispositivo |
Especialmente importante es que "el contenido de comunicación está cifrado" y "nadie puede saber quién accedió a dónde" no son lo mismo.
HTTPS es muy importante para proteger el contenido de comunicación y verificar la identidad del servidor al que te conectas.
Sin embargo, al pensar en anonimato, hay que mirar por separado no solo HTTPS, sino también DNS, direcciones IP, información enviada por el navegador, cookies, comunicación externa y otros factores.
Resumen
Antes de que un navegador muestre una página web, ocurren varios procesos paso a paso.
Primero, el navegador interpreta la URL introducida y comprueba el nombre de host.
Después se usa DNS para buscar la dirección IP correspondiente al nombre de host.
Una vez conocida la dirección IP, el navegador se conecta al servidor.
En HTTPS, TLS realiza cifrado, detección de alteración y verificación de identidad del servidor, creando una conexión segura.
Sobre esa base, el navegador envía una solicitud HTTP, y el servidor devuelve datos como HTML, CSS, JavaScript e imágenes.
El navegador analiza los datos recibidos y los muestra en pantalla.
Además, mientras se muestra una página, puede ocurrir comunicación adicional mediante imágenes, anuncios, etiquetas de analíticas, fuentes externas, scripts externos y recursos similares.
Abrir una página web implica más comunicación y procesamiento de lo que parece desde fuera.
Entender este flujo facilita ordenar no solo la estructura básica de la web, sino también los puntos que examinar al pensar en anonimato y privacidad.
Herramientas relacionadas
DNSLeakTest
Recurso externo relacionado con este artículo. Ábrelo solo si encaja con tu situación y tu modelo de amenaza.
Por qué aparece aquí: Puede ayudar con el tema del artículo, pero está fuera de Anonymity Sense y conviene revisarlo antes de usarlo.
BrowserLeaks WebRTC
Recurso externo relacionado con este artículo. Ábrelo solo si encaja con tu situación y tu modelo de amenaza.
Por qué aparece aquí: Puede ayudar con el tema del artículo, pero está fuera de Anonymity Sense y conviene revisarlo antes de usarlo.