Cross-domain Verwendung von @font-face im Firefox ermöglichen

CSS3 ermöglicht uns es bekanntlich, per @font-face eigene Schriftarten einzubetten. Alle modernen Browser unterstützen diese Funktion, auch wenn nicht alle die gleichen Dateiformate unterstützen. Das macht zwar die Umsetzung etwas aufwändiger, aber nicht unmöglich. Unsere Website dient als Beispiel dafür.

Cross-domain Verwendung von @font-face

Liegt die referenzierte Schriftart allerdings nicht auf der gleichen Domain, - das gilt auch für Subdomains! - stößt man jedoch plötzlich auf das Problem, dass der Code im Firefox nicht mehr funktioniert, in den anderen Browsern jedoch schon. Warum? Die Antwort liegt auf der Hand: es handelt sich um eine Sicherheitseinschränkung im Firefox, die sogar sehr sinnvoll ist. Dadurch wird verhindert, dass zB fremde Websites die Schriftart von Ihrem Server referenzieren - und damit stehlen.

Zugriff erlauben per .htaccess

Firefox geht also den restriktiven Weg und verbietet den Zugriff auf die Schriftart, wenn die Anfrage von einer fremden Domain kommt und keine explizite Erlaubnis des Servers vorliegt, dass die fremde Domain die Schriftart auch wirklich verwenden darf. Die Erlaubnis kann man in der .htaccess Datei vornehmen, indem man der Schriftart-Datei im HTTP-Header den Wert für die "Access-Control-Allow-Origin" entsprechend setzt. Mozilla dokumentiert das im folgenden Artikel sehr ausführlich: https://developer.mozilla.org/En/HTTP_access_control

Pauschale Erlaubnis für alle Domains

Der einfachste Weg wäre, den Zugriff mit dem Stern als Wildcard für alle Domains zu ermöglichen:

<FilesMatch "\.(ttf|otf|svg|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Das würde jedoch wieder allen fremden Sites Tür und Tor öffnen, sich an Ihren Schriftarten zu bedienen. Vom Sicherheitsaspekt her ist dieser Ansatz daher nicht empfehlenswert. Besser wäre es, den Zugriff auf bestimmte Domains einzuschränken.

Einschränkung auf bestimmte Domains

<FilesMatch "\.(ttf|otf|svg|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://agoradesign.at,http://demo.agoradesign.at"
</IfModule>
</FilesMatch>

Laut der Mozilla-Doku ist die komma-getrennte Angabe mehrerer Domains zulässig - leider nur in der Theorie. Die Schriftart wird leider nicht korrekt geladen, wenn man mehrere Domains angibt. Offensichtlich existiert hier ein Firefox-Bug, der bis dato (Version 3.6.8) noch nicht beseitigt wurde.

Firefox-taugliche Variante

Kurz bevor wir zu der unschönen Lösungsvariante gegriffen haben, die Schriftarten in mehreren Ordnern mit unterschiedlichen Zugriffsrechten zu duplizieren, sind wir zum Glück noch auf diesen tollen Artikel gestoßen, der das Problem mittels RegEx löst: http://www.lowest-common-denominator.com/2010/01/http_access_control_to_multipl.php

Folgende Variante erlaubt den Zugriff von agoradesign.at, agora-design.at und allen Subdomains davon:

<FilesMatch "\.(ttf|otf|svg|eot)$">
SetEnvIf Origin "^http(s)?://(.+\.)?(agoradesign\.at|agora-design\.at)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Vielen Dank an Brook Elgie für diese sehr elegante Problemlösung!

Kommentare

Vielen Dank für diese tollen Hinweise! Das hat mir weitergeholfen, nachdem ich schon ganz verzweifelt war. :)))))

Freut mich, wenn ich Dir helfen konnte :-)

Danke für den guten Artikel, genau nach dieser Problemlösung habe ich gerade gesucht. :)

Hallo,

ich finde den Artikel sehr interressant! Allerdings habe ich eine Frage. Und zwar würde ich gerne wissen wollen wo ich die .htaccess ablegen soll? Auf dem Server der Website? (Dann kann ich ja auch gleich die Schriften dort platzieren???) Oder auf dem "externen"-Server wo die Schriften bzw. die .eot, .svg usw. liegen.

 

Ich hoffe ihr könnt mir helfen.

Gruß Mirko

Auf den externen Server, wo die Schriften legen!

Schöner Beitrag, hat mir sehr geholfen - danke :)

Hallo,

ich habe mir das gerade genauer angeschaut.

Die Lösung funktioniert im aktuellen Firefox 15 nicht mehr!

Die erste Seite die angesurft wird, stellt die Schriftart korrekt dar. Danach, also ab der 2. Seite geht es nicht mehr!

Hallo Leute

vielen Dank für eure posts,, welche mich dem Problem näher brachten und trotzdem ist es auch bei mir so, dass die Schrift auf der Startseite angezeigt wird und auf den folgenden Pages dann nicht mehr. Gibt es da schon neue Lösungsansätze.?'

vielen Dank für die Hilfe

Hallo Andreas,

 

Vielen Dank für deine Lösung. Ich stand erst einmal auf dem Schlauch und fragte mich warum bei meiner Co-Domain, die ja nur eine Weiterleitung auf meine Hauptdomain ist, die Socialicons nicht geladen werden konnten (font-family: Glyphicons).

Nach ein bisschen Recherche und deinem Codeschnippsel  funktoniert es jetzt aber.

Mir ist aber aufgefallen das nicht jeder Browser diese Sicherheitsvorkehrungen hat, wie z.B. Safari

Während ich das gleiche Problem, wiederum mit Google Chrome habe. Gibt es denn keine Lösung für alle Browser?

Gruß Michael

 

Vielen Dank, hat mir sehr geholfen! Kleine Ergänzung:
SetEnvIf Origin "^http(s)?://(.+\.)?(agoradesign\.at|agora-design\.at)$" origin_is=$0 Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is wenn mod_headers nicht installiert ist: sudo a2enmod headers sudo /etc/init.d/apache2 restart

Hallo, ich habe alle varianten bereits ausprobiert aber leider noch kein Erfolg gehabt. Egal ob ich es per .htacces oder im Template mit der PHP-Funktion versuche ich bekomme immer die cross-site acces not allowed Fehlermeldungen. Gruß Tim

Hallo, ich habe das Problem, dass dieses Phänomen auch auftritt, wenn ich keinen Webserver verwende und die entsprechenden Daten in unterschiedlichen Ordnern im Filesystem liegen. so inder Art: ...../reports ...../css ...../reports/report1 ...../reports/report2 Die report1... Verzeichnisset werden täglich erzeugt. da ich die Css- und Font-Dateien nicht jedes Mal mitschicken möchte, sind sie ins css-Verzeichnis ausgelagert. Beim Laden eines Reports mit dem Firefox bekomme ich aber die Meldung "bad URI or cross-site access not allowed source: " kann hier jemand helfen?

Neuen Kommentar schreiben