I have a Rails app, hosted on Heroku. During deployment assets are synced with an Amazon S3 bucket via the asset_sync gem and views call those assets through CloudFront. However, fonts are not rendered when viewing the website with Firefox (files are loaded in the Net tab of Firebug, but simply not used). Safari works great.
I have the following CORS config on S3:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
My app also sets the following headers:
Access-Control-Allow-Origin: *
Access-Control-Request-Method: *
But CloudFront returns fonts without them... Why aren`t fonts loaded?
Thanks in advance.
Some versions of Internet Explorer and Firefox consider fonts an attack vector and will refuse loading them if they are being provided by another domain (cross domain policy).
On standard HTTP servers all you need to do is add the Access-Control-Allow-Origin: * header to bypass the CORS policy. The problem is S3 doesn’t support sending it. (Though according to the specification it should support CORS, the header is not sent).
There is a workaround. CloudFront can be pointed at another server that can send the Access-Control-Allow-Origin header (You can do that with the server that serves your app ;) ).
This can be done by adding a Custom Origin to your CloudFront distribution from the AWS Console. Next you will have to add Behaviours with your font types and the newly added Origin. You can use wildcards for the filename. (You’ll need to do this once for each font type that you have).
Example:
Path Pattern: /assets/*.woff
When ready you can validate the header existence with:
curl -I http://cloudfrontid.cloudfront.new/assets/font.woff
Hopefully you will see the Access-Control-Allow-Origin header, provided by your server along with the file itself, cached by CloudFront with the header included.
Hope it helps!
Try invalidating your (cached) font files in Cloudfront: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html#invalidating-objects-console
I had a similar issue today. I read an article that suggested CORS configurations are cached in CloudFront. I resolved my issue by invalidating my font files.
On June 26, 2014 AWS added support for CORS in CloudFront, so now you can make this work with just CloudFront and S3.
This SO answer provides info about enabling CORS support for a particular CloudFront distribution:
https://stackoverflow.com/a/24459590/3195497
In addition you will need to enable CORS on your S3 bucket. One of the answers here says in regard to S3:
Though according to the specification it should support CORS, the
header is not sent
From my testing this is only partially true. If the Origin header is sent in the request then S3 will correctly send the Access-Control-Allow-Origin header. If the Origin header is not sent then S3 will not send the Access-Control-Allow-Origin header.
In the past this has caused problems with CloudFront. If you made any requests to CloudFront without an Origin request header then CloudFront will cache a response without the Access-Control-Allow-Origin response header. This might happen because you are testing the asset with a curl command and you don't include the Origin request header. Now when you make a request to CloudFront with the Origin header, CloudFront would ignore the Origin header and serve the cached response without the Access-Control-Allow-Origin header.
With the changes recently released to CloudFront, you can configure your distribution to take the Origin request header into account. In this case CloudFront will cache different responses, one response for each value of the Origin header.
This is what my CORS config looks like. I have a different AllowedHeader than you. I don't use asset_sync.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Related
I'm hosting a website on Heroku using Ruby on Rails. It uses a Cloudfront distribution to serve assets, and S3 to store images.
When going to http://example.com, everything works fine except for 2 webfonts. All the other fonts load fine.
When going to http://www.example.com, none of the webfonts load.
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.
I was using the normal Cloudfront asset host d12345.cloudfront.net, but I figured if I switched to assets.example.com, I'd outsmart the CORS issues. But I'm still getting:
Access to Font at 'http://assets.example.com/assets/myfont-Bold-735639b52225ec60e258c2b8b193dfb479f6158c3738a595db04f3a9684a4ad8.woff' from origin 'http://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.
```
I have read countless threads, blogposts, SO answers about this issue but I can't seem to figure it out.
I have set up Rack::Cors in my rails application as follows:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '/assets/*', headers: :any, methods: [:get]
end
end
My asset_host is set up correctly:
CLOUDFRONT_HOST = "http://assets.example.com"
config.action_controller.asset_host = CLOUDFRONT_HOST
All other assets work perfectly fine. Images, JavaScript, CSS all come from CloudFront without any hiccups. It's just the 2 webfonts when going to the www.example.com subdomain and all webfonts when going to the root level site example.com.
I have tried a number of options in the Cloudfront and S3 admin panels:
added cors config to my bucket
whitelisted headers in my cloudfront distribution
But nothing seems to work. I'm lost as to why those 2 fonts won't load properly while everything else works fine.
Fonts are usually checked by your browser preflight, with an OPTIONS request. In your CORS setup, try also allowing OPTIONS in addition to GET. You might also have to allow OPTIONS on your CloudFront distribution.
Note that if these fonts have a query parameter in the request url, like assets.example.com/font.woff?v=123, the CloudFront distribution should also forward query parameters.
I've downloaded the rack-cors gem, followed the documentations and tried to configure the CORS settings inside my Amazon AWS s3 bucket to accept GET requests from my site but I still keep getting the same error in my console.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://[url]</AllowedOrigin>
<AllowedOrigin>http://[url]</AllowedOrigin>
<AllowedOrigin>http://localhost:3000</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
XMLHttpRequest cannot load [audio_url_from_amazon]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin [my_website_url] is therefore not allowed access.
Any help with this would be awesome as I've read other questions but still can't seem to get the right config working.
Add gem 'rack-cors' to your gemfile, run bundle.
Create a new initializer cors.rb. Add the following code there
Rails.application.config.middleware.insert_before 0, 'Rack::Cors' do
allow do
origins '*'
resource '*',
headers: :any,
methods: [:get]
end
end
This should fix your issue.
Very late to the question, but had the same issue, while it looks as the the browser is firing an OPTIONS request for preflight, s3 CORS will not allow OPTION as it's an HTTP concept.
Solution for me was to allow PUT requests in s3 CORS config...
<AllowedMethod>PUT</AllowedMethod>
which allows the preflight to succeed.
I have been having an issue with my rails app not generating https assets. I have set config.action_controller.asset_host equal to https:// version of my cloudfront assets but I still seem to get:
Mixed Content: The page at URL was loaded over HTTPS, but requested an insecure font 'http://cloudfront.net/assets/fontawesome-webfont'. This request has been blocked; the content must be served over HTTPS.
I have set cloudfront to https only but it still seems to be generating the http version. I can see where it sets the fontAwesomePath but I can't seem to find where it is being included.
I am uncertain as to why it is still being delivered as an http resource and would appreciate any advice
Much Appreciated
chaddpaul
I have 1 question and 1 issue:
Question: If using CloudFront, is the image URL supposed to have s3.amazonaws.com or randomblah.cloudfront.net?
http://s3.amazonaws.com/bucketname/project_images/photos/000/000/006/medium/IMG_3867.JPG?1438009375
or with the actual cloudfront.net url...
http://fdawfwe8200.cloudfront.net/bucketname/project_images/photos/000/000/006/medium/IMG_3867.JPG?1438009375
Right now, I have this in my production.rb
config.action_controller.asset_host = 'fdawfwe8200.cloudfront.net'
Issue: I'm getting Redirect at origin 'http://fdawfwe8200.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header.... error
How do I fix this?
The only thing I see breaking on my site is, bootstrap icons are boxes.
you can find documentation to help CloudFront with your Cors configuration like here:
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors
So just let your content server specifiy the 'Access-Control-Allow-Origin' header to what you want and configure your CDN to keep those headers.
It seems like FontAwesome is not working on Amazon S3. I'm getting below error for Internet Explorer
#font-face failed cross-origin request. Resource access is restricted.
I do have CORS configured below:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
This now seems to be working with Firefox (it had the same error on it before the CORS config) but still not on IE.
I thought it was caching issue but this was done 2 days ago.
Is there any other config that I need to do to fix this error and display icons on IE aswell?
Have you tried setting AllowedOrigin to http://*.yourdomain.com?
Oh, and you didn't say you were using CloudFront, but if you are, S3+CloudFront have some major issues with CORS support when you try to use them together.