7

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?

Matthew Morek
  • 2,826
  • 2
  • 17
  • 13
JayMore
  • 211
  • 5
  • 8

2 Answers2

9

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.

Community
  • 1
  • 1
AsGoodAsItGets
  • 2,886
  • 34
  • 49
  • 1
    Why was this limit introduced only with web fonts? why not with css, js etc..? – elad.chen Dec 20 '17 at 13:56
  • @elad.chen I can only guess that the authors of the W3C spec intended fonts to be easily and freely loadable from other servers, which in a way makes sense. – AsGoodAsItGets Dec 20 '17 at 15:50
4

Thanks to AsGoodAsItGets’s answer, I was able to better understand a server config issue I was dealing with; everything was working well on a CAS authenticated server… But the fonts were consistently not being loaded as expected with other local assets.

While I appreciate AsGoodAsItGets’s answer, it did not provide a bare-bone practical example of how to to adjust a web server config on an authorized directory to allow fonts to pass trough, I decided to post this answer showing how to do it. It’s fairly simple; the override happens in the <FilesMatch> config stuff:

<Directory "/var/www/html">

  <IfModule mod_auth_cas.c>
    AuthType        CAS
    CASAuthNHeader  On
    Require valid-user
  </IfModule>

  <FilesMatch "\.(eot|svg|ttf|woff|woff2)$">
    AuthType None
    Allow from all
    Require all granted
    Satisfy Any
  </FilesMatch>

</Directory>

That config basically says, “If CAS is enabled use it and only allow CAS authenticated user’s through… But if a file extensions matches the common font extensions out there — .eot, .svg, .ttf, .woff and .woff2 — just let it pass without any authentication.”

Set that, restarted Apache and suddenly all the fonts appeared as expected and no errors in my browser’s inspector console.

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
  • 1
    Thanks for your answer @Giacomo1968 :) In my defense, we were not using Apache to serve the files, we were using a Java/Weblogic server, so I'm afraid your solution wouldn't have worked for us, that's why I proposed those 2 options in my answer. But I'm sure some people will find your answer helpful! – AsGoodAsItGets Feb 28 '21 at 19:20
  • 1
    @AsGoodAsItGets “…so I'm afraid your solution wouldn't have worked for us.” True. But Apache is a a very well known and popular web server. So my goal was to show an example of the overall logic: Authorize this stuff but exclude this stuff. But whatever, your advice cleared things up for me and now I have a new part of my brain primed to remember to add this stuff to the list of “gotchas” one has to face when setting up web servers in edge-case situations. – Giacomo1968 Mar 01 '21 at 02:47