Self-Hosted Webfonts: Origin Considerations

Regarding my previous article, „Self-Hosted Webfonts„, various sources such as [1] suggest that additional measures should be taken so that unrelated web presences can not utilize the hosted fonts by simply referencing them on their own pages (thus „borrowing“ traffic by using a font file that someone else hosts).

Restricting cross-site requests can be accomplished (to some degree) by using „Access-Control-*“ headers. Here is how I do it in apache:

First I have to enable the „headers“ module (this example was performed on a Debian GNU/Linux with „apache2“):

 ~# a2enmod headers
 ~# service apache2 restart

Then I am able to specify (as part of the .htaccess affecting the fonts directory):

<FilesMatch "\.(ttf|otf|eot|woff)$">
   SetEnvIf Origin "^http(s)?://tk-sls\.de" origin_is=$0
   Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

What this means is:

„If the request’s ‚Origin‘ announces this request as part of a request from tk-sls.de (allowing http and https as protocol schemes), use the Origin-URL as value for the ‚Access-Control-Allow-Origin‘ header of the reply (otherwise do not set that reply header at all)“

Please note that anything that validates headers a user agent send is not offering a serious level of hard protection (because those can be easily forged). But this policy stuff is supported by the default settings of the mass browsers (IE, FF, Chrome etc.) and those will refuse to perform requests that my webserver thus advises against.

While we are at it, we can save some additional traffic by allowing more caching on the font files (they will never change anyway); so I put this inside of the „<FilesMatch>„, too:

   # allowing one week (in seconds):   
   Header set Access-Control-Max-Age 604800

References / Further reading:

[1] www.fontspring.com: „Webfonts are not loading in Firefox“
http://www.fontspring.com/support/troubleshooting/webfonts-are-not-loading-in-firefox