为什么我们在预加载字体文件时需要 "crossorigin" 属性?
Why do we need the "crossorigin" attribute when preloading font files?
为了正确预加载字体文件,我们被告知我们始终需要将 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
When preloading resources that are fetched with CORS enabled (e.g. fetch(), XMLHttpRequest or fonts), special care needs to be taken to setting the crossorigin attribute on your element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.
As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).
这似乎与我对 CORS 的理解及其必要性的理解相悖。我确定这是有充分理由的,只是我找不到。
在有人链接到我正在谈论的相同文档之前,请参阅下文:
https://drafts.csswg.org/css-fonts/#font-fetching-requirements
我真的很想得到真正了解为什么这是一项要求及其目的的人的深入回答,并提供一些证据(文档等)备份它。
HTML 属性 crossorigin
定义了如何处理跨域请求。设置 crossorigin
属性(相当于 crossorigin="anonymous"
)会将请求切换为使用 same-origin
策略的 CORS 请求。它在 rel="preload"
上是必需的,因为字体请求需要 same-origin
政策。
几乎所有新资源类型都需要 same-origin 策略,例如 fetch()
、<script type="module">
或字体。由于 backwards-compatibility 问题,它不适用于旧资源类型(图像、脚本、css、视频、音频)。 <link rel="preload">
是一种特殊情况,因为它是一种现代功能,需要支持传统资源类型,例如预加载图像。
the ideal is, from now on, you always SOR by default when you
introduce a new type of linking. It's just the right thing to do,
because it lets us avoid having to care about a whole annoying class
of security issues. Source
此要求随后被添加到 CSS 字体的 W3C 草案中。
For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] 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. Source
我也多次看到字体铸造厂要求它防止字体盗版的评论,但我无法用证据证实这一点。
其他相关链接:
为了正确预加载字体文件,我们被告知我们始终需要将 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
When preloading resources that are fetched with CORS enabled (e.g. fetch(), XMLHttpRequest or fonts), special care needs to be taken to setting the crossorigin attribute on your element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.
As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).
这似乎与我对 CORS 的理解及其必要性的理解相悖。我确定这是有充分理由的,只是我找不到。
在有人链接到我正在谈论的相同文档之前,请参阅下文:
https://drafts.csswg.org/css-fonts/#font-fetching-requirements
我真的很想得到真正了解为什么这是一项要求及其目的的人的深入回答,并提供一些证据(文档等)备份它。
HTML 属性 crossorigin
定义了如何处理跨域请求。设置 crossorigin
属性(相当于 crossorigin="anonymous"
)会将请求切换为使用 same-origin
策略的 CORS 请求。它在 rel="preload"
上是必需的,因为字体请求需要 same-origin
政策。
几乎所有新资源类型都需要 same-origin 策略,例如 fetch()
、<script type="module">
或字体。由于 backwards-compatibility 问题,它不适用于旧资源类型(图像、脚本、css、视频、音频)。 <link rel="preload">
是一种特殊情况,因为它是一种现代功能,需要支持传统资源类型,例如预加载图像。
the ideal is, from now on, you always SOR by default when you introduce a new type of linking. It's just the right thing to do, because it lets us avoid having to care about a whole annoying class of security issues. Source
此要求随后被添加到 CSS 字体的 W3C 草案中。
For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] 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. Source
我也多次看到字体铸造厂要求它防止字体盗版的评论,但我无法用证据证实这一点。
其他相关链接: