7

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?

Community
  • 1
  • 1
Chris B.
  • 1,505
  • 5
  • 26
  • 48
  • 1
    I am having the same issue and wondering if you found a work around. – Zane Sep 16 '13 at 07:51
  • Your configuation looks OK. In the two examples you show the URLs are not the same, are you sure you're requesting the right filename? – qff Oct 04 '14 at 14:24

1 Answers1

4

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.

Wtower
  • 18,848
  • 11
  • 103
  • 80
Deepak
  • 141
  • 1
  • 7