How to Configure Amazon S3 CORS for Cross-Domain Font Loading in Firefox?

Amazon S3 CORS and Firefox's Cross-Domain Font Loading

Firefox encounters complexities in loading fonts from origins other than the current webpage, particularly when the fonts reside on CDNs. To address this issue, various solutions have been proposed, among them the implementation of Amazon S3 CORS (Cross-Origin Resource Sharing).

S3 CORS Configuration

To enable cross-domain font loading through S3 CORS, you must configure Amazon S3 as follows:

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

This configuration:

• Allows requests from the specified origins (mydomain.com and its subdomains).
• Limits requests to the GET method, which is used for fetching fonts.
• Specifies a caching time of 3000 seconds, reducing load on the server.
• Allows specific headers necessary for font retrieval (Content-Type and Host).

Cloudfront Caching Issue

Some users may encounter issues with Cloudfront caching the Access-Control-Allow-Origin header, preventing cross-domain font loading. To circumvent this, employ a query string to differentiate between requests from different domains. For instance:

<pre class="brush:php;toolbar:false">curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

In this example, the query string "?https_a.domain.com" uniquely identifies the request from domain "a.domain.com." Cloudfront will then return a customized Access-Control-Allow-Origin header for each domain.

The above is the detailed content of How to Configure Amazon S3 CORS for Cross-Domain Font Loading in Firefox?. For more information, please follow other related articles on the PHP Chinese website!