Firefox no procesa fonts de CloudFront

Tengo una aplicación Rails , alojada en Heroku . Durante la implementación, los activos se sincronizan con un depósito de Amazon S3 a través de la gem asset_sync y las vistas llaman a esos activos a través de CloudFront . Sin embargo, las fonts no se procesan cuando se ve el sitio web con Firefox (los archivos se cargan en la pestaña Net de Firebug, pero simplemente no se usan). Safari funciona muy bien.

Tengo la siguiente configuración de CORS en S3:

    * GET 3000 Content-* Host   

Mi aplicación también establece los siguientes encabezados:

 Access-Control-Allow-Origin: * Access-Control-Request-Method: * 

Pero CloudFront devuelve fonts sin ellas … ¿Por qué no se cargan las fonts? Gracias por adelantado.

Algunas versiones de Internet Explorer y Firefox consideran que las fonts son un vector de ataque y rechazarán cargarlas si están siendo proporcionadas por otro dominio (política de dominio cruzado).

En los servidores HTTP estándar, todo lo que necesita hacer es agregar el encabezado Access-Control-Allow-Origin: * para omitir la política CORS. El problema es que S3 no soporta enviarlo. (Aunque según la especificación debería admitir CORS, el encabezado no se envía).

Hay una solución. CloudFront se puede apuntar a otro servidor que puede enviar el encabezado Access-Control-Allow-Origin (puedes hacerlo con el servidor que sirve a tu aplicación ;) ).

Esto se puede hacer agregando un Origen personalizado a su distribución de CloudFront desde la Consola AWS . A continuación, deberá agregar Comportamientos con sus tipos de fuente y el Origen recién agregado. Puede utilizar comodines para el nombre de archivo. (Tendrá que hacer esto una vez para cada tipo de fuente que tenga).

Ejemplo:

 Path Pattern: /assets/*.woff 

Cuando esté listo, puede validar la existencia del encabezado con:

 curl -I http://cloudfrontid.cloudfront.new/assets/font.woff 

Esperamos que vea el encabezado Access-Control-Allow-Origin , proporcionado por su servidor junto con el propio archivo, almacenado en caché por CloudFront con el encabezado incluido.

¡Espero eso ayude!

Intente invalidar sus archivos de fonts (en caché) en Cloudfront: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html#invalidating-objects-console

Tuve un problema similar hoy. Leí un artículo que sugería que las configuraciones de CORS se almacenan en caché en CloudFront. Resolví mi problema al invalidar mis archivos de fonts.

El 26 de junio de 2014, AWS agregó soporte para CORS en CloudFront, por lo que ahora puede hacer que esto funcione solo con CloudFront y S3.

Esta respuesta SO proporciona información sobre cómo habilitar el soporte de CORS para una distribución particular de CloudFront: https://stackoverflow.com/a/24459590/3195497

Además, deberá habilitar CORS en su cubeta S3. Una de las respuestas aquí dice con respecto a S3:

Aunque según la especificación debería ser compatible con CORS, el encabezado no se envía

De mis pruebas esto es solo parcialmente cierto. Si el encabezado Origin se envía en la solicitud, S3 enviará correctamente el encabezado Access-Control-Allow-Origin . Si el encabezado Origin no se envía, S3 no enviará el encabezado Access-Control-Allow-Origin .

En el pasado, esto ha causado problemas con CloudFront. Si realizó alguna solicitud a CloudFront sin un encabezado de Origin entonces CloudFront almacenará en caché una respuesta sin el encabezado de respuesta de Access-Control-Allow-Origin . Esto puede suceder porque está probando el activo con un comando curl y no incluye el encabezado de solicitud de Origin . Ahora, cuando realice una solicitud a CloudFront con el encabezado de Origin , CloudFront ignorará el encabezado de Origin y brindará la respuesta en caché sin el encabezado de Access-Control-Allow-Origin .

Con los cambios recientemente lanzados a CloudFront, puede configurar su distribución para tomar en cuenta el encabezado de solicitud de Origin . En este caso, CloudFront almacenará en caché diferentes respuestas, una respuesta para cada valor del encabezado Origin .

Así es como se ve mi configuración de CORS. Tengo un AllowedHeader diferente al tuyo. Yo no uso asset_sync.

    * GET 3000 Authorization