Wie konfiguriere ich Amazon S3 CORS für das domänenübergreifende Laden von Schriftarten in Firefox?

Amazon S3 CORS und Firefox's domänenübergreifendes Laden von Schriftarten

Firefox stößt beim Laden von Schriftarten von anderen Ursprüngen als der aktuellen Webseite auf Komplexität, insbesondere wenn sich die Schriftarten auf CDNs befinden. Um dieses Problem anzugehen, wurden verschiedene Lösungen vorgeschlagen, darunter die Implementierung von Amazon S3 CORS (Cross-Origin Resource Sharing).

S3 CORS-Konfiguration

Um das domänenübergreifende Laden von Schriftarten zu ermöglichen S3 CORS, Sie müssen Amazon S3 wie folgt konfigurieren:

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

Dies Konfiguration:

• Ermöglicht Anfragen von den angegebenen Ursprüngen (mydomain.com und seine Subdomains).
• Beschränkt Anfragen auf die GET-Methode, die zum Abrufen von Schriftarten verwendet wird.
• Gibt eine Caching-Zeit von 3000 Sekunden an, wodurch die Belastung des Servers reduziert wird.
• Ermöglicht bestimmte Header, die für den Abruf von Schriftarten erforderlich sind (Content-Type und Host).

Cloudfront-Caching-Problem

Bei einigen Benutzern kann es zu Problemen kommen, wenn Cloudfront den Access-Control-Allow-Origin-Header zwischenspeichert und verhindert Domänenübergreifendes Laden von Schriftarten. Um dies zu umgehen, verwenden Sie eine Abfragezeichenfolge, um zwischen Anforderungen verschiedener Domänen zu unterscheiden. Zum Beispiel:

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

In diesem Beispiel identifiziert die Abfragezeichenfolge „?https_a.domain.com“ eindeutig die Anfrage von der Domäne „a.domain.com“. Cloudfront gibt dann für jede Domain einen angepassten Access-Control-Allow-Origin-Header zurück.

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich Amazon S3 CORS für das domänenübergreifende Laden von Schriftarten in Firefox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!