Typeface and Images Cross-Origin Resource Sharing

Question

I noticed that typeface are always subject to Cross-Origin Resource Sharing(CORS) and the images are not.

SCENARIO

Website A: On this website, we have a limitation on uploading resources. We can only upload HTML file. All external files are pointing to Website B.

Website B: All resources are uploaded to this website.

Image are okay and working fine but the fonts are not. Below is an example of an error log. I'm curious if is it always like that? like fonts are always subject to CORS and images are not?

Access to Font at 'website-b.com/font.ttf?' from origin 'website-a.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'website-a.com' is therefore not allowed access.

QUESTIONS

1. Is typeface always subject to CORS policy and why?
2. Why are images not subject to CORS policy?
3. If the typeface is subject to CORS, how is it differs from the image in terms of CORS?

Answer 1

The requirements here are from the Font fetching requirements section in the CSS Fonts spec:

For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document.

The implications of this for authors are that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using Access-Control-Allow-Origin.

The combination of “potentially CORS-enabled fetch” and the “Anonymous” state is actually to make cross-origin font fetching always CORS-enabled (not just “potentially“)—because the HTML spec says the mode for the “Anonymous” state is always cors:

State	Keywords	Description
anonymous	Anonymous	Requests for the element will have their mode set to "cors" and their credentials mode set to "same-origin".

So given all that, here are specific answers to your questions:

1. Is typeface always subject to CORS policy and why?

Yes, cross-origin font loading with @font-face is always subject to CORS policy, per the spec requirements cited above from the CSS Fonts spec and the HTML spec.

As far as why, there’s a related discussion with this comment:

The primary reason is that font vendors want Web authors to limit use of fonts to their own sites, and Web authors can't easily and reliably do that unless we provide a same-origin restriction

And in the same discussion, this comment:

The same-origin policy applies to pretty much all new resource types on the web. There's only a handful of legacy resource types (images, scripts, css, and ugh, audio/video (barely missed the boat on those)) that let cross-origin pages hotlink without restriction.

This is now a standard security practice for the web.

So then to answer your next question:

2. Why are images not subject to CORS policy?

Images are in the “handful of legacy resource types” listed in the comment cited above that’ve been part of the Web relatively forever and have always been allowed to be loaded cross-origin. Newer features like fonts—added within the last few years—are different in that when support is added for such features these days, they are restricted to being same-origin by default.

3. If the typeface is subject to CORS, how is it differs from the image in terms of CORS?

Not sure what you’re asking, but I think the answer is: in terms of CORS, image requests that trigger the same-origin policy are treated no differently than anything requested cross-origin.

What I mean is, if instead of using an img element to load an image, you use XHR or the Fetch API to request it, then your browser is going to apply same-origin restrictions on that image request, just as your browser will for anything else that you request cross-origin.

The difference is just that img element was designed long before we know what we know now, so it has different cross-origin-OK handling in browsers than same-origin-by-default handling we have for newer features these days.

In other words, the handling of img elements is actually the exception to the rule here, while the handling for fonts is consistent with what browsers now use for all newer features.