Bug 236009

Summary: preload as=fetch loads json resource again during javascript fetch
Product: WebKit Reporter: tobias
Component: Page LoadingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: achristensen, ahmad.saleem792, beidson, karlcow, m1, paul, webkit-bug-importer, youennf
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=249887
https://bugs.webkit.org/show_bug.cgi?id=268370
Attachments:
Description Flags
Web Inspector screenshot
none
memory_cache none

tobias
Reported 2022-02-02 02:55:56 PST
Safari 15.3 (17612.4.9.1.5) on MacOS loads the resource specified in the preload and again with fetch in the javascript code. XMLHttpRequest also loads the resource again not using the preloaded data. Minimal example: <!DOCTYPE html> <html lang="en"> <head> <title>Preload-Test</title> <meta charset="utf-8"> <link rel="preload" href="data.json" as="fetch" type="application/json" crossorigin> </head><body> <script> fetch('data.json', { credentials: 'same-origin', mode: 'cors' }).then(res => console.log(res)); </script> </body></html>
Attachments
Web Inspector screenshot (108.45 KB, image/png)
2022-02-02 02:56 PST, tobias 		no flags
Details
memory_cache (337.75 KB, image/png)
2022-02-03 15:49 PST, tobias 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
tobias
Comment 1 2022-02-02 02:56:47 PST
Created attachment 450631 [details] Web Inspector screenshot
tobias
Comment 2 2022-02-03 02:40:25 PST
Safari on iOS 15.3 shows the same behavior, loading the resource twice.
Radar WebKit Bug Importer
Comment 3 2022-02-03 03:00:12 PST
<rdar://problem/88426961>
youenn fablet
Comment 4 2022-02-03 03:05:55 PST
I wonder whether this is a regression or whether this never really worked (maybe we are not in BufferData mode?). @Tobias, do you know whether this used to work before?
tobias
Comment 5 2022-02-03 13:23:34 PST
Hi, I'm not sure how the behavior was in the past but I just found this post: https://stackoverflow.com/questions/52635660/can-link-rel-preload-be-made-to-work-with-fetch/63814972#63814972 Due to one comment it might have already been this way since Safari 12.0.3 I can confirm that the posted solution works across browsers. <link rel="preload" as="fetch" href="/data.json"> combined with: fetch('/data.json', { method: 'GET', credentials: 'include', mode: 'no-cors', }) This solves my problem in this case. I'm no expert on the correct behavior given the original posted combinations of fetch options and usage of the crossorigin attribute. Also the standard resources seem to not cover this case clearly: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches https://w3c.github.io/preload/
tobias
Comment 6 2022-02-03 13:52:37 PST
Sadly there seems to be now another issue. The preloaded json file is always served from memory cache and gets only loaded again after restarting the browser.
tobias
Comment 7 2022-02-03 15:43:29 PST
It is also served repeatedly from memory cache even if the server send a no-cache header.
tobias
Comment 8 2022-02-03 15:49:48 PST
Created attachment 450831 [details] memory_cache
Michał Łazowik
Comment 9 2022-11-25 19:59:26 PST
Still the case with `15.6.1 (17613.3.9.1.16)` and `Release 151 (Safari 16.0, WebKit 17615.1.1.2)`. FWIW MDN claims no support for `crossorigin` on `<link`> in Safari: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#html.elements.link.crossorigin I don't see any difference in headers across requests. Chrome and Firefox work.
youenn fablet
Comment 10 2022-11-29 01:12:44 PST
(In reply to tobias from comment #8) > Created attachment 450831 [details] > memory_cache Do you have a repro case available?
Sam Sneddon [:gsnedders]
Comment 11 2022-12-05 04:13:56 PST
(In reply to Michał Łazowik from comment #9) > FWIW MDN claims no support for `crossorigin` on `<link`> in Safari: > https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/ > crossorigin#html.elements.link.crossorigin It claims support is unknown, not that there is no support. By contrast, https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement#browser_compatibility shows `crossOrigin` as having been supported since Safari 10.
Karl Dubost
Comment 12 2023-08-17 05:36:52 PDT
Bug 249887 another issue with crossorigin.
Paul Sutherland
Comment 13 2025-04-13 11:45:34 PDT
I think this is the origin not being included for cors requests originating from fetch. When the preload request is compared to the js/fetch request, the headers don't match so the preload response isn't used. I can submit a pull request, is it possible to become the assignee for this bug?
Ahmad Saleem
Comment 14 2025-04-13 13:38:30 PDT
(In reply to Paul Sutherland from comment #13) > I think this is the origin not being included for cors requests originating > from fetch. When the preload request is compared to the js/fetch request, > the headers don't match so the preload response isn't used. > > I can submit a pull request, is it possible to become the assignee for this > bug? Yes - go ahead and submit PR. I am happy to assign it to you, if you are good to go.
Note You need to log in before you can comment on or make changes to this bug.