File sharing based on fonts and images

I noticed that the font is always Cross-Origin Resource Sharing (CORS) and the image is not.

SCENARIO

Website A: On this website, we have a resource upload limitation. We can only upload an HTML file. All external files point to website B.

Website B: All resources are uploaded to this website.

The image is fine and works fine, but the fonts are not. Below is an example of an error log. I wonder if it's always like this? how fonts always obey CORS and images are not?

Accessing the font at 'website-b.com/font.ttf?' from source "website-a.com" blocked by CORS policy: No "Access-Control-Allow-Origin" header present on the requested resource. Origin 'website-a.com' is therefore not allowed.

QUESTIONS

  • Is a font always subject to CORS policy and why?
  • Why are images not subject to CORS policy?
  • If a font is CORS, how is it different from an image in terms of CORS?
+3


source to share


1 answer


The requirements here are defined in the font selection requirements section of the CSS font specification :

To download fonts, user agents must use the potentially CORS fetch method defined by the [HTML5] specification for the URL defined in @ font-face rules. When retrieving, user agents must use Anonymous mode, set the referrer source to the style sheet url, and specify the source in the url containing the document.

The implications of this for authors are that fonts tend not to be loaded when cross-originated unless the authors specifically take steps to resolve cross-origin loads. Sites can explicitly allow loading of font data across multiple sites using Access-Control-Allow-Origin

.

The combination of "potentially CORS-enabled fetching" and "anonymous" state is really that the cross-start font selection is always CORS enabled (and not just "potentially") - because the HTML spec says that the mode is for "anonymous "states are alwayscors

:

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

      

So, with all that in mind, here are the specific answers to your questions:

  • Is a font always subject to CORS policy and why?

Yes, loading a cross-origin font with @ font-face always depends on CORS policy as required by the specification above from the CSS font specification and HTML specification.

As for the reasons, there is a related discussion with this comment :

The main reason is that font providers want website authors to restrict the use of fonts on their sites, and it is not easy and reliable for web authors to do this unless we provide a restriction on the same origin.

And in the same discussion, this comment :



The same origin policy applies to almost all new types of resources on the Internet. There are only a few legacy resource types (images, scripts, css and ugh, audio / video (barely skipped a boat on them)) that allow cross-referencing without cross-page links.

This is now standard Internet security practice.

So, to answer the next question:

  1. Why are images not subject to CORS policy?

Images are among the "few legacy resource types" mentioned in the comment above that have been part of the Web for relatively long and have always been allowed to download cross-origin. Newer features, such as fonts added over the past few years, differ in that when support for such features is added these days, they default to the same origin.

  1. If a font is CORS, how is it different from an image in terms of CORS?

Not sure what you're asking, but I think the answer is that from a CORS perspective, images requested in a way that triggers CORS constraints are handled differently than anything cross-origin requested.

What I mean is, if instead of using the element img

to load the image, you are using XHR or the Fetch API to request it, then your browser will enforce the same origin constraints for that image request, just because your browser will be what for -or else that you are requesting cross-origin.

The only difference is that the element img

was designed long before we know what we know now, so in browsers it is different from cross-initial-OK processing than the default processing for newer features. days.

In other words, element handling img

is actually the exception to the rule here, while font handling is consistent with the handling that browsers now use for all new functionality.

+2


source







All Articles