After thinking I had found a solution to the tricky issue of Firefox and CDN-hosted font access, Internet Explorer 9 proved otherwise.
An infuriating caching problem with IE9 led me to a blog post titled "IE9 Redirect Caching Nightmare," shedding light on the real issue at hand.
While uncertain if this directly relates to my problem, it certainly seems like a close match.
The Issue:
I have a website configured with two domains (base domain and subdomain) pointing to the same server. Both domains load the exact same content from a CDN hosted on Amazon S3 via Cloudfront.
https://example.com
https://www.example.com
Upon inspecting the IE9 developer tools console, I encountered error messages when trying to load fonts from my CSS file using @font-face:
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
This error popped up when visiting one URL first and then accessing the other. It's important to note that IE9 was not in Compatibility Mode but running in Document Mode: IE9 Standards.
My understanding of CORS and setting Access-Control-Allow-Origin HTTP header led me to configure it in the S3 CORS policy. While this worked seamlessly with Firefox, IE9 seemed to cache the redirect along with the Access-Control-Allow-Origin header, causing the discrepancy between domains.
Further investigation revealed similar behavior in Firefox 19, albeit less strict than IE9. Chrome, on the other hand, displayed different behavior altogether. This disparity leaves me questioning which browser's implementation is correct.
Despite current settings rerouting all www subdomain requests to the main domain for Chrome and Firefox, addressing the IE9 caching issue remains a challenge.
Potential Solutions:
- Allow all domains by setting Access-Control-Allow-Origin header to *
- Disable browser caching
- Redirect one domain to the other
- Use query string to differentiate domain calls for resources
- Embed fonts into CSS as data-uri
Option 1 feels overly broad, while option 2 may not be feasible considering mobile device usage. Redirecting domains or dynamically regenerating CSS for different domains incur their own complications.
Question: How can we specifically address IE9's redirect caching behavior in this scenario?
Any insights or suggestions would be greatly appreciated. Thank you!
Edit: Additional browser test findings.