Webfonts in CDN ablegen (Access-Control-Allow-Origin)

Ich verwende gern die Webfonts Font Awesome um meine Projekte ein wenig zu verschönern. Das Projekt bietet neben einem CDN auch die Möglichkeit die Projektdateien herunterzuladen. Kurz den Pfad zu den Fonts anpassen und schon kann es losgehen.

Bei Absoluten Pfaden hat man aber schnell das Problem, das beim Ablegen der Fonts im CDN (oder unter einer Subdomain für statische Inhalte) der Browser das Laden aufgrund des fehlenden Access-Control-Allow-Origin Header blockt.

Um den Zugriff nun auch von anderen Domains aus zu erlauben, z.B. einer lokalen Testumgebung, kann bei einem Apache die Site-Konfiguration oder eine .htaccess Datei genutzt werden.

Ich habe dazu einfach die folgende Zeilen in die .htaccess geschrieben.

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

Hinweis: Beim Apache muss das Modul headers aktiviert sein. Unter Ubuntu funktioniert das wie folgt.

$ sudo a2enmod headers
$ sudo service apache2 restart

Bei der Verwendung eines NGINX einfach die folgenden Zeilen in die Konfigurationsdatei einfügen.

if ($filename ~* ^.*?\.(ttf)|(ttc)|(otf)|(eot)|(svg)|(woff)$){
	add_header Access-Control-Allow-Origin *;
}

HTTP Komprimierung via PHP (ohne mod_gzip)

Sollte man auf seinem Server/Webspace kein mod_gzip zur Verfügung haben, so kann man die HTTP Komprimierung z.B. auch von PHP übernehmen lassen. Nachteil ist allerdings, das dadurch die CPU Last erhöht wird.

Einfach in die .htaccess Datei die folgende Zeile einfügen:
[text]php_value output_handler ob_gzhandler[/text]

Alternativ kann es auch direkt im PHP Code eingetragen werden:
[php]<?PHP
// Im Header
ob_start(“ob_gzhandler”);

// PHP Code

// Am Ende noch
ob_end_flush();
?>
[/php]

.htpasswd unter Xampp (Windows)

Auf Testsystemen sollte eigentlich die selbe Umgebung wie im Produktivsystem existieren. Wenn nicht auf virtuelle Maschinen gesetzt wird, kann das schon recht schwierig sein. Zum Entwickeln von Webanwendungen reicht aber auch ein „Normaler PC mit Windows“ und Xampp Installation.

Um dort nun einen Passwortschutz zu einzurichten sollte die .htaccess in etwa so aussehen:

AuthUserFile C:\xampp\htdocs\pass.txt
AuthName "Geschützter Bereich"
AuthType Basic
<Limit GET POST>
Require valid-user
</Limit>

Die .htpasswd kann so erstellt werden:

C:\xampp\apache\bin>htpasswd -bc C:\xampp\htdocs\pass.txt USER PASS
Automatically using MD5 format.
Updating password for user USER

!!! Wichtig !!!

Auf keinen Fall sollte dieses Beispiel in einem Produktivsystem zum Einsatz kommen! Die Datei .htpasswd sollte immer ausserhalb des DocumentRoot liegen!

PHP5 bei 1und1 aktivieren

Um eine aktuelle Version von WordPress zu installieren benötigt man PHP5.
Bei einigen Providern ist PHP5 bis heute noch nicht die der Standard.
Bei 1und1 zum Beispiel muss man in der .htaccess im Root Verzeichnis den folgenden Eintrag hinzufügen:

[text]AddType x-mapp-php5 .php[/text]