I’ve been waiting ages for this. Amazon Web services added Cross Origin Resource Sharing in August.
CORS enables loads of stuff you couldn’t do on S3 before, but I only need it for one thing, which is hosting web fonts for specific domains.
Here’s is a quick post to explain how to host your web fonts on S3.
Configure your bucket
All you have to do is add a CORS configuration to your bucket in the S3 Management Console. My multi-domain configuration for localise.biz looks like this –
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://localise.biz</AllowedOrigin> <AllowedOrigin>http://loco.local</AllowedOrigin> <AllowedOrigin>https://loco.desk.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> </CORSRule> </CORSConfiguration>
You’ll notice that in addition to my main domain I also added my local development server. Plus my Desk.com help centre, which is SSL. I’m also allowing HEAD requests because it’s useful for testing from the command line.
Testing from the command line
On my first attempt I thought it wasn’t working. This is because I didn’t know how it works. When your browser requests a font file it sends an
Origin header in the request which must match your CORS config.
So if you want to test it’s working from the command line using cURL make sure you add the request header with the -H flag, as follows:
curl "http://eu.localise.biz/static/fonts/fontawesome-webfont.eot" \ -H "Origin: http://localise.biz" -I
Watch out for CDNs
If you plan on using CloudFront distributions for your font URLs, be careful. CloudFront caches the
Access-Control-Allow-Origin response header. If you’re using two or more specific domains in your CORS rules then you’ll have two or more possible responses which means caching is going to break things.