Amazon S3 CORS (Cross-Origin Resource Sharing) y Firefox cruz-dominio de la carga de fuentes

Ha habido un problema de larga data con Firefox no carga en la fuente de origen diferente de la página web actual. Generalmente, la cuestión surgir cuando las fuentes se sirve en la Cdn.

Varias soluciones se ha planteado en otras preguntas:

CSS @font-face no funciona con Firefox, pero el trabajo con Chrome y el IE

Con la introducción de Amazon S3 CORS, hay una solución con CORS a la dirección de la fuente de carga problema en Firefox?

edición: sería genial ver una muestra de la S3 CORS de configuración.

edit2: he encontrado una solución de trabajo, sin comprender realmente lo que se hizo. Si alguien pudiera proporcionar explicaciones más detalladas acerca de las configuraciones y el fondo de la magia que sucede en Amazon la interpretación de la configuración, será muy apreciada, como con nzifnab que puso una recompensa por ello.

InformationsquelleAutor VKen | 2012-09-01

12 Kommentare

  1. 139

    Actualización De 10 De Septiembre De 2014:

    No es necesario hacer ninguna de la cadena de consulta de hacks a continuación, ya que Cloudfront admite CORS ahora. Ver http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ y esta respuesta para más info: https://stackoverflow.com/a/25305915/308315


    ACEPTAR, finalmente llegué a las fuentes de trabajo mediante la configuración a continuación con un poco de ajustar desde los ejemplos de la documentación.

    Mis fuentes están alojados en el S3, pero liderada por cloudfront.

    No estoy seguro de por qué funciona, mi conjetura es, probablemente, que el <AllowedMethod> GET y <AllowedHeader> Content-* es necesario.

    Si alguien competente con Amazon S3 CORS config puede arrojar algunas luces sobre esta, va a ser muy apreciado.

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>https://mydomain.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>Content-*</AllowedHeader>
            <AllowedHeader>Host</AllowedHeader>
        </CORSRule>
        <CORSRule>
            <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>Content-*</AllowedHeader>
            <AllowedHeader>Host</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>

    edición:

    Algunos desarrolladores se enfrentan a problemas de Cloudfront almacenamiento en caché de la Access-Control-Allow-Origin encabezado. Este tema ha sido abordado por la AWS personal en el enlace (https://forums.aws.amazon.com/thread.jspa?threadID=114646) a continuación, comentado por @Jeff-Atwood.

    De los enlaces de hilo, se aconseja, como alternativa, utilizar un de la Cadena de Consulta para diferenciar entre las llamadas de diferentes dominios. Voy a reproducir el acortado ejemplo aquí.

    Utilizando curl para comprobar los encabezados de respuesta:

    Dominio: a.domain.com

    curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

    Encabezados de la respuesta en el Dominio:

    Access-Control-Allow-Origin: https://a.domain.com
    Access-Control-Allow-Methods: GET
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    X-Cache: Miss from Cloudfront

    Dominio B: b.domain.com

    curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

    Encabezados de la respuesta en el Dominio B:

    Access-Control-Allow-Origin: http://b.domain.com
    Access-Control-Allow-Methods: GET
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    X-Cache: Miss from Cloudfront

    Usted notará que la Access-Control-Allow-Origin ha vuelto valores diferentes, que tiene más allá de la Cloudfront de almacenamiento en caché.

    • Bastante decepcionante documentación wrt este problema.
    • has experimentado problemas similares a lo descrito aquí – el Access-Control-Allow-Origin encabezado pone en caché y anular CORS posteriormente, cuando la solicitud se realiza a través de un subdominio?
    • No tengo experiencia en el tema de como puedo establecer explícitamente los dominios que utiliza los recursos. He leído el enlace que has publicado antes. He recordado vagamente algunas respuestas en otro hilo diciendo que los dominios tienen de forma explícita, por lo que <AllowedOrigin>*</AllowedOrigin> en realidad, no es permitido, debido a algunas restricciones. No puedo encontrar aquellos respuesta puestos de ahora, podría ser el blog que he leído en otros lugares. Espero que ayude.
    • Usted puede tener múltiples AllowedOrigin elementos dentro de un solo CORSRule elementos, así que usted puede combinar los CORSRules en un solo elemento, ya que los otros elementos son idénticos.
    • El OP estados que Cloudfront se utiliza en frente de S3, ¿usted no tiene un problema con Cloudfront almacenamiento en caché de los Access-Control-Allow-Origin cabecera y por lo tanto una respuesta de un dominio se rompe el otro?
    • si el S3 es servido por CloudFront, parece que la respuesta es variar la fuente de querystring por el dominio como se documenta en este oficial de Amazon respuesta: forums.aws.amazon.com/thread.jspa?threadID=114646
    • Esta ha sido una muy frustrante problema. La buena noticia es que el S3 ahora parece estar haciendo lo correcto, así que al menos es posible servir a todo lo que no webfonts a través de CloudFront y servir los archivos de fuentes directamente desde el S3. Lamentablemente, el querystring hack no es realmente práctico en nuestra aplicación sin más significativos de refactorización, como los bienes que son servidos a través de los Rieles de los activos de la tubería, y no hay manera conveniente modificar la Url de elementos en el momento de la solicitud (todos ellos son generados durante la implementación, cuando los activos están precompilados). La fuente de la URL en el css ya está en S3.
    • Comparto su dolor. Tengo problemas con IE9 almacenamiento en caché de archivo CSS para uso con el WWW subdominio, y la base de dominio sin el www. Esto hace que el frustrante fuente de problemas al cargar todo de nuevo.
    • Gracias por esto! En caso de que otra persona no puede averiguar por qué esto no parece funcionar, tuve que anular los objetos en CloudFront de lo contrario, las versiones en caché se utiliza: docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…
    • El querystring solución puede ayudar, pero no es una solución real. La única solución real si Cloudfront admite la Vary: Origin encabezado. (En la actualidad sólo se respeta Vary: Accept-Encoding)
    • Yo era capaz de conseguir este trabajo mediante la definición explícita de la <AllowedOrigin/> los encabezados. Cuando se utiliza un carácter comodín, los encabezados no se incluyeron incluso después de invalidar los archivos de cloudfront. No tuve necesidad de usar el querystring opción.
    • Hola @VKen , tengo lo mismo problema stackoverflow.com/q/22375472/1877909, pero no es trabajo para mí. Yo también agregó aws cors de configuración
    • Creo que la intención de usar curl -I ?
    • Nota importante para los de arriba: Usted no debería necesitar ningún tipo de de la cadena de consulta de hacks, ya que Cloudfront admite CORS ahora. Consulte aws.amazon.com/blogs/aws/enhanced-cloudfront-customization y esta respuesta para más info: stackoverflow.com/a/25305915/308315

  2. 90

    Después de algunos ajustes me parece que han conseguido que esto funcione sin la cadena de consulta hack. Más info aquí: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors

    Voy a ir a través de toda mi configuración para que sea fácil de ver lo que he hecho, espero que esta ayuda a los demás.

    Información De Fondo:
    Estoy usando una aplicación Rails que tiene el asset_sync joya para poner los activos a S3. Esto incluye fuentes.

    Dentro S3 consola, he hecho clic en mi cubo, propiedades y ‘editar cors configuración», aquí: Amazon S3 CORS (Cross-Origin Resource Sharing) y Firefox cruz-dominio de la carga de fuentes

    Dentro del textarea tengo algo así como:

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>https://*.example.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>

    A continuación, dentro de Cloudfront panel (https://console.aws.amazon.com/cloudfront/home) he creado una distribución, añadió un Origen que señalaba a mi S3
    Amazon S3 CORS (Cross-Origin Resource Sharing) y Firefox cruz-dominio de la carga de fuentes

    Que añadir un comportamiento de una ruta predeterminada a punto para el S3 basada en el origen I el programa de instalación. Lo que también me hizo fue, haga clic en lista Blanca encabezados y añadió Origin:
    Amazon S3 CORS (Cross-Origin Resource Sharing) y Firefox cruz-dominio de la carga de fuentes

    Lo que pasa es lo siguiente, que creo que es correcto:

    1) Compruebe que el S3 encabezados se establece correctamente

    curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
    HTTP/1.1 200 OK
    x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
    x-amz-request-id: F1FFE275C0FBE500
    Date: Thu, 14 Aug 2014 09:39:40 GMT
    Access-Control-Allow-Origin: https://example.com
    Access-Control-Allow-Methods: GET
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
    Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
    Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
    ETag: "98918ee7f339c7534c34b9f5a448c3e2"
    Accept-Ranges: bytes
    Content-Type: application/x-font-ttf
    Content-Length: 12156
    Server: AmazonS3

    2) Compruebe Cloudfront funciona con los encabezados de

    curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
    HTTP/1.1 200 OK
    Content-Type: application/x-font-ttf
    Content-Length: 12156
    Connection: keep-alive
    Date: Thu, 14 Aug 2014 09:35:26 GMT
    Access-Control-Allow-Origin: https://example.com
    Access-Control-Allow-Methods: GET
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
    Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
    ETag: "98918ee7f339c7534c34b9f5a448c3e2"
    Accept-Ranges: bytes
    Server: AmazonS3
    Vary: Origin
    X-Cache: Miss from cloudfront
    Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

    (Nota: el anterior era una falta de cloudfront debido a que estos archivos se almacenan en caché para 180 segundos, pero el mismo estaba trabajando en hits)

    3) Golpear cloudfront con un origen diferente (pero que se permite en CORS para el S3) – el Access-Control-Allow-Origin no se almacena en caché! yay!

    curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
    HTTP/1.1 200 OK
    Content-Type: application/x-font-ttf
    Content-Length: 12156
    Connection: keep-alive
    Date: Thu, 14 Aug 2014 10:02:33 GMT
    Access-Control-Allow-Origin: https://www2.example.com
    Access-Control-Allow-Methods: GET
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
    Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
    ETag: "98918ee7f339c7534c34b9f5a448c3e2"
    Accept-Ranges: bytes
    Server: AmazonS3
    Vary: Origin
    X-Cache: Miss from cloudfront
    Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

    Nota anteriormente de que el dominio ha cambiado correctamente sin una cadena de consulta hack.

    Cuando puedo cambiar el Origen de encabezado, no parece estar siempre un X-Cache: Miss from cloudfront en la primera solicitud, a continuación, después llego el esperado X-Cache: Hit from cloudfront

    P. S. vale la pena señalar que, al hacer curl-I (I mayúscula) NO se mostrará el Access-Control-Allow-Origin encabezados, ya que sólo una CABEZA, yo tengo que hacer un GET y desplácese hacia arriba.

    • Trabajó cuando todos los demás no. Gracias por tomarse el tiempo para publicar en el detalle!
    • Funciona!! FYI – tuve una gran respuesta http de texto cuando se prueba este… voy a editar la respuesta a usar esta curl solución … stackoverflow.com/questions/10060098/…
    • Bueno gracias chicos, me alegra ver que se está trabajando para otros.
    • No puedo decirte lo mucho que nos han ayudado! +1
    • +1 para agregar el cliente encabezado Origin de los espectadores, de modo que Cloudfront almacena el objeto basado en que de encabezado (de avance y el servidor CORS encabezados por el usuario)
    • gracias funcionó para mí. @EamonnGahan tengo una duda ¿por qué es trabajando muy bien para las imágenes y los archivos css que yo.e otro contenido estático.
    • Recomiendo el uso de Avanzadas Resto Cliente Extensión de Chrome ( chrome.google.com/webstore/detail/advanced-rest-client/… ) con el fin de ver lo que está pasando con los encabezados, se hace un gran trabajo de separar el contenido de los encabezados en la salida, así que usted no tenga que desplazarse tanto como usted lo hace en la terminal
    • Tan simple como eso! Sólo lista blanca, el ‘Origen’ de cabecera. Gracias Eamonn.
    • Muchas gracias por el comentario sobre el uso de -i vs -I cuando se prueba con curl. Yo no podía entender lo que estaba mal con mi CORS config, y la respuesta no fue nada, mi solicitud curl simplemente no se muestra el encabezado.
    • AWS sólo añade una similar CORS de configuración en el menú por defecto. He perdido unos minutos antes de darse cuenta de que es una especie de marcador de posición, se debe guardar la configuración antes de que sea tomado en cuenta para el real!
    • Esto no funciona. He añadido que CORS de configuración para mi existentes en la cubeta, y Chrome bloquea todas las solicitudes de Cloudfront.

  3. 13

    Mis fuentes fueron atendidos correctamente hasta el último empujón a Heroku… no sé por qué, pero el comodín en el CORS permitido origen dejado de funcionar. He añadido todos los de mi prepro y pro a los dominios de la CORS de la política en el cubo, así que ahora se parece a esto:

    <CORSConfiguration>
        <CORSRule>
            <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
            <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
            <AllowedOrigin>http://examle.com</AllowedOrigin>
            <AllowedOrigin>https://examle.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>Authorization</AllowedHeader>
        </CORSRule>
    
    </CORSConfiguration>

    ACTUALIZACIÓN: agregar su http://localhost:PORT demasiado

    • Gracias por compartir esta solución. Esto funcionó para mí.
  4. 8

    Bien, la documentación indica que se puede ajustar la configuración como «el cors subresource en su cubo». Me llevó esto significa que tendría que crear un archivo llamado «cors» en la raíz de mi cubo con la configuración, pero esto no iba a funcionar. Al final me tenía que entrar a Amazon S3, área de administración y agregar la configuración dentro de la properties de diálogo de mi cubo.

    S3 podría utilizar algo de la mejor documentación…

    • Sí, pero tuve la suerte de ver algunos de los nuevos cambios en la interfaz en el panel de propiedades. He estado editando las políticas de depósito, por lo que yo naturalmente la caza de CORS de configuración en el mismo panel.
    • trabajó para mí, yo estaba mirando para establecer esta en mi aplicación, que sabía que sería tan sencillo
  5. 6

    En mi caso, yo no había definido de espacio de nombres XML y la versión de CORS de configuración. La definición de los trabajado.

    Cambiado

    <CORSConfiguration>

    a

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    • A mi me funciona demasiado. Mis fuentes están alojados en el cubo de sí mismo.
    • Esto funcionó para mí también.
    • ¿Por qué la plantilla por defecto no se incluyen automáticamente esto es más allá de mí.
  6. 5

    En Amazon S3 CORS de configuración (S3 /Permisos /CORS) si utiliza este:

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>

    CORS funciona bien para los archivos Javascript y CSS, pero no funciona para archivos de Fuente.

    Usted tiene que especificar el dominio para permitir el CORS con el patrón expresado en el @VKen respuesta: https://stackoverflow.com/a/25305915/618464

    Así, el uso de este:

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

    Recuerde reemplazar «mydomain.com» para su dominio.

    Después de esto, invalidar la CloudFront caché (CloudFront /Invalidaciones /Crear Invalidación) y va a trabajar.

  7. 4

    Hay un mejor y más fácil manera!

    Yo personalmente prefiero usar mi DNS subdominios para resolver este problema. Si mi CDN está detrás de cdn.myawesomeapp.com en lugar de sdf73n7ssa.cloudfront.net a continuación, los navegadores no van a freakout y el bloque como la cruz de dominio de los problemas de seguridad.

    A punto de su subdominio de su AWS Cloudfront dominio de ir a AWS Cloudfront panel de control, seleccione su distribución Cloudfront y entrar en su CDN subdominio en la Alternativa de Nombres de Dominio (Cname) de campo. Algo como cdn.myawesomeapp.com va a hacer.

    Ahora usted puede ir a su proveedor de DNS (como AWS Ruta 53) y crear un registro CNAME para cdn.myawesomeapp.com apuntando a sdf73n7ssa.cloudfront.net.

    http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/

    • De esta forma se rompe SSL o, más bien, que cuesta un montón de dinero para hacer con SSL, por tanto, una gran cantidad de personas no hacen esto.
  8. 4

    Esta configuración que funcionó para mí. Puedo objeto de la lista, recuperar, actualizar y eliminar.

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
      <CORSRule>
        <AllowedOrigin>http://localhost:3000</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>
  9. 1
    <ifModule mod_headers.c>
    
       Header set Access-Control-Allow-Origin: http://domainurl.com
    
    </ifModule>

    Solución Simple

    • Gracias por compartir! Me dio la idea de añadir encabezado como «meta-datos» mientras carga estática de activos para almacenamiento en la nube. (a Pesar de que manera se va a trabajar con sólo 1 particular domain o all domains)
  10. 0

    Reiniciar mi primavera de arranque de la aplicación (servidor) resuelto el problema para mí.

    Me había configurado CORS correctamente en S3.
    El curl estaba dando la respuesta correcta con origen en el encabezado.
    Safari fue ir a buscar la fuente correctamente.
    Fue sólo el chrome que no estaba dispuesto a aceptar el CORS.

    No está seguro de qué provocó el comportamiento.
    Debe ser algo para hacer con If-modified-since

  11. -2

    Sí, por supuesto. Firefox soporta CORS de fuentes, como la especificación requiere en http://dev.w3.org/csswg/css3-fonts/#allowing-cross-origin-font-loading

    • Gracias por tu pronta respuesta, Boris Zbarsky. Te gustaría ser capaz de mostrar algunos ejemplos de configuraciones para el S3 CORS configuración?
    • Nunca he mirado en la configuración de S3… en cuanto a lo que a enviar en el HTTP de nivel, si estás bien con él sólo el envío de «Access-Control-Allow-Origin: *» en la respuesta HTTP para los archivos de fuentes que debe trabajar.
    • Gracias, estoy tratando de averiguar exactamente cómo hacer que ajuste con el S3 CORS configuraciones.
  12. -3

    Estaba experimentado el mismo problema. No tuve que agregar un registro CNAME para mi CDD para evitar cruz de dominio de los problemas… yo sólo tenía que hacer lo siguiente:

    Ir a su Cubo de propiedades -> Permisos -> Agregar más permisos -> Beneficiario: Todos y marque la opción ‘lista’.

    Este es un ejemplo gráfico. http://i.stack.imgur.com/KOEwy.png

    Esperanza plenamente esta va a ser útil para alguien.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea