Restrinja o permita el uso compartido de recursos entre sitios mediante el encabezado CORS.
La cabecera CORS (Cross-Origin Resource Sharing) es compatible con todos los navegadores modernos.
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 le dice 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 a la cabecera 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
- Content-Language
- Accept-Language
Sin embargo, si necesita añadir uno personalizado, puede hacerlo. Admite una o varias cabeceras.
Apache
Supongamos que desea permitir las cabeceras X-Custom-Header y X-Powered-By.
Establezca siempre en la cabecera 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 Authorization, 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
Cabecera siempre establecer 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.