My CSS files upload web fonts woff files located on another https + auth server (related to CORS)

Question

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

I need to enable CORS in order to allow booting between domains, but it seems that I cannot load resources from another domain if this domain is the base domain and I use an authenticated proxy.

I added the following directives to Apache:

 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 resolve all Origin, but when CSS loads the woff file (via a 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 

Answer (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 reinstall media.site1.com before going to www, the result will be the same. It seems that the browser does not send basic authorization credentials to the "media" server.

Are there any additional headers I have to set to ensure that WOFF files are downloaded from another location, with basic authentication and, ultimately, with an authenticated proxy?

Answer 1

We faced the same situation.

According to the W3C specification, fonts associated with CSS files must be loaded in anonymous mode: https://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-fetching- requirements Therefore, basically the browser usually does not send authentication cookies.

As I understand it, you have 2 options:

• Disable font file authentication at https://media.site1.com
• This is a hack, and I'm not quite sure if this will work. You can try to execute 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 do this by for performance reasons, but, nevertheless, the idea is to download the font file separately, so when the CSS file is loaded, the browser will get it from its cache. You may need to add the withCredentials header to your AJAX call, as described here: fooobar.com/questions/87016 / ... Also, given that you usually load CSS files at the top of your page and JavaScript at the bottom so you don't have to load at first CSS file and issue failed requests, you will need to dynamically load it when the AJAX callback is successful.

I know that the second solution seems too complicated, but I could not come up with a better one.