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

Résolution de chargement des polices d'origine croisée Amazon S3 CORS et Firefox

Des mises à jour récentes et une solution fonctionnelle ont résolu le problème de longue date avec Firefox qui ne parvenait pas à charger les polices à partir de domaines autre que la page Web actuelle. Ce problème survient généralement lorsque les polices sont diffusées via des réseaux de diffusion de contenu (CDN).

Grâce au partage de ressources d'origine croisée (CORS) d'Amazon S3, ce problème peut être résolu avec l'approche suivante :

Exemple de configuration 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>

Comprendre la solution

La configuration S3 CORS fournie permet de demander des ressources de polices à partir de domaines spécifiés, accordant aux navigateurs l'autorisation de charger des polices de différentes origines. Il autorise les méthodes, les en-têtes et les en-têtes de réponse comme suit :

• AllowedMethod : Spécifie la méthode HTTP GET, utilisée par les navigateurs pour récupérer les polices.
• MaxAgeSeconds : définit une période de mise en cache pour les réponses à 3 000 secondes, permettant aux navigateurs de réutiliser les polices mises en cache.
• AllowedHeader : accorde aux navigateurs l'autorisation d'inclure les en-têtes Content-* et Host dans leurs requêtes, nécessaires au chargement des polices.

Solution alternative pour le problème de mise en cache Cloudfront

Dans les cas où la mise en cache Cloudfront est rencontrée, une solution de contournement consiste à utiliser une chaîne de requête pour différencier appels provenant de différents domaines :

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

Cette approche garantit que Cloudfront diffuse l'en-tête Access-Control-Allow-Origin approprié en fonction de la chaîne de requête spécifiée.

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!