Google Cloud Storage fonts CORS issue

Question

Static files in my app are uploaded to GCS and are set to public links. when a static resource is requested (in this case a font) it hits a url like https://example.com/static/fonts/font.woff the server then redirects the request to the apropriate GCS url to be served.

the problem here is that with chrome i get this CORS issue:

xxxxxxxxe3b8ccc0e3:1 Font from origin 'https://storage.googleapis.com' has been blocked from loading by Cross-Origin Resource Sharing policy: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'https://example.com' is therefore not allowed access.

the CORS defaults on the bucket and all subfolders is set like so:

[{"origin": ["*"], "responseHeader": ["Content-Type"], "method": ["GET"], "maxAgeSeconds": 3600}]

the question is where is this credentials flag set? i do redirect to the public link so its not an ajax request, the link is in the font-face declaration of the css file.

also it is not an option to set the origin to a specific domain or list of domains because my app is multitenant and there are multiple different domains accessing the same file.

this seems to work correctly when the request comes from http but gives this error when on https also this works as expected in safari but does not with chrome.

Answer 1

Such issues, when hosting fonts on GCS, could also be related to missing CORS configuration on the GCS bucket.
(See https://cloud.google.com/storage/docs/cross-origin).

You may define cors access settings with:

gsutil cors set cors-config.json gs://my-bucket

And your cors-config.json could be, for example:

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

Meaning ok to read from all origins.

Answer 2

Edit from 2019: Chrome fixed this years ago!

Interesting! There is a Chrome bug (issue 544879) in which Chrome insists that it needs credentials for loading fonts, even though it does not. Looks like that's likely to be your problem.

While you wait for that bug to be fixed, you may consider these options:

1. Use HTTP instead of HTTPS when referencing storage.googleapis.com. HTTP may not be vulnerable to this problem.
2. List specific domains instead of a wildcard in yours CORS policy.
3. Rather than hosting a font and referencing it with @font-face, host a CSS file with the font encoded as a data URI. Example: https://www.filamentgroup.com/lab/font-loading.html