When requesting font files cross-domain you have to ensure that the domain requesting is allowed to access the font file using CORS headers:
However this isn't required when requesting images, either for img
elements or background-image
.
Why do these file types have different security?
This is because web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is a way for a remote host to control access to certain types of resources. To resolve this issue you need to ensure that your server is sending the correct Access-Control-Allow-Origin header when font files are requested.
You can directly disable CORS in the browser. If you do this, please be aware that you are disabling security restrictions which are there for a reason. I wouldn't recommend browsing the web with CORS disabled; Just disable it whilst developing your website/app.
This header field cannot be set or changed by the user but is set by the browser for XHR requests. So if you have an API that is designed to be only used by XHR, you can (and should) require the request to conform with CORS.
The same-origin policy is a security measure standardized among browsers. The "origin" mostly refers to a "domain". It prevents different origins from interacting with each other, to prevent attacks such as Cross Site Request Forgery.
Expanding on the links @Marged provided, browsers enforce CORS on font files because the spec says that they must do so:
For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] 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.
…and notes directly:
The implications of this for authors are that fonts will typically not be loaded cross-origin […]
That doesn't really answer your question though, since the spec itself doesn't give the rationale for why this requirement had to be there.
The linked Firefox thread is one of many discussions, and mentions a general "improved security for new specs" rationale:
There's a larger discussion here of what "new" resource types should default to, whether they should simply default to the same unrestricted linking allowed for images and script or whether they should be restricted by default with the ability to relax via CORS
But it sounds like in this particular case, the driving reason was political. That is, it factored in concerns which were not "purely technical". As one of the implementers summarized:
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 by default.
This is corroborated in the bug tracker discussions of other implementers as well, e.g.:
The main effects of [a browser] not doing so, as far as I can see, are sites inadvertently violating their font licenses and authors being confused about the proper way to deploy fonts.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With