2

What I want:

I need to add some dynamic CSS styles with fonts from different domain, where authentication is needed, to the page:

Problem:

Firefox doesn't send cookie in font request (In Chrome everything works fine)

Situation:

Firefox v.30.0. Source of CSS file and Font are on different domain (in example is foreign domain called "bbb.com"). Foreign domain "bbb" needs authentication. After successful authentication client receive cookie with php session ID, which is using for all others request to "bbb.com" domain.

Example:

  1. Authentication for domain "bbb.com" has been successful executed
  2. By AJAX request to url "https://bbb.com/issue2604dead.css" client receive content of CSS file like a string
  3. Javascript create element with content received in previous step
  4. CSS styles works fine and style of affected elements is changed;
  5. One of definition in the CSS is following FONT reference: @font-face{font-family:dead_3;src:url(https://bbb.com/dead_3.ttf)format("opentype");}
  6. Browser trying to get font from url but client receive response status "401 Unauthorized";

EDITED:

I made example on jsFiddle: http://jsfiddle.net/RightFiveLeft/Pu4C2/9/

I found Firefox doesn't sent Cookie because reference is set in DOM element. If you load same resource by ajax browser will sent cookie.

So in my example on jsFiddle Cookie will be not sent on CSS request created by DOM element link.

EDITED 2

I am sorry for I added wrong example in jsFiddle . Now in version 9 it should be finally correct :-D

Martin Dědík
  • 71
  • 1
  • 8
  • are bbb.com contents served by a webserver you set up? – Lorenzo Marcon Jul 29 '14 at 16:00
  • Yes I have access to server where is located bbb.com – Martin Dědík Jul 29 '14 at 16:16
  • I tried add font reference to separated static css file but this same problem. FF doesn't sent cookie. – Martin Dědík Jul 30 '14 at 09:33
  • it'd be useful if you could provide us a test page with real code – Lorenzo Marcon Jul 30 '14 at 12:11
  • Example added and new behavior founded. – Martin Dědík Aug 01 '14 at 12:22
  • in 6. you said that browsing for the font will send a 401, but I get a 200. So I don't really get what is your problem, not even by looking at the net tabs on chrome and ff – Lorenzo Marcon Aug 01 '14 at 13:21
  • also, it's really unclear what you mean with your statement "firefox doesn't sent cookie". In your example, it's the web server that sends the cookie to firefox, not viceversa: in your XHR requests I don't see any cookie sent, not even with Chrome. – Lorenzo Marcon Aug 01 '14 at 13:33
  • 2 Lorenzo Marcon: Yes I said I receive 401 but that was on different internal website. For which I can't provide access to you. In example u will get receive 200 in all cases but u can see FF doesn't sent cookie for some request. – Martin Dědík Aug 01 '14 at 14:31
  • still can't get the problem. both ff and chrome don't send any cookie for any request in your fiddle. – Lorenzo Marcon Aug 01 '14 at 15:47
  • I am sorry guys for my bad examples what I added to jsFiddle. Now it should work and it should keep behavior which I described. So plaase test it again. http://jsfiddle.net/RightFiveLeft/Pu4C2/9/ – Martin Dědík Aug 03 '14 at 11:31

1 Answers1

1

You're right, there's something weird going on. On Safari (7.0.5), both the css and font request return 401. If you open the font or css request in a new Safari tab, it returns 401. If you refresh the fiddle again now, both request work correctly (200).

On firefox (31.0), the font issue persists. This could be a firefox policy for requests to another domain, or maybe.. simply a bug.

I found something that could be related, but requires access to the webserver to test it: CSS @font-face not working with Firefox, but working with Chrome and IE

By the way it looks like there are some differences and issues in the implementation of these requests even in other browsers, so I wouldn't rely too much on the authentication mechanism with cookie.

Another way could be change slightly the implementation of getFile.php, accepting a GET parameter (token) for the authentication. For example you could craft the request as:

.../getFile.php?fileName=testFont.ttf&_=1445&token=<auth token>

and test the authentication parameter against $_GET['token'] instead of cookie value.

If you can't or don't want to solve this way, I'd suggest you to evaluate the possibility to keep (only) the font without authentication. If this is a viable solution, the best option would be to serve it from a CDN.

Community
  • 1
  • 1
Lorenzo Marcon
  • 8,029
  • 5
  • 38
  • 63