Configurar (CORS) en un bucket de DreamObjects

Generalidades

Los buckets de DreamObjects soportan políticas personalizadas de Cross-Origin Resource Sharing (CORS), que te permiten usar en tu sitio web la información almacenada en un bucket desde otro dominio. Este artículo explica cómo configurar una política de CORS en un bucket de DreamObjects usando un cliente, s3cmd o la AWS CLI.

Cross Origin Resource Sharing (CORS) permite que los recursos restringidos de un origen (un sitio web o DreamObjects) se soliciten desde otro dominio distinto del dominio desde el que se sirvieron originalmente.

Este ejemplo explica cómo funciona:

El sitio A agrega encabezados CORS para permitir que el sitio B acceda a un recurso en el sitio A, como una fuente.
El sitio B puede entonces acceder a ese recurso gracias al encabezado CORS.

Sin el encabezado CORS, el sitio B no podría acceder al recurso en el sitio A.

Usar CORS en DreamObjects

Los buckets de DreamObjects incluyen una política de CORS de forma predeterminada, que te permite acceder a los buckets y editarlos desde el panel de DreamHost. Sin embargo, debes agregar una política personalizada para usar tu información de DreamObjects en tu sitio web.

Una configuración de CORS en DreamObjects:

incluye para qué sitio es una solicitud, así como qué tipo de solicitud,
se maneja de forma individual para cada bucket, y
usa la sintaxis de Amazon S3 para la configuración de CORS.

Reglas para las políticas de CORS

Las siguientes son las reglas generales para crear una configuración de CORS:

Una configuración de CORS válida consta de 0 a 100 reglas de CORS.
Cada regla debe incluir al menos un origen.
Un origen puede contener como máximo un wildcard *
Cada regla debe incluir al menos un método.
Los métodos soportados son: GET, HEAD, PUT, POST, DELETE.
Cada regla puede contener una cadena identificadora de hasta 255 caracteres.
Cada regla puede especificar cero o más encabezados de solicitud permitidos (que el cliente puede incluir en la solicitud).
Cada regla puede especificar cero o más encabezados de respuesta expuestos (que el servidor devuelve al cliente).
Cada regla puede especificar un tiempo de validez de caché de cero o más segundos. Si no se incluye, el cliente debe proporcionar su propio valor predeterminado.

Implementar una configuración de CORS

Una política de CORS se puede implementar usando un cliente o una herramienta de línea de comandos. El código puede estar en formato XML o JSON.

Si usas un cliente, la política de CORS se agrega dentro del software del cliente.
Si usas una herramienta de línea de comandos, debes crear tú mismo un archivo con las reglas de CORS. El comando luego usa este archivo para actualizar la política de CORS del bucket de DreamObjects.

Clientes

No todos los clientes S3 soportan la implementación de configuraciones de CORS. Tendrías que revisar el sitio web del cliente para confirmar si soporta CORS. El siguiente cliente es un ejemplo que soporta CORS:

S3 Browser: Bucket CORS Configuration

Herramientas de línea de comandos

También puedes usar herramientas de línea de comandos como s3cmd y aws-cli para actualizar tu política de CORS, como aparece a continuación.

Ejemplos de políticas de CORS

Política de WebFont (en formato XML)

Si necesitas alojar una WebFont en DreamObjects, debes incluir una política como la del siguiente ejemplo (suponiendo que tu sitio es www.example.com y también funciona en example.com):

<CORSConfiguration>
<CORSRule>
    <ID>Allow WebFont for example.com</ID>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <MaxAgeSeconds>86400</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

Ejemplo de política de AWS S3 JS (en formato XML)

La siguiente política permite que los usuarios del SDK de JavaScript de AWS S3, tanto en example.com como en www.example.com así como en HTTP y HTTPS, suban a DreamObjects con los métodos PUT y POST:

<CORSConfiguration>
<CORSRule>
    <ID>example.com: Allow PUT and POST with AWS S3 JS SDK</ID>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>Origin</AllowedHeader>
    <AllowedHeader>Content-Length</AllowedHeader>
    <AllowedHeader>Content-Type</AllowedHeader>
    <AllowedHeader>Content-MD5</AllowedHeader>
    <AllowedHeader>X-Amz-User-Agent</AllowedHeader>
    <AllowedHeader>X-Amz-Date</AllowedHeader>
    <AllowedHeader>Authorization</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <MaxAgeSeconds>1800</MaxAgeSeconds>
</CORSRule>
<CORSRule>
    <ID>example.com: Allow GET with AWS S3 JS SDK</ID>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <MaxAgeSeconds>1800</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

Ejemplo de política con wildcard (¡Insegura!)

La siguiente política, aunque es completamente insegura, permite todos los métodos desde cualquier origen. Sin embargo, no expone encabezados personalizados:

<CORSConfiguration>
<CORSRule>
    <ID>Allow
    everything</ID>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>30</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

s3cmd — implementar una política de CORS

S3cmd es una herramienta de línea de comandos que puedes usar para administrar tu información de DreamObjects. No está instalada de forma predeterminada en los servidores de DreamHost, así que debes instalarla manualmente.

Asegúrate de tener una instalación de S3cmd que funcione antes de continuar.

El siguiente ejemplo crea un archivo corsrules.xml en el directorio principal de tu usuario, pero puedes agregarlo donde quieras. Solo tendrías que actualizar la ruta al archivo en el comando si cambias esta ubicación.

Asegúrate de cambiar my-bucket por el nombre de tu bucket de DreamObjects.

Este ejemplo usa un archivo XML que contiene tu política de CORS.

Puedes correr estos comandos en un computador Mac o Linux, o en tu servidor DreamHost luego de iniciar sesión a través de SSH. Este ejemplo corre el comando en el servidor.

Inicia sesión en tu servidor de DreamHost a través de SSH.
Asegúrate de estar en el directorio principal de tu usuario.
```
[server]$ cd ~
```

Corre lo siguiente para ver la política de CORS actual de tu bucket:

[server]$ s3cmd info s3://my-bucket
   Location:  us-east-005
   Payer:     BucketOwner
   Expiration Rule: none
   Policy:    none
   CORS:      none
   ACL:       *anon*: READ
   ACL:       my_user: FULL_CONTROL
   URL:       http://my-bucket.objects-us-east-005.dream.io/

Este resultado muestra que aún no se ha agregado ninguna política de CORS.

Crea un archivo XML llamado corsrules.xml con el siguiente contenido. Asegúrate de cambiar el valor de AllowedOrigin por el nombre de tu sitio web.

<CORSConfiguration>
<CORSRule>
    <ID>Alloweverything</ID>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

Corre el comando setcors. Esto usa el archivo corsrules.xml para establecer la política de CORS.
```
[server]$ s3cmd setcors corsrules.xml s3://my-bucket
```

Corre el comando info de nuevo para ver tu configuración de CORS. Deberías ver tu nueva política.

[server]$ s3cmd info s3://bucketname
   Location:  us-east-005
   Payer:     BucketOwner
   Expiration Rule: none
   Policy:    none
   CORS:      <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule>
              <ID>Alloweverything</ID><AllowedMethod>GET</AllowedMethod>
              <AllowedOrigin>http://example.com</AllowedOrigin>
              <AllowedOrigin>https://example.com</AllowedOrigin>
              <AllowedHeader>*</AllowedHeader><MaxAgeSeconds>3000</MaxAgeSeconds>
              </CORSRule></CORSConfiguration>
   ACL:       *anon*: READ
   ACL:       my_user: FULL_CONTROL
   URL:       http://my-bucket.s3.us-east-005.dream.io/

Si es necesario, puedes correr lo siguiente para eliminar la política de CORS de tu bucket:

[server]$ s3cmd delcors s3://my-bucket

AWS CLI — implementar una política de CORS

AWS CLI es una herramienta de línea de comandos que puedes usar para administrar tu información de DreamObjects y está instalada de forma predeterminada en los servidores de DreamHost.

aws-cli está instalada de forma predeterminada en todos los servidores de DreamHost.

El siguiente ejemplo crea un archivo cors.json en el directorio principal de tu usuario, pero puedes agregarlo donde quieras. Solo tendrías que actualizar la ruta al archivo en el comando si cambias esta ubicación.

Asegúrate de cambiar my-bucket por el nombre de tu bucket de DreamObjects.

Este ejemplo usa un JSON que contiene tu política de CORS.

Puedes correr estos comandos en un computador Mac o Linux, o en tu servidor DreamHost luego de iniciar sesión a través de SSH. Este ejemplo corre el comando en el servidor.

Inicia sesión en tu servidor de DreamHost a través de SSH.
Asegúrate de estar en el directorio principal de tu usuario.
```
[server]$ cd ~
```

Crea un archivo JSON llamado cors.json con el siguiente contenido. Asegúrate de cambiar el valor de AllowedOrigins por el nombre de tu sitio web.

{
  "CORSRules": [
    {
      "AllowedOrigins": ["http://example.com"],
      "AllowedOrigins": ["https://example.com"],
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET"],
      "MaxAgeSeconds": 3000,
      "ExposeHeaders": []
    }
  ]
}

Corre el siguiente comando para ver tu configuración de CORS actual de tu bucket:
```
[server]$ aws s3api get-bucket-cors --endpoint-url https://s3.us-east-005.dream.io --bucket my-bucket
```
Si actualmente no hay ninguna política de CORS configurada, aparece el siguiente error:
```
An error occurred (NoSuchCORSConfiguration) when calling the GetBucketCors operation: Unknown
```
Ignora esto y continúa con el siguiente paso.

Corre el comando put-bucket-cors. Esto usa el archivo cors.json para establecer la política de CORS.

[server]$ aws s3api put-bucket-cors --endpoint-url https://s3.us-east-005.dream.io --bucket my-bucket --cors-configuration file://cors.json

Corre el comando para ver tu configuración de CORS de nuevo. Deberías ver tu nueva política.

Si es necesario, puedes correr lo siguiente para eliminar la política de CORS de tu bucket:

[server]$ aws s3api delete-bucket-cors --endpoint-url https://s3.us-east-005.dream.io --bucket s3://my-bucket

Ver también

Antecedentes

API