CORS: Qué es y cómo funciona el Cross-Origin Resource Sharing

El acrónimo CORS significa “Cross-Origin Resource Sharing” (Compartir Recursos entre Orígenes Cruzados). Es un mecanismo de seguridad implementado por los navegadores web para permitir que los recursos de una página web sean solicitados desde otro dominio que no sea el dominio desde el cual se originó la propia página. Esto es importante para permitir la comunicación entre diferentes dominios de manera segura y controlada, evitando posibles ataques de seguridad como el secuestro de sesión o la exposición de datos sensibles.

Cuando un navegador solicita recursos (como scripts, estilos, imágenes, etc.) desde un dominio diferente al dominio de la página actual, primero realiza una solicitud preliminar al servidor para determinar si el recurso solicitado puede ser compartido. El servidor, a su vez, responde indicando si permite o no el acceso a los recursos desde ese origen específico.

Un ejemplo común de CORS se da cuando una aplicación web alojada en un dominio “example.com” intenta hacer una solicitud AJAX a un servidor en un dominio diferente, como “api.exampleapi.com”. Si el servidor de la API no tiene habilitado CORS para permitir solicitudes desde “example.com”, el navegador bloqueará la solicitud y generará un error de CORS.

Para habilitar CORS en un servidor Apache, se pueden configurar las cabeceras HTTP adecuadas. Aquí tienes un ejemplo de cómo hacerlo en un archivo .htaccess:

Header set Access-Control-Allow-Origin “*”
Header set Access-Control-Allow-Methods “GET, POST, OPTIONS”
Header set Access-Control-Allow-Headers “Origin, X-Requested-With, Content-Type, Accept”

Este ejemplo habilita CORS para todos los orígenes (Access-Control-Allow-Origin “*”), permite los métodos GET, POST y OPTIONS (Access-Control-Allow-Methods “GET, POST, OPTIONS”) y define los encabezados permitidos (Access-Control-Allow-Headers “Origin, X-Requested-With, Content-Type, Accept”).

Esta configuración permite que los recursos del servidor Apache sean accedidos desde cualquier origen, lo cual puede ser útil para desarrollo y pruebas, pero en un entorno de producción es recomendable limitar los orígenes permitidos para mejorar la seguridad.

Aquí podemos ver otros ejemplos útiles de CORS:

Permitir credenciales de autenticación: Si tu aplicación necesita enviar credenciales de autenticación (por ejemplo, cookies, certificados SSL, o autenticación HTTP), puedes habilitar CORS para permitirlo agregando la siguiente cabecera:

Header set Access-Control-Allow-Credentials “true”

Exponer encabezados personalizados: Si tu aplicación utiliza encabezados personalizados en las solicitudes, debes exponer esos encabezados para que el navegador los permita. Por ejemplo, si tu aplicación usa un encabezado personalizado llamado “X-Custom-Header”:

Header set Access-Control-Expose-Headers “X-Custom-Header”

Permitir encabezados específicos: Si tu aplicación envía encabezados personalizados en las solicitudes, debes permitirlos explícitamente para que el navegador los acepte. Por ejemplo, si tu aplicación utiliza un encabezado personalizado llamado “X-Custom-Header”:

Header set Access-Control-Allow-Headers “X-Custom-Header, Content-Type”

Estos son solo algunos ejemplos adicionales de cabeceras CORS que se pueden configurar en un servidor Apache. La elección de qué cabeceras usar dependerá de los requisitos específicos de tu aplicación y del nivel de seguridad que desees implementar. Es importante tener en cuenta que al configurar CORS, es fundamental comprender cómo afectará la seguridad y el funcionamiento de tu aplicación en entornos de producción.

Si necesitas ayuda o más información sobre CORS, no dudes en ponerte en contacto con nosotros, estaremos encantados de poder ayudarte.