Bug 291793 – The crossorigin and src attribute order in <img /> cause CORS error

• Status: NEW
• Component: Images

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

[Radar WebKit Bug Importer]

<rdar://problem/150105834>