Heroku + CDN Cloudfront + Fonts - Firefox bugs

Question

Recently we moved our assets on a CDN Cloudfront. We have noticed that the surfaces were broken on Firefox. After a few minutes of searching, it was a story of CORS. We allowed the field Cloudfront.

application_controller:

after_filter :set_access_control_headers

def set_access_control_headers
  headers['Access-Control-Allow-Origin'] = CDN_CLOUDFRONT
end

production.rb:

CDN_CLOUDFRONT = "http://xxx.cloudfront.net"

This worked very well until yesterday. After several searches and reflections, I have not found a solution.

Any idea?

Answer 1

I haven't worked with a Heroku setup, but AFAIK (and as illustrated at developer.mozilla.org), the header Access-Control-Allow-Origin should reflect a value of the domain which consumes static assets from the CDN.

E.g.: For a website hosted at http://mydomain.net and consuming assets from http://wefe342r34r23.cloudfront.net

headers['Access-Control-Allow-Origin'] = 'http://mydomain.net'

Will allow mydomain.net to access assets via http://wefe342r34r23.cloudfront.net. In other words, replacing CDN_CLOUDFRONT with your website's domain name should solve the problem.

Hope this helps.

P.S.: I'm not sure how your setup worked until yesterday. :)

P.P.S: Adding Alternate Domain Names (CNAMEs) to your CDN will help you in a scenario wherein you want to quickly discard an existing distribution exposed over http://xxx.cloudfront.net and start using a fresh distribution http://yyy.cloudfront.net. You won't need to change anything in your application codebase if you are using an Alternate Domain Name such as http://cdn.mydomain.net in that case.