我们在预加载字体文件时为什么需要使用 "crossorigin" 属性？

Question

为了正确地预加载字体文件，我们被告知我们总是需要在我们的标签上应用crossorigin属性，例如：

<link rel="preload" href="fonts/comicsans.woff2" as="font" type="font/woff2" crossorigin>

有人能给我真正的原因吗？我只能在MDN上找到一些链接，它们只是规定了这个要求，没有详细说明为什么：

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches

当预加载启用CORS（例如fetch()、XMLHttpRequest或字体）的资源时，需要特别注意在您的<link>元素上设置crossorigin属性，以匹配资源的CORS和凭据模式，即使fetch不是跨源的也需要这样做。

如上所述，一个有趣的应用场景是字体文件。由于各种原因，必须使用匿名模式CORS来获取它们（请参阅字体获取要求）。

这似乎与我对CORS及其必要性的理解相矛盾。我确信有很好的理由，但我找不到。在任何人提供我所说的相同文档之前，请查看下面：

https://drafts.csswg.org/css-fonts/#font-fetching-requirements

我真的希望有一个深入的答案来自真正了解为什么这是一个要求，以及它的目的是什么的人，同时提供一些证据（文档等）来支持。

- jahilldev

---

这也让我感到困惑。据说当字体文件位于另一个服务器/域上时，Crossorigin是必需的，但对于预加载自托管字体文件也是必需的。 - Clarus Dignus

Answer 1

HTML属性crossorigin定义如何处理跨域请求。设置crossorigin属性（等同于crossorigin="anonymous"）将把请求切换为使用same-origin策略的CORS请求。在rel="preload"上需要该属性，因为字体请求需要same-origin策略。

几乎所有新资源类型（如fetch()，<script type="module">或字体）都需要同源策略。由于向后兼容性问题，它不适用于旧资源类型（图像、脚本、CSS、视频、音频）。<link rel="preload">是一个特殊情况，因为它是一个现代功能，需要支持旧的资源类型，比如预加载图像。

“理想情况是，从现在开始，当你引入一种新的链接类型时，你默认始终使用SOR。这是正确的做法，因为它让我们避免关注整个烦人的安全问题。”来源 然后，这个要求被添加到了W3C草案中，用于CSS字体。

“对于字体加载，用户代理必须使用[FETCH]规范定义的可能启用CORS的fetch方法来获取@font-face规则中定义的URL。在获取时，用户代理必须使用“匿名”模式，将引用源设置为样式表的URL，并将原点设置为包含文档的URL。”来源 我也遇到了重复的评论，称它是字体铸造厂要求防止字体盗版的措施，但我无法证实这一点。

其他相关链接：

• Mozilla上的讨论（日期为2010-10-14）
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
• RFC6454

- Kevin Farrugia

---

感谢详细的回复/解释！非常有用。 - jahilldev

这是否意味着服务器必须返回CORS头，即使请求来自相同的源？这没有任何意义，但似乎在预加载字体时是这种情况。 - 12Me21

如果字体托管在不同的源上（例如Google字体），它们需要包含“Access-Control-Allow-Origin”标头，但如果它们在同一源上，则不需要。糟糕命名的“crossorigin”属性将CORS策略设置为“same-origin”。 - Kevin Farrugia