字体和图像 Cross-Origin 资源共享
Typeface and Images Cross-Origin Resource Sharing
我注意到字体总是受制于 Cross-Origin 资源共享 (CORS) 而图像不是。
场景
网站A：本网站对上传资源有限制。我们只能上传 HTML 个文件。所有外部文件都指向网站 B。
网站B:所有资源都上传到本站
图片没问题，工作正常，但字体不行。以下是错误日志的示例。我很好奇是否总是这样？比如字体总是受 CORS 而图像不是？
从来源 'website-a.com' 访问 'website-b.com/font.ttf?' 处的字体已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源 'website-a.com'。
问题
- 字体是否始终受 CORS 政策的约束，为什么？
- 为什么图像不受 CORS 政策的约束？
- 如果字体受 CORS 约束，它与图像在 CORS 方面有何不同？
这里的要求来自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:
State
Keywords
Description
anonymous
AnonymousRequests for the element will have their mode set to "cors" and their credentials mode set to "same-origin".
考虑到所有这些，这里是您问题的具体答案：
- 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.
那么回答你的下一个问题：
- Why are images not subject to CORS policy?
图像在上面引用的评论中列出的“少数遗留资源类型”中，它们一直是网络的一部分，并且一直被允许跨域加载。字体等较新的功能（在过去几年内添加）有所不同，因为现在添加对此类功能的支持时，默认情况下它们被限制为同源。
- If the typeface is subject to CORS, how is it differs from the image in terms of CORS?
不确定你在问什么，但我认为答案是：就 CORS 而言，触发同源策略的图像请求与任何跨源请求的处理方式没有区别。
我的意思是，如果您不使用 img 元素来加载图像，而是使用 XHR 或 Fetch API 来请求它，那么您的浏览器将应用相同的-该图像请求的来源限制，就像您的浏览器对您请求跨来源的任何其他内容一样。
不同之处在于 img 元素是在我们知道我们现在所知道的很久之前就设计出来的，所以它在浏览器中的跨域 OK 处理与我们拥有的默认同源处理不同这些天的新功能。
换句话说，img 元素的处理实际上是此处规则的例外，而字体的处理与浏览器现在用于所有新功能的内容一致。
我注意到字体总是受制于 Cross-Origin 资源共享 (CORS) 而图像不是。
场景
网站A：本网站对上传资源有限制。我们只能上传 HTML 个文件。所有外部文件都指向网站 B。
网站B:所有资源都上传到本站
图片没问题，工作正常，但字体不行。以下是错误日志的示例。我很好奇是否总是这样？比如字体总是受 CORS 而图像不是？
从来源 'website-a.com' 访问 'website-b.com/font.ttf?' 处的字体已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源 'website-a.com'。
问题
- 字体是否始终受 CORS 政策的约束，为什么？
- 为什么图像不受 CORS 政策的约束？
- 如果字体受 CORS 约束，它与图像在 CORS 方面有何不同？
这里的要求来自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:
| State | Keywords | Description |
|---|---|---|
| anonymous | Anonymous |
Requests for the element will have their mode set to "cors" and their credentials mode set to "same-origin". |
考虑到所有这些，这里是您问题的具体答案：
- 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.
那么回答你的下一个问题：
- Why are images not subject to CORS policy?
图像在上面引用的评论中列出的“少数遗留资源类型”中，它们一直是网络的一部分，并且一直被允许跨域加载。字体等较新的功能（在过去几年内添加）有所不同，因为现在添加对此类功能的支持时，默认情况下它们被限制为同源。
- If the typeface is subject to CORS, how is it differs from the image in terms of CORS?
不确定你在问什么，但我认为答案是：就 CORS 而言，触发同源策略的图像请求与任何跨源请求的处理方式没有区别。
我的意思是，如果您不使用 img 元素来加载图像，而是使用 XHR 或 Fetch API 来请求它，那么您的浏览器将应用相同的-该图像请求的来源限制，就像您的浏览器对您请求跨来源的任何其他内容一样。
不同之处在于 img 元素是在我们知道我们现在所知道的很久之前就设计出来的，所以它在浏览器中的跨域 OK 处理与我们拥有的默认同源处理不同这些天的新功能。
换句话说，img 元素的处理实际上是此处规则的例外，而字体的处理与浏览器现在用于所有新功能的内容一致。