字体和图像跨域资源共享

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

要求这里在一个Font fetching requirements section in the CSS Fonts spec定义：

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

这对作者的影响是字体通常不会被加载到跨越原点，除非作者专门采取措施来允许跨源加载。网站可以使用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. 字体总是受制于CORS策略，为什么？

是，跨域字体加载与@字体面总是受CORS政策，每从CSS字体规范和HTML规范上面提到的规范要求。

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

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

而在同样的讨论，this comment：

的SA我来源政策适用于网络上几乎所有的新资源类型。只有少数传统资源类型（图像，脚本，css和ugh，音频/视频（几乎没有错过那些））可以让跨网页无限制地热链接。

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

所以再回答你的下一个问题：

为什么图像不受CORS政策？

图片均在同注释引用上述that've网络的一部分已经永远相对提到的“遗产资源类型的少数”，并一直允许加载跨域。像过去几年里添加的字体这样的新功能，不同之处在于，现在在为这些功能添加支持时，它们在默认情况下被限制为同源。

1. 如果字体受制于CORS，它与CORS的形式有什么不同？

你问不知道是什么，但我想答案是，CORS而言，在触发CORS限制比什么都要求跨来源不区别对待的方式请求的图像。

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

不同之处在于img元素在我们知道我们现在知道的很久之前就已经设计好了，所以它在浏览器中具有不同的交叉原点处理，而不是我们现在使用的最新功能。

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