Bug 291793
| Summary: | The crossorigin and src attribute order in <img /> cause CORS error | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | bcjohnblue |
| Component: | Images | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | annevk, cdumez, sabouhallawa, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=281998 https://bugs.webkit.org/show_bug.cgi?id=190031 |
||
bcjohnblue
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/150105834>