291793 2025-04-19 10:25:11 -0700 The crossorigin and src attribute order in <img /> cause CORS error 2025-04-26 10:27:58 -0700 1 1 1 Unclassified WebKit Images Safari 18 Mac (Apple Silicon) macOS 15 NEW https://bugs.webkit.org/show_bug.cgi?id=281998 https://bugs.webkit.org/show_bug.cgi?id=190031 InRadar P2 Normal --- 1 bcjohnblue webkit-unassigned annevk cdumez sabouhallawa webkit-bug-importer oldest_to_newest 2111989 0 bcjohnblue 2025-04-19 10:25:11 -0700 Case 1 - Set "crossOrigin" before "src" When set "crossOrigin" before "src", safari only send one CORS request and it is regard as correctly Online demo - https://bcjohnblue.github.io/browser-cors-error/safari-very-good-1.html <script> window.onload = function () { setTimeout(() => { const img = document.createElement('img'); img.crossOrigin = 'anonymous'; img.src = 'https://rjzdhlvuuafqvgoyticm.supabase.co/functions/v1/getCORSImage?image=building.jpg'; document.body.appendChild(img); }, 0); }; </script> Case 2. Set "src" before "crossOrigin" When set "src" before "crossOrigin", safari send two requests, one is CORS request and the other one is no-CORS request Therefore, Safari may randomly cache requests made without CORS headers. If such a no-CORS request gets cached, it can lead to CORS errors when the user reloads the page later. Online demo - https://bcjohnblue.github.io/browser-cors-error/safari-very-bad-1.html <script> window.onload = function () { setTimeout(() => { const img = document.createElement('img'); img.src = 'https://rjzdhlvuuafqvgoyticm.supabase.co/functions/v1/getCORSImage?image=building.jpg'; img.crossOrigin = 'anonymous'; document.body.appendChild(img); }, 0); }; </script> How to reproduce: 1. go to https://bcjohnblue.github.io/browser-cors-error/safari-very-bad-1.html 2. clear the cache 3. reload the page 4. you will see two requests are send, one is CORS request and the other one is no-CORS request 5. reload the page again and if Safari cache the no-CORS request on the last step, it will cause CORS error 6. if CORS error not happen, repeat step 2 to step 5 Expected Results: The result of case 2 should be the same as that of case 1, so it won't cause random CORS errors. Relative links: 1. crossorigin and src attribute order matter - https://github.com/sveltejs/svelte/issues/7454 2. crossOrigin attribute needs to be applied before `<img src>` attribute - https://github.com/facebook/react/issues/14035 3. Safari loads image twice if crossorigin attribute goes after src - https://github.com/vuejs/core/issues/4680 2113279 1 webkit-bug-importer 2025-04-26 10:27:58 -0700 <rdar://problem/150105834>