My CSS cant load web font woff files located on an other https+auth server (CORS related)

Question

My CSS is hosted on https://www.site1.com (it is an authenticated domain) and it uses woff/ttf files located on https://media.site1.com (it is also authenticated - same auth than www). To connect to these sites, I must use an authenticated proxy.

I have to enable CORS to allow cross domain loading, but it seems that I can't load resources from another domain if this domain is basic-authenticated AND I use an authenticated proxy.

I have added in Apache the following directives:

SetEnvIf Origin "^http(s)?://(.*)$" origin_is=$0 
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "*"

It should allow all Origin, but when the CSS loads the woff file (via GET request), I get:

Request (only interesting headers) :

GET file.woff HTTP/1.1
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Host  media.site1.com
Origin  https://www.site1.com
Proxy-Authorization Basic XXX1234567
Connection  keep-alive
Cache-Control   max-age=0

Response (as seen by Firebug or Httpfox) :

HTTP/1.0 401 Unauthorized
WWW-Authenticate    BASIC realm="Unspecified"
Server  BigIP
Connection  close
Content-Length  0

If I manually authenticate to media.site1.com before going to www, the result is the same. It seems that the browser does not send basic-auth credentials to the "media" server.

Are there any additional headers I have to set to ensure that WOFF files are loaded from a different location, with basic-authentication and eventually with an enterprise authenticated proxy?

Answer 1

We just ran into the same situation.

According to the W3C spec, fonts linked from CSS files must be loaded in "anonymous" mode: https://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-fetching-requirements So basically the browser will normally never send the authentication cookies.

The way I understand it, you have 2 options:

1. Disable authentication for font files on https://media.site1.com
2. This is a hack and I'm not entirely sure it will work. You can try to issue an AJAX request to load the font before the CSS file, as described here: https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ Of course, in this article they are doing it for performance reasons, but nevertheless, the idea is to load the font file seperately, so that when the CSS file is loaded the browser will get it from its cache. You may need to add the withCredentials header in your AJAX call, as described here: https://stackoverflow.com/a/7190487 Also, given that usually you load CSS files at the top of your page and JavaScript at the bottom, to prevent the CSS file from loading first and issuing the failed requests you will need to load it dynamically on the success callback of the AJAX call.

I know the 2nd solution seems like too much trouble, but I couldn't come up with a better one.