Restrinja o permita el uso compartido de recursos entre sitios mediante el encabezado CORS.
El encabezado CORS (intercambio de recursos de origen cruzado) es compatible con todos los navegadores modernos.
De forma predeterminada, el navegador restringe las solicitudes HTTP de origen cruzado mediante scripts. Y, CORS Puede ser útil reutilizar los recursos de aplicaciones comunes en otras aplicaciones web. Una vez que se agrega correctamente, indica al navegador que cargue la aplicación desde un origen diferente.
Hay seis tipos populares de encabezados CORS que puede enviar un servidor. 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 la opción de permitir un origen específico.
APACHE
Agregue lo siguiente en httpd.conf
o cualquier otro archivo de configuración en uso.
Header set Access-Control-Allow-Origin "*"
Reinicie Apache para probar. Debería verlos en los encabezados de respuesta.
Y, para permitir desde un origen específico (por ejemplo: https://gf.dev), puede usar lo siguiente.
Header set Access-Control-Allow-Origin "https://gf.dev"
Nginx
Aquí hay un ejemplo para permitir el origen https://geekflare.dev. Agregue lo siguiente en el server
bloque de nginx.conf
o 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 más métodos HTTP para acceder a los recursos. Ej: - OBTENER, PONER, OPCIONES, PONER, ELIMINAR, PUBLICAR
APACHE
Para permitir solo GET y POST.
Header add Access-Control-Allow-Methods "GET, POST"
Nginx
Digamos que necesita agregar los métodos DELETE y OPTIONS, luego puede agregarlos como se muestra a continuación.
add_header Access-Control-Allow-Methods "DELETE, OPTIONS";
Después del reinicio, debería verlos en los encabezados de respuesta.
Access-Control-Allow-Headers
Los siguientes encabezados están en lista segura, lo que significa que no es necesario agregar uno. Debería funcionar de forma predeterminada.
- Content-Type
- Aceptar
- Contenido-Idioma
- Aceptar lenguaje
Sin embargo, si necesita agregar uno personalizado, puede hacerlo. Admite uno o más encabezados.
APACHE
Digamos que quieres permitir X-Custom-Header
y X-Powered-By
encabezados.
Header always set Access-Control-Allow-Headers "X-Custom-Header, X-Powered-By"
Después de un reinicio, debería ver el resultado en los encabezados de respuesta.
Nginx
Un ejemplo de cómo agregar X-Customer-Software y X-My-Custom encabezado.
add_header Access-Control-Allow-Headers "X-Custom-Software, X-My-Custom";
Access-Control-Expose-Headers
Los siguientes encabezados ya son una lista segura. Significa que no necesita agregar si desea exponerlos.
- Expira
- Pragma
- Cache-Control
- Última modificación
- Contenido-Idioma
- Content-Type
Pero, si necesita algo más que la lista segura, puede permitirlos de la siguiente manera.
APACHE
Utilice un comodín para exponer todos los encabezados.
Header always set Access-Control-Expose-Headers "*"
Nota: un comodín aún no expone Authorization
encabezado, y si lo necesita, debe mencionarlo explícitamente.
Header always set Access-Control-Expose-Headers "Authorization, *"
El resultado debería verse así.
Nginx
Si quieres exponer Origin
cabecera.
add_header Access-Control-Expose-Headers "Origin";
Access-Control-Max-Age
¿Conoce los datos de Access-Control-Allow-Headers
y Access-Control-Allow-Methods
los encabezados se pueden almacenar en caché? Se puede almacenar en caché hasta 24 horas en Firefox, 2 horas en Chrome (76+).
Para deshabilitar el almacenamiento en caché, puede mantener el valor como -1
APACHE
Almacenar en caché durante 15 minutos.
Header always set Access-Control-Max-Age "900"
Como puede ver, el valor está en segundos.
Nginx
Almacenar en caché durante una hora.
add_header Access-Control-Max-Age "3600";
Una vez agregado, reinicie Nginx para ver los resultados.
Access-Control-Allow-Credentials
Solo hay una opción para configurar aquí: verdadero. This
es permitir si desea exponer credenciales como cookies, certificados TLS, autorización.
APACHE
Header always set Access-Control-Allow-Credentials "true"
Nginx
add_header Access-Control-Allow-Credentials "true";
y el resultado.
Verificando los resultados
Una vez que se agregan los encabezados necesarios, puede utilizar las herramientas de desarrollo integradas del navegador o un verificador de encabezado HTTP en línea.
Conclusión
Espero que lo anterior le ayude a implementar el encabezado CORS en Apache HTTP y el servidor web Nginx para una mejor seguridad. También te puede interesar postularte Encabezados seguros recomendados por OWASP.