Stranger Things y CORS: Cómo Superar las Restricciones de Origen Cruzado 🚧

Fri Nov 08 2024

Desarrollo

¡Hola Chiquis!👋🏻 hoy vamos a tratar el tema: CORS (Cross-Origin Resource Sharing) que es un mecanismo que permite que los recursos de una página web sean solicitados desde otro dominio distinto al que los sirve. Para entender mejor cómo funciona CORS, vamos a visitar el mundo de Stranger Things y ver cómo los personajes y sus aventuras en Hawkins y el Upside Down pueden ayudarnos a comprender este concepto.

CORS: El Demogorgon de las Peticiones Web 🕷️ En la serie “Stranger Things”, el Demogorgon es una criatura del Upside Down que amenaza a los habitantes de Hawkins. De manera similar, en el mundo del desarrollo web, CORS puede ser un verdadero “Demogorgon” que impide que tus aplicaciones web se comuniquen correctamente. Pero, ¿qué es exactamente CORS y cómo podemos derrotarlo?

¿Qué es CORS? 🗝️ CORS es un mecanismo de seguridad que los navegadores utilizan para restringir las solicitudes que una página web puede realizar a un servidor diferente. Es como una especie de “muro de fuego” que protege tu sitio web de ataques maliciosos. Sin embargo, este muro también puede impedir que tu aplicación funcione correctamente si no se configura correctamente.

Imagina que Hawkins es tu dominio principal (por ejemplo, example.com) y el Upside Down es otro dominio (por ejemplo, another-domain.com). Normalmente, los habitantes de Hawkins no pueden acceder al Upside Down directamente debido a las barreras entre los dos mundos. De manera similar, los navegadores web bloquean las solicitudes de recursos entre diferentes dominios por razones de seguridad.

En otras palabras, tu aplicación web es Hawkins y otro servidor es el Upside Down. CORS es la barrera dimensional que separa ambos mundos. Para que tus personajes (javascript, etc.) puedan interactuar con el Upside Down (otro servidor), necesitas un permiso especial, una especie de “llave” que abra la puerta.

¿Por qué Necesitamos CORS? 🔐

Seguridad: Evita que sitios maliciosos accedan a datos sensibles de tu aplicación.
Privacidad: Protege la información de los usuarios al restringir el acceso a recursos sensibles.

¿Cómo Funciona CORS? 🚪 Cuando tu navegador envía una solicitud a un servidor diferente, incluye una cabecera llamada “Origin” que indica de dónde proviene la solicitud. El servidor, a su vez, puede responder con cabeceras CORS que permiten o deniegan el acceso.

El Portal: La Puerta de Entrada: En la serie, el portal entre Hawkins y el Upside Down es la clave para que los personajes puedan viajar entre los dos mundos. En términos de CORS, el servidor del dominio another-domain.com debe abrir un “portal” permitiendo que las solicitudes de example.com accedan a sus recursos. Ejemplo:

// Configuración del servidor en another-domain.com para permitir CORS
const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.get('/data', (req, res) => {
    res.json({ message: 'Hola desde el Upside Down!' });
});

app.listen(3000, () => {
    console.log('Servidor escuchando en el puerto 3000');
});

Las Reglas de CORS: Las Normas de Hopper: El jefe de policía Jim Hopper establece reglas estrictas para proteger a los habitantes de Hawkins. De manera similar, CORS tiene reglas específicas que los servidores deben seguir para permitir el acceso entre dominios de manera segura. Ejemplo:

Access-Control-Allow-Origin: Especifica qué dominios pueden acceder a los recursos.
Access-Control-Allow-Methods: Indica qué métodos HTTP (GET, POST, etc.) están permitidos.
Access-Control-Allow-Headers: Define qué encabezados pueden ser utilizados en la solicitud.

// Respuesta del servidor con encabezados CORS
res.header('Access-Control-Allow-Origin', 'http://example.com');
res.header('Access-Control-Allow-Methods', 'GET, POST');
res.header('Access-Control-Allow-Headers', 'Content-Type');

Preflight Requests: Las Misiones de Exploración de Eleven: Antes de que Eleven entre al Upside Down, a menudo realiza misiones de exploración para asegurarse de que es seguro. En CORS, los navegadores envían una solicitud preliminar (preflight request) para verificar si el servidor permite la solicitud real. Ejemplo:

// Manejo de solicitudes preflight en el servidor
app.options('/data', (req, res) => {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.sendStatus(204); // No Content
});

Errores CORS: Los Peligros del Upside Down: Si los personajes no siguen las reglas o no están preparados, enfrentan peligros en el Upside Down. De manera similar, si las configuraciones de CORS no son correctas, los navegadores bloquearán las solicitudes y se producirán errores. Ejemplo:

// Error CORS en el navegador
fetch('http://another-domain.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error CORS:', error));

Cómo Resolver los Problemas de CORS 🔓

Configurar el Servidor: El servidor debe enviar las cabeceras CORS correctas para permitir las solicitudes desde tu aplicación.
Utilizar Proxies: Un proxy puede actuar como intermediario entre tu aplicación y el servidor remoto, permitiendo que la solicitud se realice como si proviniera del mismo dominio.
CORS Anywhere: Una herramienta que te permite configurar un proxy de forma sencilla.

Los Diferentes Resultados de una Petición CORS 🛑

Permitido: El servidor envía las cabeceras CORS correctas y el navegador permite la solicitud. Es como cuando los personajes de Stranger Things encuentran una manera de comunicarse con el Upside Down.
Bloqueado: El servidor no envía las cabeceras CORS correctas o las incluye de forma incorrecta. El navegador bloquea la solicitud, como si el Demogorgón estuviera atacando.
Prevuelo (Preflight): Para solicitudes más complejas, el navegador envía una petición previa (OPTIONS) para verificar si el servidor permitirá la solicitud real.

Conclusión ⛔ CORS es un mecanismo esencial para la seguridad en la web, permitiendo que los recursos sean compartidos entre diferentes dominios de manera controlada. Al igual que los personajes de Stranger Things deben seguir reglas y abrir portales para viajar entre Hawkins y el Upside Down, los desarrolladores deben configurar correctamente los encabezados CORS para permitir el acceso entre dominios.

¡Recuerda! Al igual que los habitantes de Hawkins aprendieron a convivir con el Upside Down, tú puedes aprender a dominar CORS y hacer que tus aplicaciones web funcionen sin problemas. CORS puede ser un obstáculo si no se configura correctamente. Al comprender cómo funciona CORS y cómo resolver los problemas relacionados, podrás construir aplicaciones web más seguras y robustas.

¡Gracias por leer y déjame tus comentarios! 👇🏻

🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible

Stranger Things y CORS: Cómo Superar las Restricciones de Origen Cruzado 🚧

https://my-million-friend-blog.vercel.app/blog/post-147/