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

Question

为了正确预加载字体文件，我们被告知始终需要将crossorigin属性应用于我们的<link rel="preload" />标签，例如：

<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 或fonts）时，需要特别注意在元素上设置 crossorigin 属性。即使提取不是跨源的，也需要将属性设置为匹配资源的 CORS 和凭据模式。

如上所述，适用这一点的一个有趣的情况是字体文件。由于各种原因，必须使用匿名模式 CORS 来获取这些（请参阅字体获取要求）。

这似乎与我对 CORS 的理解及其必要性违反直觉。我确信这是有充分理由的，只是我找不到。

在任何人链接到我正在谈论的相同文档之前，请参阅下文：

https://drafts.c​​sswg.org/css-fonts/#font-fetching-requirements

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

Answer 1

HTML 属性crossorigin定义如何处理跨域请求。设置该crossorigin属性（相当于crossorigin="anonymous"）将使用该策略将请求切换为 CORS 请求same-origin。这是rel="preload"字体请求要求same-origin政策所必需的。

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

理想的情况是，从现在开始，当您引入新的链接类型时，默认情况下总是SOR。这是正确的做法，因为它让我们不必关心一整类烦人的安全问题。来源

此要求随后被添加到 CSS 字体的 W3C 草案中。

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

我也多次看到评论说字体铸造厂要求防止字体盗版，但我无法用证据证实这一点。

其他相关链接：

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