CORS: Concepto, Solución y Riesgos en API REST con API Key

Origen del Error CORS

CORS, acrónimo de Cross-Origin Resource Sharing (Compartición de Recursos de Origen Cruzado), es un mecanismo implementado en navegadores web para permitir que los recursos de una página web sean solicitados desde un dominio diferente al que sirvió la primera página. Este mecanismo está diseñado para proteger al usuario de ataques maliciosos que podrían comprometer sus datos mediante solicitudes entre sitios.

El error CORS surge cuando una aplicación web intenta realizar una petición a una API que está alojada en un dominio diferente al de la aplicación. Por ejemplo, si tu aplicación en https://miapp.com intenta acceder a una API en https://api.externo.com, el navegador bloqueará la solicitud debido a su política de mismo origen, a menos que la API externa haya configurado adecuadamente los encabezados CORS para permitir solicitudes desde tu dominio.

Ejemplo de Error CORS

Sin configuración CORS adecuada, una petición AJAX desde https://miapp.com a https://api.externo.com fallaría:

fetch("https://api.externo.com/datos")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error al realizar la petición:', error));

El navegador mostrará un error similar a:

Access to fetch at 'https://api.externo.com/datos' from origin 'https://miapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solución: Habilitar el Dominio de Origen

Para resolver el error CORS, el servidor de la API debe incluir el encabezado Access-Control-Allow-Origin en su respuesta, especificando los dominios que están permitidos para acceder a los recursos. Esto se puede configurar de manera general o específica para ciertos dominios.

Riesgos al Usar API Key para Autorización

El uso de API Keys como método de autorización en conjunción con CORS plantea un riesgo significativo. Al realizar solicitudes directamente desde el FrontEnd, la clave de API puede quedar expuesta a través del código fuente o las herramientas de desarrollo del navegador, lo que pone en riesgo la seguridad de la API y la integridad de los datos.

Ejemplo de Exposición de API Key

fetch("https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

En este caso, cualquiera con acceso al navegador podría ver fácilmente la clave API utilizada en la solicitud.

Recomendación: Realizar Conexiones desde el BackEnd

Para mitigar los riesgos de seguridad asociados con la exposición de claves API y otros datos sensibles, se recomienda realizar las solicitudes a APIs externas desde el BackEnd de la aplicación. De esta manera, la lógica de autorización y el manejo de las claves API permanecen ocultos y seguros en el servidor.

Ejemplo de Solicitud desde el BackEnd

const fetch = require('node-fetch');

// Función para realizar la solicitud a la API externa desde el servidor
function obtenerDatosDesdeAPI() {
  const url = "https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA";
  
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error al realizar la petición:', error));
}

Al realizar las solicitudes a través del servidor, se preserva la seguridad de la información confidencial y se evita el riesgo de exponer datos sensibles al cliente.

En conclusión, aunque CORS es una solución efectiva para permitir solicitudes de origen cruzado, es crucial manejar la seguridad de las claves API y otros datos sensibles con cuidado, prefiriendo realizar solicitudes sensibles desde el servidor para garantizar la seguridad y la integridad de la aplicación y sus usuarios.

Si igualmente deseas realizar las peticiones desde tu FrontEnd, contactanos a success@icommkt.com, y envíanos el dominio desde el cuál se realizarán las peticiones

Actualizado el: 07/03/2024