¿Cómo habilitar CORS en Apache y Nginx?

Restrinja o permita la compartición de recursos entre sitios utilizando la cabecera CORS

La cabecera CORS (Cross-Origin Resource Sharing) es compatible con todos los navegadores modernos

¿Puedo utilizar cors? Datos sobre el soporte de la función cors en los principales navegadores de caniuse.com.

Por defecto, el navegador restringe las peticiones HTTP de origen cruzado a través de scripts. Y, CORS puede ser útil para reutilizar los recursos comunes de la aplicación en otras aplicaciones web. Una vez añadido correctamente, indica al navegador que cargue la aplicación desde un origen diferente

Hay seis tipos populares de cabeceras CORS que un servidor puede enviar. Explorémoslos

Access-Control-Allow-Origin

El más popular que indica al navegador que cargue los recursos en el origen permitido. Admite comodines (*) y al hacerlo cualquier dominio puede cargar los recursos. Sin embargo, tiene una opción para permitir un origen específico

Apache

Añada lo siguiente en httpd.conf o en cualquier otro archivo de configuración en uso

Header set Access-Control-Allow-Origin "*"

Reinicie el Apache para probar. Debería verlos en las cabeceras de respuesta

Y, para permitir desde un origen específico (ej: https://gf.dev), puede utilizar lo siguiente

Header set Access-Control-Allow-Origin "https://gf.dev

”

Nginx

He aquí un ejemplo para permitir el origen https://geekflare.dev. Añada lo siguiente en el bloque de servidor de nginx.conf o en el archivo de configuración en uso

add_header Access-Control-Allow-Origin "https://geekflare.dev"

Access-Control-Allow-Methods

El navegador puede iniciar uno o varios métodos HTTP para acceder a los recursos. Ej: - GET, PUT, OPTIONS, PUT, DELETE, POST

Apache

Para permitir sólo GET y POST

Añada al encabezado Access-Control-Allow-Methods "GET, POST"

Nginx

Digamos que necesita añadir los métodos DELETE y OPTIONS, entonces puede añadirlos como se indica a continuación

add_header Access-Control-Allow-Methods "DELETE, OPTIONS"

Tras el reinicio, debería verlos en las cabeceras de respuesta

Access-Control-Allow-Headers

Las siguientes cabeceras están en la lista segura, lo que significa que no necesita añadir ninguna. Debería funcionar por defecto

• Tipo de contenido
• Aceptar
• Idioma del contenido
• Accept-Language

Sin embargo, si necesita añadir uno personalizado, puede hacerlo. Admite una o varias cabeceras

Apache

Supongamos que desea permitir que las cabeceras X-Custom-Header y X-Powered-By

Establezca siempre Access-Control-Allow-Headers "X-Custom-Header, X-Powered-By"

Tras un reinicio, debería ver el resultado en las cabeceras de respuesta

Nginx

Un ejemplo de adición de las cabeceras X-Customer-Software y X-My-Custom

add_header Access-Control-Allow-Headers "X-Custom-Software, X-My-Custom"

Access-Control-Expose-Headers

Las siguientes cabeceras ya son una lista segura. Es decir, no necesita añadirlos si desea exponerlos

• Caduca
• Pragma
• Cache-Control
• Última modificación
• Idioma del contenido
• Tipo de contenido

Pero, si necesita otros además de la lista segura, entonces puede permitirlos como sigue

Apache

Utilice un comodín para exponer todas las cabeceras
La cabecera

siempre establece Access-Control-Expose-Headers "*"

Nota: un comodín sigue sin exponer la cabecera Autorización, y si necesita una, debe mencionarlo explícitamente

Header always set Access-Control-Expose-Headers "Authorization, *

”
El resultado debería ser el siguiente

Nginx

Si desea exponer la cabecera Origin

add_header Access-Control-Expose-Headers "Origen"

Access-Control-Max-Age

¿Sabe que los datos de las cabeceras Access-Control-Allow-Headers y Access-Control-Allow-Methods ¿pueden almacenarse en caché? Pueden almacenarse en caché hasta 24 horas en Firefox, 2 horas en Chrome (76 )

Para desactivar el almacenamiento en caché, puede mantener el valor como -1

Apache

Para almacenar en caché durante 15 minutos
El

encabezado siempre establece Access-Control-Max-Age "900"

Como puede ver, el valor está en segundos

Nginx

Para almacenar en caché durante una hora

add_header Access-Control-Max-Age "3600"

Una vez añadido, reinicie Nginx para ver los resultados

Access-Control-Allow-Credentials

Sólo hay una opción para establecer aquí - true. Esto es para permitir si desea exponer credenciales como cookies, certificados TLS, autorización

Apache

El

encabezado siempre establece Access-Control-Allow-Credentials "true"

Nginx

add_header Access-Control-Allow-Credentials "true"

y el resultado

Verificación de los resultados

Una vez añadidas las cabeceras necesarias, puede utilizar las herramientas de desarrollo integradas en el navegador o un comprobador de cabeceras HTTP en línea

Conclusión

Espero que lo anterior le ayude a implementar la cabecera CORS en Apache HTTP y el servidor web Nginx para una mayor seguridad. Puede que también le interese aplicar las cabeceras seguras recomendadas por OWASP.