CODEWITHSUNDEEP
cssgoogle-chromefontscorsgoogle-cloud-storage
aschmid00
aschmid00

Reputation: 7158

Google Cloud Storage fonts CORS issue

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.

Upvotes: 11

Views: 7561

Answers (3)

Philou
Philou

Reputation: 123

In our case, the issue was that we naively used the storage.cloud.google.com/path/to/resource public URL as the base Url for our front-end application, while it does not allow CORS request...😓

Instead, we had to use the storage.googleapis.com/path/to/resource one!

More information on our CORS is handled by google cloud

Upvotes: 1

Brandon Yarbrough
Brandon Yarbrough

Reputation: 38389

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

Upvotes: 4

patb
patb

Reputation: 1816

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.

Upvotes: 30

Related Questions