image - 字体和图像跨域资源共享

Question

我注意到字体总是受跨域资源共享(CORS)的约束，而图像则不受约束。

情景

网址:在本网站上，我们对上传资源有限制。我们只能上传 HTML 文件。所有外部文件都指向网站 B。

网站B:所有资源均上传至本网站。

图像没问题，工作正常，但字体不是。以下是错误日志的示例。我很好奇是不是一直都是这样？像字体总是受 CORS 影响而图像不是？

在“website-b.com/font.ttf?”访问字体来自“website-a.com”的来源已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此，不允许访问 Origin 'website-a.com'。

问题

字体是否总是受 CORS 政策的约束，为什么？

为什么图像不受 CORS 政策的约束？

如果字体受 CORS 约束，它与图像在 CORS 方面有何不同？

Answer 1

此处的要求在 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.

“潜在启用 CORS 提取”和“匿名”状态的组合实际上是使跨源字体提取始终启用 CORS(不仅仅是“潜在”)——因为 the HTML spec says the mode for the “Anonymous” state is always cors :

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

因此，鉴于所有这些，以下是您问题的具体答案:

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

是的，根据上面引用的 CSS 字体规范和 HTML 规范中的规范要求，使用 @font-face 加载跨源字体始终受 CORS 政策的约束。
至于为什么，与 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

在同一个讨论中， 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.

那么回答你的下一个问题:

2. Why are images not subject to CORS policy?

图像是上面引用的评论中提到的“少数遗留资源类型”之一，它们一直是 Web 的一部分，并且一直被允许跨源加载。最近几年添加的字体等较新功能的不同之处在于，当这些天添加对此类功能的支持时，默认情况下它们仅限于同源。

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

不确定你在问什么，但我认为答案是，就 CORS 而言，以触发 CORS 限制的方式请求的图像与任何请求的跨域处理没有区别。
我的意思是，如果不是使用 img元素加载图像，您使用 XHR 或 Fetch API 来请求它，然后您的浏览器将对该图像请求应用同源限制，就像您的浏览器对您请求跨域的任何其他内容一样。
区别只是 img element 早在我们知道我们现在所知道的东西之前就已经设计好了，因此它在浏览器中的跨域 OK 处理与我们现在对新功能的默认同源处理不同。
换句话说，处理 img元素实际上是这里规则的异常(exception)，而字体的处理与浏览器现在用于所有新功能的处理一致。