字体和图像跨源资源共享 [英] Typeface and Images Cross-Origin Resource Sharing

问题描述

我注意到字体始终受跨域资源共享（CORS）的约束，图像不受约束。

SCENARIO

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

网站B：所有资源均已上传到该网站。

图像还可以并且可以正常工作，但是字体却不行。以下是错误日志的示例。我很好奇是否总是这样？

从来源 website-a访问 website-b.com/font.ttf？中的字体，就像字体总是要受到CORS的约束吗？ com已被CORS策略阻止：所请求的资源上没有 Access-Control-Allow-Origin标头。因此，不允许访问来源 website-a.com。

问题

1. 字体总是受CORS政策约束吗？为什么？


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


3. 如果字体要接受CORS，就CORS而言，它与图像有何不同？

解决方案

此处的要求在 中定义CSS字体规范中的字体提取要求部分：

对于字体加载，用户代理必须使用由[HTML5]规范针对@ font-face规则中定义的URL定义的可能启用CORS的提取方法。提取时，用户代理必须使用匿名模式，将引荐来源设置为样式表的URL，并将来源设置为包含文档的URL。

这对作者的含义是，除非作者特别采取措施允许跨域加载，否则字体通常不会跨域加载。网站可以使用 Access-Control-Allow-Origin 明确允许跨站点加载字体数据。

可能启用CORS的提取和匿名状态的结合实际上是使跨源字体提取始终启用 的CORS（不仅仅是可能），因为 HTML规范规定了匿名状态始终为 cors ：

  +- ---------- + ----------- + --------------------------- ------------------------------ + 
 |匿名|匿名|对元素的请求将其模式设置为| 
 | | |  cors及其凭据模式设置为 same-origin。 | 
 + ----------- + ----------- + --------------------- ------------------------------------ + 
  

因此，以下是您问题的具体答案：

1. 字体始终受CORS政策的约束吗？为什么？

是，根据上述CSS字体规范和HTML规范中引用的规范要求，使用@ font-face跨域加载字体始终受CORS政策的约束。

到目前为止，与此评论的相关讨论：

主要原因是字体供应商希望Web作者将字体的使用限制在自己的网站上，而Web作者无法轻松可靠地做到这一点。除非我们提供同源限制

在同一讨论中，此评论：

同源策略几乎适用于Web上的所有新资源类型。只有少数传统资源类型（图像，脚本，css和ugh，音频/视频（很少错过这些资源））可以使跨源页面不受限制地进行热链接。

这现在是网络的标准安全做法。

然后回答下一个问题：

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

图像是上面引用的注释中提到的少数传统资源类型之一，它们相对来说一直是Web的一部分，并且拥有始终允许跨域加载。过去几年中添加的字体等较新的功能有所不同，因为最近这些天添加了对此类功能的支持时，默认情况下它们仅限于同源。

< blockquote>

3. 如果字体要接受CORS，就CORS而言，它与图像有何不同？

不确定您要问的是什么，但我认为答案是就CORS而言，以触发CORS的方式请求的图像限制与要求的跨域处理没有什么不同。

我的意思是，如果不使用 img 元素以加载图像，您可以使用XHR或Fetch API来请求它，然后您的浏览器将对该图像请求应用同源限制，就像您的浏览器将对您请求跨域的任何其他内容一样。

区别只是 img 元素的设计早于我们知道什么现在就知道了，所以它在浏览器中的跨域OK处理与如今我们对较新功能的默认缺省相同处理有所不同。

， img 元素的处理实际上是此处规则的例外，而字体的处理与浏览器现在用于所有较新功能的处理是一致的。

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?

解决方案

The requirements here are defined in a 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:

+-----------+-----------+---------------------------------------------------------+
| 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 among the "handful of legacy resource types" mentioned 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 that in terms of CORS, images requested in a way that triggers CORS restrictions aren’t treated 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 the handling that browsers now use for all newer features.

这篇关于字体和图像跨源资源共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！