2.16 Rutas Absolutas Vs Rutas Relativas

1. El Contexto: Un Documento HTML Básico#

Todo sitio web se compone de archivos. El navegador empieza leyendo un archivo HTML, que actúa como el esqueleto de la página. Este archivo HTML a menudo necesita “llamar” a otros archivos: otras páginas, imágenes, hojas de estilo (CSS) o scripts (JavaScript).

Un ejemplo de HTML básico podría ser este:

1
<html>
2
    <head>
3
        <title>demo</title>
4
    </head>
5
    <body>
6
        <h1>sample</h1>
7
        <p>
8
            ...
9
        </p>
10
        <A href = "demp2.html" </A>
11
    </body>
12
</html>

La forma en que “llamamos” a esos otros archivos es a través de rutas. Entender la diferencia entre rutas relativas y absolutas es fundamental.

2. Rutas Relativas: La Ubicación “en Relación a”#

Una ruta relativa especifica la ubicación de un archivo basándose en la ubicación del archivo actual (el que la está llamando).

Si tu archivo demo.html se carga desde http://localhost/demo.html, y dentro de él tienes estos enlaces:

1
...
2
<A href = "demp2.html">Enlace a Demo 2</A>
3

4
<A href = "imgs/logo.png">Ver logo</A>
5
...

El navegador interpretará href="demp2.html" como http://localhost/demp2.html.
Interpretará href="imgs/logo.png" como http://localhost/imgs/logo.png.

¿Dónde “viven” estos archivos? En un servidor web (como Nginx o Apache), hay un directorio raíz. El servidor está configurado en /etc/nginx/nginx.conf para que la URL http://localhost/ apunte al directorio /var/ngnix/html (probablemente /var/nginx/html).

http://localhost/demo.html corresponde a /var/nginx/html/demo.html.
http://localhost/imgs/logo.png corresponde a /var/nginx/html/imgs/logo.png.

Para “subir” de directorio, se usa ../. Por ejemplo, ../../documentos/archivo.pdf subiría dos niveles de directorio y luego entraría a la carpeta documentos.

3. Rutas Absolutas: La Dirección Completa#

Una ruta absoluta es la dirección URL completa y específica de un recurso. No importa dónde esté el archivo HTML que la llama; la ruta absoluta siempre apunta al mismo lugar.

1
...
2
<img src = "http://localhost/imgs/logo.png">
3
...

(Nota: El código original tenía http/ y </A>, lo cual es un error tipográfico. Se corrige a http:// y > para la etiqueta <img>).

Comúnmente, se usan rutas absolutas para llamar recursos que no están en nuestro propio servidor (por ejemplo, una fuente de Google, un video de YouTube o una librería de código). Sin embargo, también pueden apuntar a tu propio servidor, como en el ejemplo localhost.

4. La Importancia del CSS Externo#

En lugar de poner estilos (colores, fuentes, tamaños) directamente en el HTML, es una práctica estándar usar un archivo CSS externo.

1
<link rel="stylesheet" href="estilos/principal.css">

Ventajas:

Mantenibilidad: Si tienes 50 archivos HTML y quieres cambiar el color de los títulos, solo modificas principal.css una vez, en lugar de editar 50 archivos.
Rendimiento: El navegador descarga principal.css una sola vez. Cuando navegas a otra página del sitio que usa el mismo CSS, el navegador lo carga desde su caché (memoria local), haciendo que la página cargue mucho más rápido.

5. Depuración: ¿Por Qué No se ve mi Imagen o Icono?#

A veces, las cosas fallan. Un error tipográfico en una ruta (img/logo.png en lugar de imgs/logo.png) no mostrará un error en la página, simplemente la imagen no cargará.

El Caché del Navegador#

Un problema común es el caché. El navegador guarda copias locales de imágenes, CSS y, notablemente, el favicon (el ícono que aparece en la pestaña del navegador).

Si cambias el archivo favicon.ico en tu servidor, es posible que el navegador no muestre el nuevo, porque sigue usando la versión antigua que tiene guardada en el caché. El navegador “no vuelve a buscar si en un inicio no lo encuentra” (o si ya lo tiene guardado).

Soluciones:

En Desarrollo: Puedes usar las “Herramientas de Desarrollo” de tu navegador (como Firefox Developer Tools) y, en la pestaña “Red” (Network), marcar la opción “Deshabilitar caché” (no cache).
Prueba Rápida: Abre la URL directa de la imagen (http://localhost/imgs/logo.png) en una nueva pestaña o haz una recarga forzada (Ctrl+Shift+R) para obligar al navegador a descargarla de nuevo.
En Producción: Los frameworks modernos suelen manejar esto automáticamente, a veces agregando una “versión” al nombre del archivo (ej. principal-v1.2.3.css) para forzar al navegador a descargar la nueva versión.

Herramientas de Desarrollo#

Las herramientas de desarrollador son esenciales. En la pestaña “Red” (Network), puedes ver cada solicitud que hace tu página:

Un código 200 significa que el recurso (HTML, CSS, imagen) se encontró y cargó correctamente.
Un código 404 significa “No Encontrado”. Esto te dice inmediatamente que tu ruta (href o src) está mal escrita o apunta a un lugar incorrecto.

6. Riesgos de Seguridad en las Rutas#

Las rutas, especialmente las absolutas que apuntan a servidores externos, tienen implicaciones de seguridad.

Confiar en Terceros#

Si incluyes un script de un servidor externo: <script src="http://una-libreria-externa.com/codigo.js"></script>

Estás confiando ciegamente en una-libreria-externa.com. Si ese servidor es hackeado, un atacante podría modificar codigo.js y agregar 10 líneas de JavaScript malicioso. Ese código se ejecutaría en tu página y podría robar las credenciales (nombres de usuario, contraseñas, cookies de sesión) de tus usuarios y enviarlas al servidor del atacante.

Tip: Siempre usa las herramientas de desarrollo para “ver qué baja, dónde baja y dónde envía” tu aplicación.

Ataque “Man-in-the-Middle” y Envenenamiento de `hosts`#

Este es un riesgo más avanzado. Supongamos que tu HTML llama a un recurso en http://localhost2/demo.js.

Un malware en una computadora (especialmente un Windows sin parches) puede modificar el archivo hosts del sistema.
Este archivo hosts le dice al sistema operativo a qué dirección IP corresponde un nombre de dominio antes de que consulte a Internet.
El atacante podría agregar una línea como: 192.168.1.100 localhost2, donde 192.168.1.100 es la IP del servidor del atacante.
Cuando tu navegador intente cargar http://localhost2/demo.js, tu computadora lo traducirá a la IP del atacante.
El atacante te envía un archivo demo.js falso y malicioso, robando tus datos.

Herramientas como Flipper pueden actuar como un “proxy” que intercepta el tráfico web, analiza el HTML sobre la marcha y puede cambiar las URLs legítimas por otras maliciosas para robar credenciales.

Mitigaciones#

Usar HTTPS: La encriptación (SSL/TLS, no SSH que es para terminal) es crucial. HTTPS evita que un atacante en medio de la comunicación (Man-in-the-Middle) pueda leer o modificar el tráfico.
Manejo de Sesiones Seguro: Implementar medidas de seguridad en las sesiones (ej. cookies HttpOnly) para que no sean fácilmente accesibles por scripts.
Consolidación: Mantener todos los recursos críticos en tu propio servidor (cuando sea posible) reduce la superficie de ataque.

7. Glosario de Términos#

Ruta Relativa: Una ruta a un archivo basada en la ubicación del archivo actual. (Ej: imgs/logo.png).
Ruta Absoluta: La URL completa y específica de un recurso. (Ej: http://localhost/imgs/logo.png).
localhost: Un nombre de dominio estándar que significa “esta misma computadora”. Se usa para probar servidores web localmente.
Nginx: Un software popular de servidor web, rápido y eficiente.
Favicon: El pequeño icono que representa un sitio web en la pestaña del navegador.
Caché (Cache): Una memoria temporal donde el navegador almacena archivos (imágenes, CSS) para no tener que volver a descargarlos y así cargar las páginas más rápido.
CSS (Cascading Style Sheets): El lenguaje usado para dar estilo (diseño, colores, fuentes) a los documentos HTML.
Framework: Un conjunto de herramientas y librerías que facilitan el desarrollo de software (Ej. React, Angular, o Ruby on Rails).
Archivo hosts: Un archivo del sistema operativo que asigna manualmente nombres de dominio (como google.com) a direcciones IP.
Man-in-the-Middle (MITM): Un tipo de ciberataque donde el atacante se posiciona entre el usuario y el servidor para interceptar o modificar la comunicación.
HTTPS (Hypertext Transfer Protocol Secure): La versión segura de HTTP, que utiliza encriptación SSL/TLS para proteger la comunicación.
DHH (David Heinemeier Hansson): Creador del framework Ruby on Rails. Conocido por su filosofía empresarial de vender productos como servicio (SaaS).
FreeBSD: Un sistema operativo de tipo Unix, conocido por su estabilidad y rendimiento, a menudo usado en servidores.