Firefox WebFont 403 Despite S3 CORS Rules

Question

I'm trying to host and serve webfonts (specifically, fontawesome) to my django project on heroku from AWS S3, and I'm having difficulty overcoming the dreaded firefox cross-domain font-loading issue. I've tried all the documented, accepted solutions and none of them are working for me.

The recommended solution I keep seeing is to edit CORS configs on my S3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://myapp.herokuapp.com</AllowedOrigin>
        <AllowedOrigin>https://www.myapp.herokuapp.com</AllowedOrigin>
        <AllowedOrigin>https://myapp.com</AllowedOrigin>
        <AllowedOrigin>https://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
   </CORSRule>
</CORSConfiguration>

I've tried different variations of these settings and firefox is still giving me an HTTP 403 forbidden from https://www.myapp.com:

Request URL: https://my_bucket.s3.amazonaws.com/css/fontawesome-webfont-webfont.ttf
Request Method: GET
Status Code: HTTP/1.1 403 Forbidden

With that HTTP request I'm getting "Access-Control-Allow-Credentials:true" in response headers.

Is there another CORS rule I need to declare for firefox to accept the fonts from S3? When I curl font-awesome I don't get/see anything helpful for troubleshooting this:

> https://s3.amazonaws.com/my_bucket/font/fontawesome-webfont.eot
* About to connect() to s3.amazonaws.com port 443 (#0)
*   Trying xxx.xx.xx.xxxx... connected
* Connected to s3.amazonaws.com (xxx.xx.xx.xxx) port 443 (#0)
* SSLv3, TLS handshake, Client hello (1):
* SSLv3, TLS handshake, Server hello (2):
* SSLv3, TLS handshake, CERT (11):
* SSLv3, TLS handshake, Server finished (14):
* SSLv3, TLS handshake, Client key exchange (16):
* SSLv3, TLS change cipher, Client hello (1):
* SSLv3, TLS handshake, Finished (20):
* SSLv3, TLS change cipher, Client hello (1):
* SSLv3, TLS handshake, Finished (20):
* SSL connection using DES-CBC3-SHA
* Server certificate:
*       subject: C=US; ST=Washington; L=Seattle; O=Amazon.com Inc.; CN=s3.amazonaws.com
*       start date: 2010-10-08 00:00:00 GMT
*       expire date: 2013-10-07 23:59:59 GMT
*          common name: s3.amazonaws.com (matched)
*       issuer: C=US; O=VeriSign, Inc.; OU=VeriSign Trust Network; OU=Terms of use at https://www.verisign.com/rpa (c)09; CN=VeriSign Class 3 Secure Server CA - G2
*       SSL certificate verify ok.
> GET /my_bucket/font/fontawesome-webfont.eot HTTP/1.1
> User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5
> Host: s3.amazonaws.com
> Accept: */*
> Origin: https://www.myapp.com
>
< HTTP/1.1 200 OK
< x-amz-id-2: XxMCWhqMsTGMMmAQnSHT/+RO7aluQSRyZ5wTAseMKM5cpavE+NkBQCuD8ykiIIDE
< x-amz-request-id: 90FF2C1C85254815
< Date: Mon, 22 Jul 2013 01:54:53 GMT
< Access-Control-Allow-Origin: https://www.myapp.com
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 3000
< Access-Control-Allow-Credentials: true
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< Last-Modified: Mon, 22 Jul 2013 01:44:31 GMT
< ETag: "455808250694e5760bd92b3ce1f070b6"
< Accept-Ranges: bytes
< Content-Type: application/octet-stream
< Content-Length: 25395
< Server: AmazonS3
<
3cOb?LP&?S~FontAwesomeRegular"Version 1.00 2012&FontAwesome RegularBSGPɴbGbKV?????Y?D

Is there another way to set Access-Control-Allow-Origin that might get this working?

Answer 1

If you are restricting access to specific HTTP referrers in your bucket policy, add your bucket url also in referer list. For example:

"Condition": {
    "StringLike": {
        "aws:Referer": [
            "http://my_bucket.s3.amazonaws.com/*",
            "https://my_bucket.s3.amazonaws.com/*",
            "http://www.example.com/*",
            "https://www.example.com/*",
        ]
    }
}

Check the response headers in Firefox. Turns out that referer for font is your CSS file, which is hosted on s3 bucket, not your domain.