We had a situation where some elements of a site were not displaying when the CDN was enabled. We were unsure why this happened. After troubleshooting and research we found it was a CORS issue and learned how to fix it.
The Problem
When we enabled our CDN and viewed the site in FireFox the drop down menu icons were missing but not in Chrome. It was clear an icon or element was not present. After some research we tracked down the missing icon. It was from Font Awesome. For some reason Font Awesome was not displaying when the CDN was enabled. Check out these images:
Font Awesome Missing:
Font Awesome Displaying:
Why was this Happening?
After some research and a helpful email from Justin Dorfman @jdorman of NetDNA, I learned about Cross Origin Resource Sharing (CORS) issues.
For those who have no idea what a CORS issue is, and that included me, here are the details. It is a security / safety feature that keeps browsers from accessing resources on different servers, which keeps bad people from doing bad things. Here is the CORS Wikipedia Page.
Here it is in English. When you turn on the CDN, the web server tells the browser to get some resources from the CDN and the CDN says get some files from Font Awesome server. The server also tells the browser it can not download fonts from another location. And that is a problem and your page does not correctly display. Well FireFox and IE pay attention to these rules Chrome does not.
The Solution
I found this NetDNA .htaccess example post. This a great example of what to add to your .htaccess file to improve performance.
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
By adding the above code the server is telling the browser it is okay to access font files from other servers.
The issue is now solved.
Resources used to help solve the issue
