AWS CloudFront: Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

Question

I'm receiving the following error on a couple of Chrome browsers but not all. Not sure entirely what the issue is at this point.

Font from origin https://ABCDEFG.cloudfront.net has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin https://sub.domain.example is therefore not allowed access.

I have the following CORS Configuration on S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

The request

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.example
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

All other requests from Cloudfront/S3 work properly, including JS files.

I'm having the same problem... I started noticing it after upgrading to chrome 37.0.2062.94 — kirley, Aug 30 '14 at 18:21
After updating the CORS Configuration, I renamed the assets and managed to get it working. So either 1) The CORS Configuration is applied on file creation only (not update) OR 2) the CORS Configuration is cached at Cloudfront. I will post this as an answer if others can confirm it works for them too. — Dallas Clark, Sep 01 '14 at 00:34
Just noticed this with Chrome v. 37.0.2062.94 but not an earlier version. I don't have a CORS configuration at all on S3, so this shouldn't be happening, right? — Ghopper21, Sep 02 '14 at 02:22
Got this problem now - what are your recommendations for a fix? — Richard Peck, Sep 06 '14 at 17:59
@Ghopper21 you need the right CORS config. Test in firefox and that will give you the (probably) the same result. — Tim Diggins, Sep 06 '14 at 20:16
@RichPeck - fix by adding the correct CORS config to S3 (or if automatically creating your CDN from source, then it's a bit more complicated -- you have to add the appropriate headers, then invalidate your cached fonts)... http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa see answer below for more details — Tim Diggins, Sep 07 '14 at 05:53

score 99 · Answer 1 · edited Jun 22 '22 at 09:00

99

Add this rule to your .htaccess

Header add Access-Control-Allow-Origin "*"

even better, as suggested by @david thomas, you can use a specific domain value, e.g.

Header add Access-Control-Allow-Origin "your-domain.example"

edited Jun 22 '22 at 09:00

Stephen Ostermiller

23,933
14
88
109

answered Jan 30 '15 at 13:27

shaithana

2,470
1
24
37

1

Hi, what's the difference with `Header set Access-Control-Allow-Origin "*"` ? Thanks – NineCattoRules Mar 26 '15 at 23:17
9

for windows people, set under in web.config file. Have a nice day – Arsalan Saleem Apr 09 '15 at 11:38
2

@Simone the difference is that with "add" the response header is added to the existing set of headers, even if this header already exists. This can result in two (or more) headers having the same name; whereas with "set" the response header is set, replacing any previous header with this name. In this case is the same cause * includes them all. – shaithana Apr 13 '15 at 20:02
30

Just noting `Access-Control-Allow-Origin "*"` is potentially insecure as it opens the domain to javascript access from any domain. You should use a specific domain value instead, e.g `Access-Control-Allow-Origin "http://example1.com"` See also http://stackoverflow.com/a/10636765/583715 for a good explanation. – David Thomas May 12 '15 at 08:11
1

YOU ARE MY LIFE SAVER ! – Tahir Yasin Feb 03 '21 at 17:09

score 60 · Answer 2 · edited May 23 '17 at 12:26

60

Chrome since ~Sep/Oct 2014 makes fonts subject to the same CORS checks as Firefox has done https://code.google.com/p/chromium/issues/detail?id=286681. There is a discussion on this in https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Given that for fonts the browser may do a preflight check, then your S3 policy needs the cors request header as well. You can check your page in say Safari (which at present doesn't do CORS checking for fonts) and Firefox (that does) to double check this is the problem described.

See Stack overflow answer on Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading for the Amazon S3 CORS details.

NB in general because this used to apply to Firefox only, so it may help to search for Firefox rather than Chrome.

edited May 23 '17 at 12:26

Community

1
1

answered Sep 06 '14 at 07:48

Tim Diggins

4,364
3
30
49

Thanks for this answer, looks like it may be a problem for many others. Although my problem was occurring in a stable build of Chrome. – Dallas Clark Sep 07 '14 at 23:58
48

This is happening in Chrome now. – justingordon Sep 23 '14 at 06:34
As people keep referring (including myself!) to this answer, I've made it less historical and more relevant to present day. – Tim Diggins Jan 21 '15 at 17:31
2

Also FYI I discovered that a error message "has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin" was *actually* to do with having a bad path to a font file in my original server, and cloudfront then redirecting to the homepage of my server (and either the redirect response or the homepage didn't have the CORS headers). Confusing, but solved by using the correct path to the actual font file (not a CORS issue, strictly speaking). – Tim Diggins Jan 21 '15 at 17:31
Hey @DallasClark, you may want to choose an accepted answer for your question. Thanks Tim, your links and explanations were helpful in my experience. Cheers. – Dan Mar 31 '15 at 18:04

Özer · Answer 3 · 2017-03-30T12:18:13.790

48

I was able to solve the problem by simply adding <AllowedMethod>HEAD</AllowedMethod> to the CORS policy of the S3 Bucket.

Example:

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

edited Mar 30 '17 at 12:18

answered Dec 29 '16 at 22:14

Özer

2,059
18
22

not sure about security though, would be nice if someone had some input on that.. – Özer Oct 20 '17 at 15:17
Doe this change need time to propagate? I just added `HEAD` to my CORS policy on the bucket and it's still not working. – Salvatore Iovene Nov 01 '17 at 16:38
usually no, it should take max. couple minutes – Özer Nov 01 '17 at 22:53

Yaniv Vova Alterman · Answer 4 · 2015-07-04T00:26:28.093

31

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

Select your bucket
Click properties on the right top
Permisions => Edit Cors Configuration => Save
Save

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

edited Jul 04 '15 at 00:26

answered Jul 04 '15 at 00:12

Yaniv Vova Alterman

1,660
1
13
11

after adding this, get 404 not found. – neobie Aug 08 '17 at 05:26

score 13 · Answer 5 · edited Mar 10 '16 at 15:03

13

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just

Set a CORS Configuration for your S3 bucket:

<AllowedOrigin>*</AllowedOrigin>

In CloudFront -> Distribution -> Behaviors for this origin, use the Forward Headers: Whitelist option and whitelist the 'Origin' header.

Wait for ~20 minutes while CloudFront propagates the new rule

Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.

edited Mar 10 '16 at 15:03

bashaus

1,614
1
17
33

answered Mar 17 '15 at 06:03

KBH

315
3
9

1

This doesn't seem to work, do you have more details? I enabled this but I still get exactly the same issue. – Jaco Pretorius Jun 12 '15 at 17:02

score 9 · Answer 6 · answered Feb 01 '16 at 21:40

The only thing that has worked for me (probably because I had inconsistencies with www. usage):

Paste this in to your .htaccess file:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Since your code was detailed, it took some time for me to go through it, I learned few things though. I applied portion of it to tweak my solution. It worked. — Mohammed Moinuddin Waseem, Nov 27 '19 at 05:10

score 4 · Answer 7 · answered May 13 '17 at 00:34

I had this same problem and this link provided the solution for me:

http://www.holovaty.com/writing/cors-ie-cloudfront/

The short version of it is:

Edit S3 CORS config (my code sample didn't display properly)
Note: This is already done in the original question
Note: the code provided is not very secure, more info in the linked page.
Go to the "Behaviors" tab of your distribution and click to edit
Change "Forward Headers" from “None (Improves Caching)” to “Whitelist.”
Add “Origin” to the "Whitelist Headers" list
Save the changes

Your cloudfront distribution will update, which takes about 10 minutes. After that, all should be well, you can verify by checking that the CORS related error messages are gone from the browser.

score 4 · Answer 8 · answered Nov 02 '17 at 14:45

4

For those using Microsoft products with a web.config file:

Merge this with your web.config.

To allow on any domain replace value="domain" with value="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

If you don't have permission to edit web.config, then add this line in your server-side code.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

answered Nov 02 '17 at 14:45

nu everest

9,589
12
71
90

Deserves a vote up for remembering us Windows users. – RameyRoad Oct 08 '19 at 17:39
I'm using asp.net core, how do I add this to the appsettings.json file? – Yusuff Sodiq May 24 '20 at 19:39

score 4 · Answer 9 · answered Feb 14 '21 at 02:14

4

For AWS S3, setting the Cross-origin resource sharing (CORS) to the following worked for me:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

answered Feb 14 '21 at 02:14

Webucator

2,397
24
39

"AllowedOrigins": ["*"] <--- this really hurts! – andreas Nov 15 '21 at 12:10
@andreas, isn't this only a concern if you care if other sites load this content? Or is there something more risky here that I'm missing? – Webucator Nov 16 '21 at 19:59
1

Not that I am aware of. But it's really bad practice and can bite you in unexpected costs if others utilize your images. In case you have CloudFront in front of your S3 buckets, this can get expensive. – andreas Nov 17 '21 at 10:14

score 2 · Answer 10 · answered Nov 29 '16 at 02:10

There is a nice writeup here.

Configuring this in nginx/apache is a mistake.
If you are using a hosting company you can't configure the edge.
If you are using Docker, the app should be self contained.

Note that some examples use connectHandlers but this only sets headers on the doc. Using rawConnectHandlers applies to all assets served (fonts/css/etc).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

This would be a good time to look at browser policy like framing, etc.

score 2 · Answer 11 · edited Jun 22 '22 at 09:00

Late to the party, but I just ran into this problem and solved it with the following settings in my AWS bucket config (Permission tab). The requested format is not XML anymore but JSON:

[
    {
        "AllowedHeaders": [
            "Content-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://www.yourdomain.example",
            "https://yourdomain.example"
        ],
        "ExposeHeaders": []
    }
]

score 0 · Answer 12 · answered Apr 28 '20 at 18:22

0

Just add use of origin in your if you use node.js as server...

like this

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

We Need response for origin

answered Apr 28 '20 at 18:22

Daksh Patel

1,266
10
9

score 0 · Answer 13 · answered Jan 28 '21 at 10:11

If you want to allow all the fonts from a folder for a specific domain then you can use this:

  <location path="assets/font">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

where assets/font is the location where all fonts are and http://localhost:3000 is the location which you want to allow.

score 0 · Answer 14 · answered Dec 20 '22 at 10:55

0

Add this to your .htaccess file. This solved my problem.

<FilesMatch ".(eot|otf|ttf|woff|woff2)">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

answered Dec 20 '22 at 10:55

DeFRaNDo

11
2

I updated the title of this question to specifically mention this was an AWS CloudFront issue – Dallas Clark Dec 20 '22 at 22:41

score -4 · Answer 15 · edited Mar 01 '18 at 10:11

Working solution for heroku is here http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (quotes follow):

Below is exactly what you can do if you are running your Rails app in Heroku and using Cloudfront as your CDN. It was tested on Ruby 2.1 + Rails 4, Heroku Cedar stack.

Add CORS HTTP headers (Access-Control-*) to font assets

Add gem font_assets to Gemfile .
bundle install
Add config.font_assets.origin = '*' to config/application.rb . If you want more granular control, you can add different origin values to different environment, e.g., config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
Push code to Heroku.

Configure Cloudfront to forward CORS HTTP headers

In Cloudfront, select your distribution, under "behavior" tab, select and edit the entry that controls your fonts delivery (for most simple Rails app you only have 1 entry here). Change Forward Headers from "None" to "Whilelist". And add the following headers to whitelist:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

Save it and that's it!

Caveat: I found that sometimes Firefox wouldn't not refresh the fonts even if CORS error is gone. In this case keep refreshing the page a few times to convince Firefox that you are really determined.

Please avoid link-only answers. It will be helpful if you could copy relevant snippets out of the linked article into your answer. Thanks. — bPratik, Nov 17 '15 at 11:56

AWS CloudFront: Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

15 Answers15

Add CORS HTTP headers (Access-Control-*) to font assets

Configure Cloudfront to forward CORS HTTP headers

Linked