fix(common): preserve crossorigin on image preloads#69743
Conversation
Propagate the crossorigin attribute from priority NgOptimizedImage hosts to SSR-generated preload links. Keep preload and image requests in the same credentials mode to avoid an anonymous image issuing an earlier credentialed request. Include the CORS mode in the preload deduplication key so images sharing a URL but using different policies receive compatible preloads.
| sizes?: string, | ||
| crossOrigin?: string | null, | ||
| ): void { | ||
| const preloadKey = JSON.stringify([src, getCrossOriginMode(crossOrigin)]); |
There was a problem hiding this comment.
I'm questionning wether we need to use the cross origin mode in the key.
Do you see a true usecase where a src would be use with different cross origin mode ?
There was a problem hiding this comment.
Yes, indeed, according to our issues
- build: 🔧 More control over custom image loader #53309
- NgOptimizedImage : IMAGE_LOADER as Observable<string>|string #50928
We might want to use a different CDN at runtime or according to user customization. I've also experimented with switching CDNs using some runtime tricks, so I don't think it's an unusual use case.
Or if you're referring to the key, it's more for security to avoid an unwanted case (it would be strange if it wasn't consistent).
Eg the same image endpoint could redirect or return different content depending on whether credentials are included. It may also be used normally in one place and with crossorigin="anonymous" for some usage elsewhere.
Since the browser treats the request mode and credentials mode as part of the preload key, preloads for the same URL but different CORS modes are not interchangeable.
Propagate the crossorigin attribute from priority NgOptimizedImage hosts to SSR-generated preload links. Keep preload and image requests in the same credentials mode to avoid an anonymous image issuing an earlier credentialed request.
Include the CORS mode in the preload deduplication key so images sharing a URL but using different policies receive compatible preloads.
This avoid an controlling
images.example.comcan use the credentialed preload to receive parent-domain cookies and overwrite them viaSet-Cookie.Propagating
crossorigin="anonymous"prevents both cookie transmission and replacement.More context https://issuetracker.google.com/u/1/issues/533629865