amazon s3 - origin - Corregir la configuración CORS S3+Cloudfront?

cors for s3 bucket

Question

Mi aplicación almacena imágenes en S3 y luego las envía a través de Cloudfront. Estoy entusiasmado de poder utilizar el nuevo soporte S3 CORS para poder utilizar los métodos canvas de HTML5 (que tienen una política de origen cruzado) pero parece que no puedo configurar mi S3 y Cloudfront correctamente. Aún me encuentro con "Error no detectado: SECURITY_ERR: DOM Exception 18" cuando intento convertir una imagen en un elemento canvas.

Esto es lo que tengo hasta ahora:

S3

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

Frente a la nube

Orígenes

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

Comportamientos

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

¿Hay algo que me falta aquí?

ACTUALIZACIÓN: Acabo de intentar cambiar los encabezados a

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

basado en esta pregunta Amazon S3 CORS (Intercambio de recursos de origen cruzado) y la carga de fuentes de dominio cruzado de Firefox

Todavía no ir.

ACTUALIZAR: MÁS INFORMACIÓN A PETICIÓN

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

ACTUALIZAR

Creo que tal vez mi solicitud no era correcta, así que intenté habilitar CORS con

img.crossOrigin = '''';

pero luego la imagen no se carga y obtengo el error: la carga de imágenes de origen cruzado es denegada por la política de Intercambio de recursos de origen cruzado.

Answer 1

ACTUALIZACIÓN: esto ya no es cierto con los cambios recientes en CloudFront. Yippee! Vea las otras respuestas para los detalles. Dejo esto aquí por contexto / historia.

Problema

CloudFront no es compatible con CORS 100%. El problema es cómo CloudFront almacena en caché la respuesta a la solicitud. Cualquier otra solicitud de la misma URL después de eso dará como resultado la solicitud en caché sin importar el origen . La parte clave de eso es que incluye los encabezados de respuesta desde el origen.

Primera solicitud antes de que CloudFront tenga algo almacenado en caché desde Origin: http://example.com tiene un encabezado de respuesta de:

Access-Control-Allow-Origin: http://example.com

La segunda solicitud desde Origin: https://example.com (tenga en cuenta que es HTTPS no HTTP) también tiene el encabezado de respuesta de:

Access-Control-Allow-Origin: http://example.com

Porque eso es lo que CloudFront almacena en caché para la URL. Esto no es válido: la consola del navegador (al menos en Chrome) mostrará un mensaje de violación CORS y las cosas se romperán.

Solución

El trabajo sugerido es usar diferentes URL para diferentes orígenes. El truco es agregar una cadena de consulta única que sea diferente para que haya un registro en caché por origen.

Entonces nuestras URL serían algo así como:

http://.../some.png?http_mysite.com
https://.../some.png?https_mysite.com

Este tipo de trabajo funciona, pero cualquiera puede hacer que su sitio funcione mal intercambiando las cadenas de caracteres. Es eso probable? Probablemente no, pero la depuración de este problema es una gran molestia.

La solución correcta es no usar CloudFront con CORS hasta que no sean totalmente compatibles con CORS.

En la práctica

Si usa CloudFront para CORS, tenga una alternativa a otro método que funcionará cuando CORS no lo haga. Esto no siempre es una opción, pero en este momento estoy cargando fuentes dinámicamente con JavaScript. Si falla la solicitud basada en CORS a CloudFront, recurro a un proxy del lado del servidor para las fuentes (no origen cruzado). De esta manera, las cosas siguen funcionando a pesar de que CloudFront de alguna manera tiene un registro en mal estado para la fuente.

Answer 2

El 26 de junio de 2014, AWS lanzó el comportamiento Vary: Origin correcto en CloudFront, por lo que ahora solo

1. Establezca una configuración de CORS para su cubo S3 incluyendo

   <AllowedOrigin> * </ AllowedOrigin>

2. En CloudFront -> Distribución -> Comportamientos para este origen, use la opción Forward Headers: Whitelist y incluya en la lista blanca el encabezado ''Origin''.

3. Espere unos 20 minutos mientras CloudFront propaga la nueva regla

Ahora, su distribución de CloudFront debe almacenar en caché diferentes respuestas (con encabezados CORS correctos) para diferentes encabezados de Origen de cliente.

Answer 3

No del todo seguro cuál es su problema, pero:

https://forums.aws.amazon.com/thread.jspa?messageID=377513

respondió algunos de mis problemas con CORS, S3 y Cloudfront.

También encontré que algunos activos dentro de un cubo regresarían con los encabezados CORS correctos y otros no. Después de invalidar los activos, todos regresaron con los encabezados correctos, sin estar seguros de por qué algunos necesitaban invalidación y otros no, ya que se cargaron al mismo tiempo, el mismo tipo de cubo :(