_headers / CORS / X-Frame / X-XSS

Support
1

I am trying to reference some fonts on a Netfliy site (SITE A) stored in a second Netlify site (SITE B), but I keep getting errors (shown below).

Access to font at 'https://SITE A/assets/fonts/Bebas/Bebas.woff2' from origin 'https://5cbd3f4c8ec358000acaeedb--SITE A.netlify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried adding a _headers file with the below content in SITE A referencing SITE B, and also in SITE B referencing SITE A (for good measure) but this doesn’t seem to make a difference.

In SITE A

/*
  X-Frame-Options: allow-from https://SITE B.netlify.com/
  X-XSS-Protection: 0;

In SITE B

/*
  X-Frame-Options: allow-from https://SITE A.netlify.com/
  X-XSS-Protection: 0;

Can anyone help me with this issue (maybe I’ve missed something super obvious - I am new to Netlify and CORS but appreciate any help).

2

Set a header on the font server with a value of “Access-Control-Allow-Origin: *” minus the quotes. The * wildcard leaves it wide open so if the sever isn’t secured via other means, you’ll want to restrict access to your machine requesting the fonts. You can re-secure your X-Frame’s and X-Site Scripting headers as well by use of the above CORS header. :v:

3 Likes
3

Thanks for your help!!!

I added

/*
  Access-Control-Allow-Origin: *

to a _header file on the font Netlify server and this fixed the issue :slight_smile:

3 Likes
4

Awesome! You’re quite welcome!

1 Like
5

@blakedavies How is everything going for you? Let me know if you need any help with any sort of header in the future, especially security & privacy http response headers. The best site is both functioning relative to its purpose but also as hardened as possible. We all need to do our part to make the internet safe, secure, and private. If not us, who? Peace my friend.

1 Like