Cloudfront CORS issue serving fonts on Rails application

Question

I keep receiving this error message from the console when visiting my website:

font from origin 'https://xxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.

I've tried everything:

• I've installed the font_assets gem

• configured the application.rb file

  config.font_assets.origin = 'http://example.com'
  

• Whitelisted Headers on Cloudfront as explained in this article to

  Access-Control-Allow-Origin
  Access-Control-Allow-Methods
  Access-Control-Allow-Headers
  Access-Control-Max-Age
  

But nothing, zero, nada.

I'm using Rails 4.1 on Heroku.

Answer 1

This was an incredibly difficult issue to deal with, for two reasons:

1. The fact that CloudFront is mirroring our Rails app’s response headers requires you to twist your mind around. The CORS protocol is hard enough to understand as it is, but now you have to follow it at two levels: between the browser and CloudFront (when our Rails app uses it as a CDN), and between the browser and our Rails app (when some malicious site wants to abuse us).

   CORS is really about a dialog between the browser and the 3rd-party resources a web page wants to access. (In our use-case, that’s the CloudFront CDN, serving assets for our app.) But since CloudFront gets its Access-Control response headers from our app, our app needs to serve those headers as if it is CloudFront talking, and simultaneously not grant permissions that would expose itself to the type of abuse that led to the Same-Origin Policy / CORS being developed in the first place. In particular, we should not grant * access to * resources on our site.

2. I found so much outdated information out there -- an endless line of blog posts and SO threads. CloudFront has improved its CORS support significantly since many of those posts, although it is still not perfect. (CORS should really be handled out-of-the-box.) And the gems themselves have evolved.

My setup: Rails 4.1.15 running on Heroku, with assets served from CloudFront. My app responds to both http and https, on both "www." and the zone apex, without doing any redirection.

I looked briefly at the font_assets gem mentioned in the question, but quickly dropped it in favor of rack-cors, which seemed more on point. I did not want to simply open up all origins and all paths, as that would defeat the point of CORS and the security of the Same-Origin Policy, so I needed to be able to specify the few origins I would allow. Finally, I personally favor configuring Rails via individual config/initializers/*.rb files rather than editing the standard config files (like config.ru or config/application.rb) Putting all that together, here is my solution, which I believe is the best available, as of 2016-04-16:

1. Gemfile

   gem "rack-cors"
   

   The rack-cors gem implements the CORS protocol in a Rack middleware. In addition to setting Access-Control-Allow-Origin and related headers on approved origins, it adds a Vary: Origin response header, directing CloudFront to cache the responses (including the response headers) for each origin separately. This is crucial when our site is accessible via multiple origins (e.g. via both http and https, and via both "www." and the bare domain)

2. config/initializers/rack-cors.rb

   ## Configure Rack CORS Middleware, so that CloudFront can serve our assets.
   ## See https://github.com/cyu/rack-cors
   
   if defined? Rack::Cors
       Rails.configuration.middleware.insert_before 0, Rack::Cors do
           allow do
               origins %w[
                   https://example.com
                    http://example.com
                   https://www.example.com
                    http://www.example.com
                   https://example-staging.herokuapp.com
                    http://example-staging.herokuapp.com
               ]
               resource '/assets/*'
           end
       end
   end
   

   This tells the browser that it may access resources on our Rails app (and by extension, on CloudFront, since it is mirroring us) only on behalf of our Rails app (and not on behalf of malicious-site.com) and only for /assets/ urls (and not for our controllers). In other words, allow CloudFront to serve assets but don't open the door any more than we have to.

   Notes:

   • I tried inserting this after rack-timeout instead of at the head of the middleware chain. It worked on dev but was not kicking in on Heroku, despite having the same middleware (other than Honeybadger).

   • The origins list could also be done as Regexps. Be careful to anchor patterns at the end-of-string.

     origins [
         /\Ahttps?:\/\/(www\.)?example\.com\z/,
         /\Ahttps?:\/\/example-staging\.herokuapp\.com\z/
     ]
     

     but I think it’s easier just to read literal strings.

3. Configure CloudFront to pass the browser's Origin request header on to our Rails app.

   Strangely, it appears that CloudFront forwards the Origin header from the browser to our Rails app regardless whether we add it here, but that CloudFront honors our app’s Vary: Origin caching directive only if Origin is explicitly added to the headers whitelist (as of April 2016).

   The request header whitelist is kind of buried.

   If the distribution already exists, you can find it at:

   • https://console.aws.amazon.com/cloudfront/home#distributions
   • select the distribution
   • click Distribution Settings
   • go to the Behaviors tab
   • select the behavior (there will probably be only one)
   • Click Edit
   • Forward Headers: Whitelist
   • Whitelist Headers: Select Origin and click Add >>

   
   If you have not created the distribution yet, create it at:

   • https://console.aws.amazon.com/cloudfront/home#distributions

   • Click Create Distribution

     (For the sake of completeness and reproducibility, I'm listing all the settings I changed from the defaults, however the Whitelist settings are the only ones that are relevant to this discussion)

   • Delivery Method: Web (not RTMP)

   • Origin Settings

     • Origin Domain Name: example.com
     • Origin SSL Protocols: TLSv1.2 ONLY
     • Origin Protocol Policy: HTTPS only

   • Default Cache Behavior Settings

     • Viewer Protocol Policy: Redirect HTTP to HTTPS
     • Forward Headers: Whitelist
     • Whitelist Headers: Select Origin and click Add >>
     • Compress Objects Automatically: Yes

After changing all these things, remember that it can take some time for any old, cached values to expire from CloudFront. You can explicitly invalidate cached assets by going to the CloudFront distribution's Invalidations tab and creating an invalidation for *.