Firefox не отображает шрифты CloudFront

У меня есть приложение Rails, размещенное на Heroku. Во время развертывания активы синхронизируются с ведром Amazon S3 с помощью драгоценного камня asset_sync, и представления вызывают эти активы с помощью CloudFront. Тем не менее, шрифты не отображаются при просмотре веб-сайта с помощью Firefox (файлы загружаются на вкладку Net Firebug, но просто не используются). Safari отлично работает.

У меня есть следующая конфигурация CORS на S3:

<?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>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Мое приложение также устанавливает следующие заголовки:

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

Но CloudFront возвращает шрифты без них... Почему не загружаются шрифты? Спасибо заранее.

Ответ 1

Некоторые версии Internet Explorer и Firefox рассматривают шрифты вектор атаки и отказываются загружать их, если они предоставляются другим доменом (междоменная политика).

На стандартных HTTP-серверах все, что вам нужно сделать, это добавить заголовок Access-Control-Allow-Origin: *, чтобы обойти политику CORS. Проблема в том, что S3 не поддерживает отправку. (Хотя в соответствии со спецификацией он должен поддерживать CORS, заголовок не отправляется).

Существует обходное решение. CloudFront можно указать на другом сервере, который может отправлять заголовок Access-Control-Allow-Origin (это можно сделать с сервером, обслуживающим ваше приложение ;)).

Это можно сделать, добавив пользовательское происхождение к вашему дистрибутиву CloudFront с консоли AWS. Затем вам нужно будет добавить Behaviors с вашими типами шрифтов и недавно добавленным Origin. Вы можете использовать подстановочные знаки для имени файла. (Вам нужно сделать это один раз для каждого типа шрифта, который у вас есть).

Пример:

Path Pattern: /assets/*.woff

Когда вы готовы, вы можете проверить существование заголовка с помощью:

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

Надеюсь, вы увидите заголовок Access-Control-Allow-Origin, предоставленный вашим сервером вместе с самим файлом, кэшированным CloudFront с включенным заголовком.

Надеюсь, что это поможет!

Ответ 2

Попробуйте недействить ваши файлы с кешем в Cloudfront: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html#invalidating-objects-console

У меня была аналогичная проблема сегодня. Я прочитал article, который предположил, что конфигурации CORS кэшируются в CloudFront. Я разрешил свою проблему, аннулируя мои файлы шрифтов.

Ответ 3

Вот что выглядит моя конфигурация CORS. У меня есть другой AllowedHeader, чем вы. Я не использую asset_sync.

<?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>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Ответ 4

26 июня 2014 года AWS добавила поддержку CORS в CloudFront, так что теперь вы можете сделать эту работу только с CloudFront и S3.

Этот ответ SO предоставляет информацию о включении поддержки CORS для определенного дистрибутива CloudFront: fooobar.com/info/133094/...

Кроме того, вам нужно будет включить CORS на вашем ковре S3. Один из ответов здесь говорит о S3:

Хотя согласно спецификации он должен поддерживать CORS, Заголовок не отправляется

Из моего тестирования это только частично верно. Если в запросе отправляется заголовок Origin, то S3 правильно отправит заголовок Access-Control-Allow-Origin. Если заголовок Origin отправлен не, тогда S3 отправит не заголовок Access-Control-Allow-Origin.

В прошлом это вызвало проблемы с CloudFront. Если вы запросили CloudFront без заголовка запроса Origin, тогда CloudFront будет кэшировать ответ без заголовка ответа Access-Control-Allow-Origin. Это может произойти из-за того, что вы тестируете актив с помощью команды curl, и вы не включаете заголовок запроса Origin. Теперь, когда вы делаете запрос CloudFront с заголовком Origin, CloudFront игнорирует заголовок Origin и обслуживает кешированный ответ без заголовка Access-Control-Allow-Origin.

С изменениями, недавно выпущенными в CloudFront, вы можете настроить свой дистрибутив, чтобы принять заголовок запроса Origin. В этом случае CloudFront будет кэшировать разные ответы, один ответ для каждого значения заголовка Origin.