Amazon S3 CORS での Firefox のクロスドメインフォント読み込みの問題を解決するにはどうすればよいですか?

Amazon S3 CORS と Firefox のクロスドメインフォント読み込み: フォント読み込みの問題の解決

Firefox では、現在の Web ページとは異なるオリジンからフォントを読み込むときに問題が発生することが知られています。特にフォントが CDN でホストされている場合。この問題は、引用したものを含め、オンライン フォーラムで広く議論されています。

この課題に対処するために、Amazon S3 CORS (Cross-Origin Resource Sharing) は潜在的な解決策を提供します。 CORS を使用すると、サーバーは他のドメインからアクセスできるリソースを指定できるため、クロスドメインのセキュリティ制限が緩和されます。

S3 用に CORS を構成するには、フォントを含むバケットに XML ドキュメントをアップロードする必要があります。次の構成が推奨されます:

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

この構成では次のことが可能になります:

• 指定されたオリジン (mydomain.com) からの GET リクエスト
• 指定されたオリジンのサブドメイン
• CORS ヘッダーの最大存続期間を 3000 に設定します秒
• 「Content-」および「Host」で始まるリクエストヘッダーを許可します

ただし、Cloudfront の Access-Control-Allow-Origin ヘッダーのキャッシュにより、一部の開発者はクロスドメインフォントの読み込みに関する問題が報告されました。これを解決するための回避策は、クエリ文字列を使用して、異なるドメインからの呼び出しを区別することです。

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

このアプローチにより、Cloudfront はキャッシュの問題を回避して、異なるドメインに対して一意の応答を提供できるようになります。

結論として、Amazon S3 CORS とクエリ文字列の回避策を併用すると、Firefox のクロスドメイン フォント読み込みの問題を解決できます。さらにサポートが必要な場合は、引用した AWS フォーラムのスレッドを参照して、Amazon の専門家による追加の洞察と説明を参照してください。

以上がAmazon S3 CORS での Firefox のクロスドメインフォント読み込みの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。