Databases
StackOverflow2013
Postsdbo
POFirefox WebFont 403 Despite S3 CORS Rules
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFirefox WebFont 403 Despite S3 CORS Rules
    text
    copied!<p>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 <a href="https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa">firefox cross-domain font-loading issue</a>. I've tried all the documented, accepted solutions and none of them are working for me.</p> <p>The recommended solution I keep seeing is to edit CORS configs on my S3 bucket:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt; &lt;CORSRule&gt; &lt;AllowedOrigin&gt;https://myapp.herokuapp.com&lt;/AllowedOrigin&gt; &lt;AllowedOrigin&gt;https://www.myapp.herokuapp.com&lt;/AllowedOrigin&gt; &lt;AllowedOrigin&gt;https://myapp.com&lt;/AllowedOrigin&gt; &lt;AllowedOrigin&gt;https://www.myapp.com&lt;/AllowedOrigin&gt; &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt; &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt; &lt;AllowedHeader&gt;Authorization&lt;/AllowedHeader&gt; &lt;/CORSRule&gt; &lt;/CORSConfiguration&gt; </code></pre> <p>I've tried different variations of these settings and firefox is still giving me an HTTP 403 forbidden from <a href="https://www.myapp.com" rel="nofollow noreferrer">https://www.myapp.com</a>:</p> <pre><code>Request URL: https://my_bucket.s3.amazonaws.com/css/fontawesome-webfont-webfont.ttf Request Method: GET Status Code: HTTP/1.1 403 Forbidden </code></pre> <p>With that HTTP request I'm getting "Access-Control-Allow-Credentials:true" in response headers.</p> <p>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:</p> <pre><code>&gt; 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. &gt; GET /my_bucket/font/fontawesome-webfont.eot HTTP/1.1 &gt; User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5 &gt; Host: s3.amazonaws.com &gt; Accept: */* &gt; Origin: https://www.myapp.com &gt; &lt; HTTP/1.1 200 OK &lt; x-amz-id-2: XxMCWhqMsTGMMmAQnSHT/+RO7aluQSRyZ5wTAseMKM5cpavE+NkBQCuD8ykiIIDE &lt; x-amz-request-id: 90FF2C1C85254815 &lt; Date: Mon, 22 Jul 2013 01:54:53 GMT &lt; Access-Control-Allow-Origin: https://www.myapp.com &lt; Access-Control-Allow-Methods: GET &lt; Access-Control-Max-Age: 3000 &lt; Access-Control-Allow-Credentials: true &lt; Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method &lt; Last-Modified: Mon, 22 Jul 2013 01:44:31 GMT &lt; ETag: "455808250694e5760bd92b3ce1f070b6" &lt; Accept-Ranges: bytes &lt; Content-Type: application/octet-stream &lt; Content-Length: 25395 &lt; Server: AmazonS3 &lt; 3cOb?LP&amp;?S~FontAwesomeRegular"Version 1.00 2012&amp;FontAwesome RegularBSGPɴbGbKV?????Y?D </code></pre> <p>Is there another way to set Access-Control-Allow-Origin that might get this working?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload