Configurar CORS en HTTP API Gateway

¿Quieres que tu API sea accesible desde diferentes dominios de forma segura? Configurar CORS (Cross-Origin Resource Sharing) es clave para lograrlo.

Esta guía rápida te explica cómo configurar CORS en un HTTP API Gateway de AWS en pocos pasos:

• ¿Qué es CORS?: Es un mecanismo de seguridad que permite que un frontend (por ejemplo, https://miapp.com) acceda a una API en otro dominio (https://api.miapp.com).
• HTTP API vs REST API: La configuración de CORS en HTTP API es más sencilla y económica que en REST API.
• Pasos básicos:
  1. Accede a la consola de API Gateway.
  2. Selecciona tu HTTP API.
  3. Configura los parámetros de CORS: orígenes, métodos, cabeceras y más.
• Mejores prácticas:
  • Restringe los orígenes permitidos.
  • Especifica solo los métodos y cabeceras necesarios.
  • Activa credenciales solo si es imprescindible.

Comparativa rápida: HTTP API vs REST API

¿Problemas con CORS? Revisa los errores más comunes y cómo solucionarlos en las herramientas del navegador.

Con esta guía, podrás configurar CORS de forma segura y eficiente. ¡Sigue leyendo para aprender más!

Configuración de CORS en HTTP API Gateway

Cómo acceder a la configuración de CORS

Para ajustar CORS en una HTTP API de API Gateway, primero debes ingresar a la consola de AWS y localizar tu API. Una vez dentro, sigue estos pasos para encontrar la sección de configuración:

1. Ve a la consola de API Gateway.
2. Selecciona tu HTTP API en la lista.
3. En el menú de navegación izquierdo, haz clic en CORS.
4. En la sección principal, selecciona Configurar.

A continuación, revisa las opciones disponibles para personalizar la configuración.

Parámetros de configuración de CORS

En HTTP API Gateway, puedes personalizar varios parámetros de CORS según tus necesidades. Aquí tienes una tabla con ejemplos comunes:

Ahora veamos cómo aplicar esta configuración en un caso práctico.

Ejemplo básico de configuración de CORS

Con los pasos anteriores, puedes implementar una configuración básica ajustando los siguientes parámetros:

• Orígenes permitidos
  Agrega el dominio de tu aplicación: https://miapp.es
• Métodos HTTP autorizados
  Incluye métodos como: GET, POST, PUT, DELETE, OPTIONS
• Cabeceras permitidas
  Especifica cabeceras como: Authorization, Content-Type, X-Amz-Date, X-Api-Key, X-Amz-Security-Token

Antes de llevar esta configuración a producción, realiza una prueba en tu navegador. Asegúrate de que la respuesta incluya las cabeceras CORS esperadas. Esto garantizará que las solicitudes desde tu dominio funcionen correctamente.

Configuración personalizada de CORS

Tras haber configurado CORS de manera básica, es momento de ajustar las opciones para que se adapten mejor a las necesidades específicas de tu entorno.

Restricción de orígenes permitidos

Definir con precisión los orígenes autorizados es clave. En lugar de usar el comodín *, que permite acceso desde cualquier origen, es mejor especificar los dominios permitidos.

Por ejemplo, puedes configurar los orígenes así:

Incluye siempre el protocolo y, si es necesario, el subdominio. Una vez definidos los orígenes, ajusta los métodos y las cabeceras permitidas para aumentar la seguridad.

Definición de métodos y cabeceras

Además de limitar los orígenes, es importante especificar los métodos y cabeceras que estará permitido usar. Solo habilita lo necesario para tu aplicación.

Si tu API realiza operaciones CRUD básicas, una configuración típica sería:

{
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Authorization, Content-Type, X-Amz-Date"
}

Manejo de credenciales

El manejo de credenciales en solicitudes cross-origin es esencial si necesitas trabajar con cookies o encabezados de autorización. Para habilitarlo, sigue estos pasos:

1. Configura en el API Gateway lo siguiente:

   {
       "Access-Control-Allow-Credentials": "true"
   }
   

2. En el cliente, agrega credentials: 'include' en tus solicitudes fetch:

   fetch('https://api.miapp.es/recurso', {
       credentials: 'include'
   });
   

Importante: Cuando habilites credenciales, asegúrate de especificar cada origen permitido de forma explícita.

Permitir el uso de credenciales hace que la seguridad de tu API sea más exigente. Por eso, es recomendable implementar medidas adicionales, como el uso de tokens CSRF y una validación estricta de sesiones, especialmente si estás trabajando con cookies o credenciales de autenticación.

sbb-itb-03dc61e

Testing CORS Settings

Métodos de prueba CORS

Puedes comprobar tu configuración CORS utilizando las herramientas de desarrollo del navegador o realizando solicitudes de prueba.

Aquí tienes un ejemplo para probar desde el frontend:

async function probarCORS() {
    try {
        const respuesta = await fetch('https://tu-api.execute-api.eu-west-1.amazonaws.com/test', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        console.log('Código de respuesta:', respuesta.status);
    } catch (error) {
        console.error('Error CORS:', error);
    }
}

Si la solicitud no funciona, consulta la siguiente sección para identificar y corregir errores.

Solución de errores CORS

Aquí tienes una tabla con los problemas más comunes y cómo resolverlos:

Para diagnosticar, revisa la respuesta OPTIONS de tu API:

1. Abre las herramientas de desarrollo del navegador.
2. Ve a la pestaña Network o Red.
3. Busca la solicitud preliminar OPTIONS.
4. Comprueba las cabeceras CORS en la respuesta.

Las herramientas del navegador pueden ser de gran ayuda para entender mejor los problemas.

Herramientas del navegador para CORS

Chrome DevTools incluye funciones útiles para depurar problemas relacionados con CORS:

• Panel de Console y Network
  Muestra mensajes detallados sobre errores CORS. También permite revisar las solicitudes OPTIONS y las cabeceras como:
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
• Panel de Application
  Ideal para analizar cookies y credenciales cuando trabajas con Access-Control-Allow-Credentials.

Si usas Firefox Developer Edition, también encontrarás herramientas para simular diferentes orígenes y analizar el comportamiento de tu API.

Consejos de seguridad y rendimiento

Con la configuración básica y personalizada de CORS ya en marcha, aquí tienes algunos consejos para reforzar la seguridad y mejorar el rendimiento de tu API.

Directrices para una configuración CORS segura

Una configuración adecuada de CORS ayuda a proteger tu API HTTP. Ten en cuenta estos puntos clave:

• Define orígenes específicos: Evita el uso de comodines innecesarios para limitar la exposición.
• Usa HTTPS siempre: Garantiza que el tráfico esté cifrado para prevenir ataques como el man-in-the-middle.
• Aplica el principio de permisos mínimos: Permite solo los métodos y cabeceras estrictamente necesarios.

Estos pasos complementan los ejemplos básicos de configuración que ya hemos visto.

Cómo CORS afecta el rendimiento

La implementación de CORS puede influir en el rendimiento de tu API. Algunos factores a considerar:

• Solicitudes OPTIONS: Configura Access-Control-Max-Age para almacenar en caché las respuestas OPTIONS y reducir la latencia.
• Validación de orígenes: Validar múltiples orígenes puede aumentar el tiempo de respuesta.
• Cabeceras adicionales: Cada cabecera extra incrementa el tamaño de la respuesta, afectando el rendimiento.

Para mejorar el rendimiento, puedes usar una configuración como esta:

{
    "cors": {
        "allowOrigins": ["https://miapp.es"],
        "allowMethods": ["GET", "POST"],
        "maxAge": 300,
        "allowCredentials": false
    }
}

¿Cuándo usar comodines?

El uso de comodines (*), aunque tentador, debe limitarse a APIs públicas o entornos de desarrollo. En producción, es mejor mantener una lista específica de orígenes permitidos:

{
    "allowOrigins": [
        "https://app.miempresa.es",
        "https://admin.miempresa.es",
        "https://dev.miempresa.es"
    ]
}

Busca un equilibrio entre flexibilidad en el desarrollo y seguridad en producción. Prueba siempre estos ajustes en el navegador para asegurarte de que funcionan como esperas, tal y como se explicó en la sección de testing.

Próximos pasos

Después de configurar y probar CORS, es importante planificar las siguientes acciones para mantener un buen rendimiento y garantizar la seguridad a largo plazo.

Revisión de puntos clave

Para implementar CORS de manera efectiva, ten en cuenta lo siguiente:

• Configuración inicial y avanzada: Comienza con una configuración básica para pruebas y utiliza configuraciones más específicas en producción, limitando los orígenes permitidos.
• Seguridad y optimización: Asegúrate de usar HTTPS, valida todas las entradas y aplica métodos sólidos de autenticación y autorización. Además, mejora el rendimiento con técnicas como caché y compresión.

Con estos puntos claros, puedes consultar más recursos para ampliar tus conocimientos sobre la configuración de CORS.

Recursos adicionales

Si quieres aprender más sobre la configuración de CORS y cómo mejorar la seguridad en AWS, aquí tienes algunos recursos en español:

• Dónde Aprendo AWS (https://dondeaprendoaws.com): Un portal especializado con artículos y tutoriales en español sobre AWS, incluyendo guías detalladas sobre cómo proteger tu infraestructura en la nube.
• Estrategia de seguridad: El artículo "Estrategia de seguridad en la nube de AWS, ¿Por dónde empezar?" ofrece una excelente introducción para implementar medidas de seguridad eficaces.

No olvides revisar periódicamente tu configuración y actualizar las medidas de seguridad utilizando herramientas como CloudWatch, X-Ray y CloudTrail.

Publicaciones de blog relacionadas

• Cómo Habilitar CloudWatch Logs en API Gateway: Guía Paso a Paso
• Guía para Crear APIs Serverless con AWS Lambda y API Gateway
• AWS Lambda y API Gateway: Guía Básica
• 5 Prácticas de Seguridad para Lambda Authorizers