Cross-Origin Resource Sharing (CORS, Uso compartido de recursos entre orígenes) - AWS SDK for JavaScript

Anunciamos el próximo fin del soporte para AWS SDK for JavaScript v2. Se recomienda que migre a AWS SDK for JavaScript v3. Para ver las fechas, los detalles adicionales y la información sobre cómo realizar la migración, consulte el anuncio enlazado.

Cross-Origin Resource Sharing (CORS, Uso compartido de recursos entre orígenes)

El uso compartido de recursos entre orígenes o CORS es una característica de seguridad de los navegadores web modernos. Habilita a los navegadores web para que puedan negociar qué dominios pueden realizar solicitudes de sitios web o servicios externos. CORS es un factor importante que hay que tener en cuenta cuando se desarrollan aplicaciones de navegador con AWS SDK for JavaScript, ya que la mayoría de las solicitudes a recursos se envían a un dominio externo como, por ejemplo, el punto de conexión de un servicio web. Si su entorno de JavaScript aplica seguridad CORS, tiene que configurar CORS con el servicio.

CORS determina si se permitirá el uso compartido de recursos en una solicitud entre orígenes basándose en:

  • El dominio específico que efectúa la solicitud.

  • El tipo de solicitud HTTP que se realiza (GET, PUT, POST, DELETE, etc.).

Funcionamiento de CORS

En el caso más sencillo, el navegador script realiza una solicitud GET para obtener un recurso de un servidor que se encuentra en otro dominio. En función de cómo sea la configuración de CORS de dicho servidor, si la solicitud proviene de un dominio con permiso para enviar solicitudes GET, el servidor de orígenes cruzados responderá devolviendo el recurso que se ha solicitado.

Si el dominio de solicitud o el tipo de solicitud HTTP no está autorizado, se denegará la solicitud. Sin embargo, con CORS es posible realizar una solicitud preliminar antes de enviarla realmente. En dicho caso, se realiza una solicitud preliminar en la que se envía la operación de solicitud de acceso OPTIONS. Si la configuración CORS del servidor de origen otorga acceso al dominio que realiza la solicitud, el servidor enviará una respuesta preliminar que contenga una lista de todos los tipos de solicitud HTTP que el dominio que realiza la solicitud puede hacer al recurso solicitado.


                    Flujo de proceso para solicitudes de CORS

Configuración necesaria para CORS

Es preciso configurar CORS en los buckets de Amazon S3 para poder realizar operaciones en ellos. Puede que en algunos entornos JavaScript no se aplique CORS y, por consiguiente, no sea necesario configurarlo. Por ejemplo, si aloja su aplicación de un bucket de Amazon S3 y obtiene acceso a recursos de *.s3.amazonaws.com o algún otro punto de conexión específico, sus solicitudes no tendrán acceso a un dominio externo. Por lo tanto, esta configuración no necesita CORS. En este caso, se seguirá utilizando CORS para servicios que no sean Amazon S3.

Configuración de CORS para un bucket de Amazon S3

Puede configurar un bucket de Amazon S3 para utilizar CORS en la consola de Amazon S3.

  1. En la consola de Amazon S3, elija el bucket que quiere editar.

  2. Elija la pestaña Permisos y desplácese hasta el panel Compartir recursos entre orígenes (CORS).

    
                        Editor de configuración de CORS en Amazon S3 para establecer la configuración de CORS de un bucket
  3. Seleccione Editar y escriba su configuración de CORS en el Editor de configuraciones de CORS. A continuación, elija Guardar.

Una configuración de CORS es un archivo XML que contiene una serie de reglas dentro de una <CORSRule>. Una configuración puede tener hasta 100 reglas. Una regla se define con una de las siguientes etiquetas:

  • <AllowedOrigin>, que especifica orígenes de dominios a los que permite realizar solicitudes de dominio cruzado.

  • <AllowedMethod>, que especifica un tipo de solicitud que permite (GET, PUT, POST, DELETE, HEAD) en solicitudes de dominio cruzado.

  • <AllowedHeader>, que especifica los encabezados que están permitidos en una solicitud preliminar.

Para ver las configuraciones de ejemplo, consulte ¿Cómo configuro el CORS en mi bucket? en la Guía del usuario de Amazon Simple Storage Service.

Ejemplo de configuración de CORS

La siguiente muestra de configuración de CORS permite a un usuario ver, añadir, eliminar o actualizar objetos dentro de un bucket desde el dominio example.org, aunque se recomienda que defina el ámbito de <AllowedOrigin> al dominio de su sitio web. Puede especificar "*" para permitir cualquier origen.

importante

En la nueva consola S3, la configuración de CORS debe ser JSON.

XML
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://example.org</AllowedOrigin> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> <ExposeHeader>ETag</ExposeHeader> <ExposeHeader>x-amz-meta-custom-header</ExposeHeader> </CORSRule> </CORSConfiguration>
JSON
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "https://www.example.org" ], "ExposeHeaders": [ "ETag", "x-amz-meta-custom-header"] } ]

Esta configuración no autoriza al usuario a realizar acciones en el bucket. Habilita al modelo de seguridad del navegador para que permita una solicitud a Amazon S3. Los permisos tienen que configurarse a través de permisos de bucket o permisos de rol de IAM .

Puede utilizar ExposeHeader para permitir que el SDK lea los encabezados de respuestas que devuelve Amazon S3. Por ejemplo, si desea leer el encabezado ETag de una operación PUT o una carga multiparte, debe incluir la etiqueta ExposeHeader en su configuración, tal y como se muestra en el ejemplo anterior. El SDK solo puede obtener acceso a los encabezados que se exponen a través de la configuración de CORS. Si establece metadatos en el objeto, los valores se devuelven como encabezados con el prefijo x-amz-meta-, como x-amz-meta-my-custom-header, y también deben exponerse de la misma manera.