字体和图像跨域资源共享

Question

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

设想

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

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

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

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

问题

1. 字体是否总是受 CORS 政策的约束，为什么？
2. 为什么图像不受 CORS 政策的约束？
3. 如果字体受 CORS 约束，它与图像在 CORS 方面有何不同？

Answer 1

此处的要求在 CSS 字体规范的Font fetching requirements部分中定义：

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

这对作者的影响是字体通常不会被跨源加载，除非作者特别采取措施允许跨源加载。站点可以明确允许使用Access-Control-Allow-Origin.

“潜在启用 CORS 提取”和“匿名”状态的组合实际上是使跨源字体提取始终启用 CORS（不仅仅是“潜在”）——因为HTML 规范说明了“匿名”状态的模式总是cors：

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

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

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

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

至于为什么，有一个与此评论相关的讨论：

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

在同一个讨论中，这个评论：

同源策略几乎适用于网络上的所有新资源类型。只有少数遗留资源类型（图像、脚本、css 和呃、音频/视频（几乎没有错过这些））允许跨源页面热链接而不受限制。

这现在是 Web 的标准安全实践。

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

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

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

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

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

我的意思是，如果不是使用img元素加载图像，而是使用 XHR 或 Fetch API 来请求它，那么您的浏览器将对该图像请求应用同源限制，就像您的浏览器对任何事物都会否则，您请求跨域。

不同之处在于img元素早在我们知道我们现在所知道的之前就已经设计好了，因此它在浏览器中的跨域 OK 处理与我们现在对新功能的默认同源处理不同。

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