preload: special-case font loading as anonymous-cors?

[noamr]

Recently a new WPT was upstreamed from chromium, that shows that fonts are special-cased in <link rel=preload>, where their crossorigin attribute is ignored and always uses anonymous as that's the default way fonts are preloaded.

This seems to be the current behavior in Firefox and Chrome but is not specified (the current spec doesn't special-case fonts).
Is this the desired behavior? It's possible that we would want to allow loading fonts with credentials in the future as per this request and the URL modifiers proposal in CSS, which would make the current behavior of ignoring crossorigin counterintuitive?

[domenic]

This seems very strange and pretty undesirable. However I worry that browsers who try to change this will cause big perf regressions, if websites are just not using the crossorigin="" attribute in the expected manner. So we might need to think of something clever...

How exactly does this work? In particular I don't understand how preloading images would work with this setup. What do the mode and credentials mode get set to for the request---is it always "cors" / "same-origin"? In that case you just can't prefetch cross-origin images without CORS headers set? Or is it something weirder?

[noamr]

This seems very strange and pretty undesirable. However I worry that browsers who try to change this will cause big perf regressions, if websites are just not using the crossorigin="" attribute in the expected manner. So we might need to think of something clever...

How exactly does this work? In particular I don't understand how preloading images would work with this setup. What do the mode and credentials mode get set to for the request---is it always "cors" / "same-origin"? In that case you just can't prefetch cross-origin images without CORS headers set? Or is it something weirder?

Both images and links have a crossorigin attribute, and preload links have an as attribute.
So the crossorigin attribute of the img and the link has to match. When the font is as, the preload fetch can ignore the link element attributes.

Maybe the "clever" thing would be that the default for fonts is anonymous, but if you set it it takes precendence?

[domenic]

OK so it's something like this?

<!-- mode: no-cors; credentials mode: include -->
<link rel="preload" as="image" href="img1.png">

<!-- mode: no-cors; credentials mode: include. MATCH -->
<img src="img1.png">



<!-- mode: cors; credentials mode: same-origin -->
<link rel="preload" as="image" href="img1.png" crossorigin="anonymous">

<!-- mode: no-cors; credentials mode: include. NO MATCH -->
<img src="img1.png">


<!-- mode: cors; credentials mode: same-origin -->
<link rel="preload" as="font" href="font.woff2">

<!-- mode: cors; credentials mode: same-origin. MATCH -->
<style>
@font-face {
  family: x;
  src: url("font.woff2") format("woff2");
}
</style>

<!-- mode: cors; credentials mode: same-origin (crossorigin="" ignored) -->
<link rel="preload" as="font" crossorigin="use-credentials" href="font2.woff2">

<!-- mode: cors; credentials mode: same-origin. MATCH -->
<style>
@font-face {
  family: y;
  src: url("font2.woff2") format("woff2");
}
</style>

[noamr]

Actually maybe I misunderstand the new WPT, it's a bit difficult to read, and it does the right thing. Sorry for the noise.
It seems to test that also same-origin fonts should be fetched anonymous CORS, which is a bit strange.

[domenic]

That is a bit strange, hmm. All browsers do that?

Is that how font-face works, or just preload?

[noamr]

That is a bit strange, hmm. All browsers do that?

Is that how font-face works, or just preload?

I need to spend some cycles getting to the bottom of this. The WPT does seem strange.

[takahirox]

Hi, I am the author of the WPT.

Recently a new WPT was upstreamed from chromium, that shows that fonts are special-cased in , where their crossorigin attribute is ignored and always uses anonymous as that's the default way fonts are preloaded.

Fonts are not special-cased in <link rel=preload> in the spec or Chromium implementation. What the WPT test wants to confirm is

if <link rel=preload as=font> is without CORS anonymoust mode attribute the main web fonts loading (@font-face in CSS or FontFace.load() in JavaScript)` doesn't match the prefetch even for the same origin request because the web font loading always embeds CORS anonymous mode into the request as defined in the web fonts loading spec.

Sorry if the WPT is confusing. Maybe the comment in the WPT test should be more clarified.

https://github.com/web-platform-tests/wpt/pull/32709/files#diff-91d7f402fec9b75ee9e92a284e79b6b29b65399ba932493dc7aa9af3932fca06R72-R80

[noamr]

Hi, I am the author of the WPT.

Recently a new WPT was upstreamed from chromium, that shows that fonts are special-cased in , where their crossorigin attribute is ignored and always uses anonymous as that's the default way fonts are preloaded.

Fonts are not special-cased in <link rel=preload> in the spec or Chromium implementation. What the WPT test wants to confirm is

if <link rel=preload as=font> is without CORS anonymoust mode attribute the main web fonts loading (@font-face in CSS or FontFace.load() in JavaScript)` doesn't match the prefetch even for the same origin request because the web font loading always embeds CORS anonymous mode into the request as defined in the web fonts loading spec.

Sorry if the WPT is confusing. Maybe the comment in the WPT test should be more clarified.

https://github.com/web-platform-tests/wpt/pull/32709/files#diff-91d7f402fec9b75ee9e92a284e79b6b29b65399ba932493dc7aa9af3932fca06R72-R80

Ah got it, thanks for the clarification.
Sounds though that it duplicates https://github.com/web-platform-tests/wpt/blob/master/preload/preload-resource-match.https.html, does it test something new that that one doesn't?

[takahirox]

Sounds though that it duplicates https://github.com/web-platform-tests/wpt/blob/master/preload/preload-resource-match.https.html, does it test something new that that one doesn't?

I have overlooked that test. I haven't read through the test in details yet but preload-font-crossorigin.html checks that the main web fonts loading doesn't match non-anynomous-crossorigin-attribute-preload while preload-resource-match.https.html doesn't seem to do it.

preload-font-crossorigin.html might be able to be merged into preload-resource-match.https.html.