Wie behebt man Probleme beim Laden von Cross-Origin-Schriftarten in Firefox mit Amazon S3 CORS?

Amazon S3 CORS und Firefox Cross-Origin-Schriftart-Ladeauflösung

Kürzliche Updates und eine funktionierende Lösung haben das seit langem bestehende Problem behoben, bei dem Firefox Schriftarten nicht aus Domänen laden konnte andere als die aktuelle Webseite. Dieses Problem tritt häufig auf, wenn Schriftarten über Content Delivery Networks (CDNs) bereitgestellt werden.

Durch die Nutzung von Amazon S3 Cross-Origin Resource Sharing (CORS) kann dieses Problem mit dem folgenden Ansatz gelöst werden:

Beispielkonfiguration für 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>

Verstehen der Lösung

Die bereitgestellte S3 CORS-Konfiguration ermöglicht Anfragen für Schriftartenressourcen aus bestimmten Domänen, wodurch Browsern die Berechtigung erteilt wird, Schriftarten unterschiedlicher Herkunft zu laden. Es erlaubt Methoden, Header und Antwortheader wie folgt:

• AllowedMethod: Gibt die HTTP-GET-Methode an, die von Browsern zum Abrufen von Schriftarten verwendet wird.
• MaxAgeSeconds: Legt einen Caching-Zeitraum für Antworten auf 3000 Sekunden fest, sodass Browser dies tun können Zwischengespeicherte Schriftarten wiederverwenden.
• AllowedHeader: Gewährt Browsern die Berechtigung, Content-*- und Host-Header in ihre Anfragen aufzunehmen, die zum Laden von Schriftarten erforderlich sind.

Alternative Lösung für Cloudfront-Caching-Probleme

In Fällen, in denen Cloudfront-Caching auftritt, besteht eine Problemumgehung darin, zur Unterscheidung eine Abfragezeichenfolge zu verwenden zwischen Aufrufen aus verschiedenen Domänen:

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

Dieser Ansatz stellt sicher, dass Cloudfront den entsprechenden Access-Control-Allow-Origin-Header basierend auf der angegebenen Abfragezeichenfolge bereitstellt.

Das obige ist der detaillierte Inhalt vonWie behebt man Probleme beim Laden von Cross-Origin-Schriftarten in Firefox mit Amazon S3 CORS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!