Comment configurer Amazon S3 CORS pour le chargement de polices inter-domaines dans Firefox ?

Amazon S3 CORS et chargement de polices inter-domaines de Firefox

Firefox rencontre des complexités lors du chargement de polices à partir d'origines autres que la page Web actuelle, en particulier lorsque les polices résident sur des CDN. Pour résoudre ce problème, diverses solutions ont été proposées, parmi lesquelles la mise en œuvre d'Amazon S3 CORS (Cross-Origin Resource Sharing).

Configuration S3 CORS

Pour activer le chargement des polices inter-domaines via S3 CORS, vous devez configurer Amazon S3 comme suit :

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

Ceci configuration :

• Autorise les requêtes provenant des origines spécifiées (mondomaine.com et ses sous-domaines).
• Limitation des requêtes à la méthode GET, qui est utilisée pour récupérer les polices.
• Spécifie un temps de mise en cache de 3 000 secondes, réduisant ainsi la charge sur le serveur.
• Autorise des en-têtes spécifiques nécessaire pour la récupération des polices (Content-Type et Host).

Problème de mise en cache Cloudfront

Certains utilisateurs peuvent rencontrer des problèmes avec Cloudfront mettant en cache l'en-tête Access-Control-Allow-Origin, empêchant les -chargement des polices de domaine. Pour contourner ce problème, utilisez une chaîne de requête pour différencier les requêtes provenant de différents domaines. Par exemple :

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

Dans cet exemple, la chaîne de requête "?https_a.domain.com" identifie de manière unique la requête du domaine "a.domain.com". Cloudfront renverra ensuite un en-tête Access-Control-Allow-Origin personnalisé pour chaque domaine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!