Geblockte Schriften nach Umstellung auf HTTPS?

Als Reaktion auf Googles Ankündigung, nicht verschlüsselte Websites ab Oktober noch deutlicher zu kennzeichnen, migrieren wir derzeit viele Sites unserer Kunden auf HTTPS. Hierbei taucht gelegentlich ein Problem auf, welches vermutlich auch andere Entwickler hin und wieder antreffen:

Nach der Migration kann es vorkommen, dass Schriften nicht mehr korrekt dargestellt werden. In der Console erscheint folgender Fehler:

Access to Font […] has been blocked by CORS policy: No ‚Access-Control-Allow-Origin‘ header is present on the requested resource. Origin […] is therefore not allowed to access.

SOP und CORS – Sicherheitskonzept für Skripte unterschiedlicher Herkunft

Seit über 20 Jahren folgen Browser der sogenannten Same Origin Policy (SOP). Dieses Sicherheitskonzept erlaubt Skripten wie JS oder CSS, nur auf Objekte (in unserem Fall Fonts) zuzugreifen, die von derselben Quelle stammen wie das Skript selbst. Dadurch wird verhindert, dass eine Website Objekte anzeigt, deren Herkunft eventuell in geringerem Masse vertrauenswürdig ist, als die der eigentlichen Site.

Um dies zu umgehen gibt es eine Möglichkeit, fremde Quellen gezielt zu erlauben. Dieser Mechanismus wird als Cross-Origin Resource Sharing, kurz CORS, bezeichnet. Über den  HTTP-Header können so beispielsweise zusätzliche vertrauenswürdige Quellen angegeben werden.

Fonts über CORS erlauben

In unserem Fall wurde das Laden einer Font aufgrund der SOP unterbunden. Wir können für diese nun über die .htaccess eine Ausnahme erstellen:

# CORS für Fonts
<IfModule mod_headers.c>
  <FilesMatch "\.(woff|woff2|ttf)$">
    Header unset Vary
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Wir haben hier für Dateien mit den Endungen woff, woff2 und ttf jede Quelle erlaubt. Anstatt des Ausdrucks „*„, welcher alle Quellen für diese Dateitypen erlaubt, kann natürlich auch eine definierte URL stehen. In unserem Fall würde es genügen „http://www.domain-der-site.ch“ zu setzen.

Wir hoffen, dem ein oder anderen mit unserer Erklärung helfen zu können. Falls Fragen hierzu bestehen, hinterlassen Sie doch einfach einen Kommentar.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.