[解決済み] Amazon S3 CORS (Cross-Origin Resource Sharing)とFirefoxのクロスドメインフォントローディング

質問

Firefox で、現在のウェブページとは異なるオリジンからのフォントを読み込まないという問題が長く続いています。通常、この問題はフォントが CDN で提供されているときに発生します。

さまざまな解決策が他の質問で提起されています。

CSSの@font-faceがFirefoxで動作せず、ChromeとIEで動作する。

Amazon S3 CORS の導入に伴い、Firefox でのフォント読み込みの問題に対処するために CORS を使用したソリューションはありますか？

edit: S3 CORS の設定のサンプルを見ることができるとうれしいです。

edit2: 実際に何をしたのか理解できないまま、動作する解決策を見つけました。もし誰かがコンフィグとAmazonのコンフィグの解釈で起こるバックグラウンドマジックについてより詳細な説明を提供してくれるなら、それに懸賞金を出したnzifnabと同様に、それは非常に感謝されるでしょう。

どのように解決するのですか？

2014年9月10日に更新しました。

CloudfrontがCORSを適切にサポートするようになったので、以下のクエリ文字列のハックはもう必要ないはずです。以下を参照してください。 http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ およびこの回答を参照してください。 https://stackoverflow.com/a/25305915/308315

OK、ドキュメントにある例から少し手を加えて、以下の設定を使ってようやくフォントが動作するようになりました。

私のフォントはS3上でホストされていますが、cloudfrontによってフロントされています。

なぜそれが動作するのかよくわかりません。私の推測では、おそらく <AllowedMethod> GET と <AllowedHeader> Content-* が必要です。

Amazon S3 CORS 設定に詳しい人がこの件に光を当ててくれるなら、それは非常に感謝されるでしょう。

<?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>

を編集します。

一部の開発者は、Cloudfrontがキャッシュしている Access-Control-Allow-Origin ヘッダをキャッシュする問題に直面している開発者がいます。この問題については、AWSのスタッフがリンク先( https://forums.aws.amazon.com/thread.jspa?threadID=114646 ) の中で、@Jeff-Atwood さんのコメントとして紹介されています。

リンク先のスレッドでは、回避策として クエリ文字列 を使うことが推奨されています。ここでは、その短縮された例を再現します。

使用方法 curl を使ってレスポンスヘッダをチェックします。

ドメインA：a.domain.com

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

ドメインAからのレスポンスヘッダ。

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

ドメインB：b.domain.com

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

ドメイン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

このとき Access-Control-Allow-Origin は異なる値を返しており、Cloudfront のキャッシュを通過していることがわかります。