Amazon S3 CORS peut-il résoudre les problèmes de chargement de polices d'origine croisée de Firefox ?

Résolution du chargement de polices d'origines croisées dans Firefox avec Amazon S3 CORS

Firefox a un problème de longue date avec le chargement de polices d'origines différentes de celles la page Web. Ce problème survient souvent lorsque les polices sont hébergées sur des CDN. Bien que diverses solutions aient été proposées, Amazon S3 CORS (Cross-Origin Resource Sharing) peut-il être utilisé pour résoudre ce problème ?

Configuration CORS pour le chargement des polices

Pour activer chargement des polices via CORS, configurez votre compartiment S3 avec la politique CORS suivante :

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

Cette configuration autorise les requêtes GET de votre domaine spécifié avec des en-têtes spécifiques, permettant le chargement de polices d'origine croisée.

Solution de contournement de la chaîne de requête

Si Cloudfront met en cache l'en-tête Access-Control-Allow-Origin, envisagez d'utiliser une chaîne de requête pour différencier les appels provenant de différents domaines :

Par exemple, pour le Domaine A :

https://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

Et pour le Domaine B :

https://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

Cette solution de contournement garantit que Cloudfront diffuse les en-têtes CORS corrects 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!