Comment puis-je résoudre les problèmes de chargement des polices inter-domaines de Firefox avec Amazon S3 CORS ?

Chargement des polices inter-domaines Amazon S3 CORS et Firefox : résolution des problèmes de chargement des polices

Firefox est connu pour rencontrer des problèmes lors du chargement de polices provenant d'une origine différente de celle de la page Web actuelle. , en particulier lorsque les polices sont hébergées sur des CDN. Ce problème a été largement discuté dans les forums en ligne, y compris celui cité.

Pour relever ce défi, Amazon S3 CORS (Cross-Origin Resource Sharing) propose une solution potentielle. CORS permet aux serveurs de spécifier des ressources accessibles depuis d'autres domaines, atténuant ainsi les restrictions de sécurité entre domaines.

Pour configurer CORS pour S3, un document XML doit être téléchargé dans le compartiment contenant les polices. La configuration suivante est recommandée :

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

Cette configuration permet :

• GET requêtes de l'origine spécifiée (mondomaine.com)
• Sous-domaines de l'origine spécifiée
• Définit l'âge maximum des en-têtes CORS à 3 000 secondes
• Autorise la demande en-têtes qui commencent par "Content-" et "Host"

Cependant, en raison de la mise en cache par Cloudfront de l'en-tête Access-Control-Allow-Origin, certains développeurs ont signalé des problèmes de chargement des polices entre domaines. Pour résoudre ce problème, une solution de contournement consiste à utiliser une chaîne de requête pour différencier les appels provenant de différents domaines :

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

Cette approche permet à Cloudfront de fournir des réponses uniques pour différents domaines, en contournant le problème de mise en cache.

En conclusion, l'utilisation d'Amazon S3 CORS avec la solution de contournement de chaîne de requête peut résoudre les problèmes de chargement de polices inter-domaines de Firefox. Si une assistance supplémentaire est nécessaire, reportez-vous au fil de discussion du forum AWS cité pour obtenir des informations et des explications supplémentaires de la part d'experts Amazon.

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!