¿Cómo funciona la política de origen cruzado (CORS)?

 ¿Cómo funciona la política de origen cruzado (CORS)?

¡Claro! La Política de Origen Cruzado (CORS) es un mecanismo de seguridad fundamental que todos los navegadores web modernos tienen implementado. Es un conjunto de reglas que le dice a un navegador si una página web puede solicitar recursos (como datos, imágenes, o archivos) de un dominio diferente al que la página se encuentra.

Para entender cómo funciona, imagina el navegador como un guardia de seguridad muy estricto y los dominios como edificios separados.

---

La Política por Defecto: Mismo Origen

La regla de seguridad principal se llama Política del Mismo Origen. El navegador asume, por defecto, que una página web solo puede hacer peticiones a recursos que se encuentran en el mismo origen (protocolo, dominio y puerto).

• Mismo Origen: https://mi-tienda.com puede solicitar datos de https://mi-tienda.com/api/productos.

• Origen Cruzado: https://mi-tienda.com no puede solicitar datos de https://otro-dominio.com/api/usuarios sin un permiso explícito. .

La razón de esta estricta regla es la seguridad. Si no existiera, una página web maliciosa podría, por ejemplo, cargar una página de tu banco y robar tus datos sin que te dieras cuenta.

---

El Mecanismo de Permiso: CORS

Para permitir peticiones de origen cruzado de manera segura, se utiliza el protocolo CORS. Este funciona a través de un intercambio de información entre el navegador y el servidor.

1. Solicitud del navegador: Cuando una página web intenta hacer una petición a un origen diferente, el navegador añade una cabecera HTTP especial en la petición. Esta cabecera, llamada Origin, le dice al servidor cuál es el dominio que está haciendo la solicitud.

2. Respuesta del servidor: El servidor recibe la petición y, si decide que es segura y que quiere permitirla, debe incluir en su respuesta una cabecera llamada Access-Control-Allow-Origin.

3. Verificación del navegador: El navegador lee la respuesta del servidor. Si el valor de la cabecera Access-Control-Allow-Origin coincide con el origen de la página que hizo la petición, el navegador permite que la aplicación acceda a los datos. Si no hay una coincidencia (o si la cabecera no está presente), el navegador bloquea la petición, y en la consola verás un error de CORS.

---

Ejemplo de Flujo

Supongamos que tu página en https://mi-tienda.com necesita obtener la lista de usuarios de una API en https://api.usuarios.com.

• Petición: Tu navegador envía una petición a https://api.usuarios.com con la cabecera Origin: https://mi-tienda.com.

• Servidor de la API: La API en https://api.usuarios.com recibe la petición y, si ha sido configurada para permitir el acceso, responde con la cabecera Access-Control-Allow-Origin: https://mi-tienda.com.

• Navegador: Tu navegador verifica que la cabecera de la respuesta coincide con el origen de tu página. Como es así, permite que el script de tu página procese los datos de la API.

En resumen, CORS es un sistema de "permiso" que garantiza que los servidores solo compartan sus recursos con los dominios en los que confían. Es una capa de seguridad crucial que protege la privacidad de los usuarios y la integridad de los datos en la web.