crossOrigin attribute needs to be applied before <img src> attribute

[maloguertin]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

React doesn't handle changing the crossOrigin attribute properly

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Same img going from no crossorigin attribute to crossorigin=anonymous

In pure JS:
http://jsfiddle.net/R6DWN/39/
On first load Origin is not set (as should be according to chrome):

Referer: http://fiddle.jshell.net/_display/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

When clicking reload:

Origin: http://fiddle.jshell.net
Referer: http://fiddle.jshell.net/_display/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

In React:
https://jsfiddle.net/69z2wepo/316905/

when clicking reload the img element does get updated with crossorigin but the image isn't reloaded

Same img loading twice with crossorigin=anonymous

In pure JS:
http://jsfiddle.net/R6DWN/40/

The request is only fired once if you check the network tab with those headers:

Referer: https://fiddle.jshell.net/_display/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

In React:
https://jsfiddle.net/69z2wepo/316907/

On first load you have those headers:

Origin: https://fiddle.jshell.net
Referer: https://fiddle.jshell.net/_display/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

On clicking reload for some reason the request is fired again WITHOUT the origin header even with the crossOrigin='anonymous':

Referer: https://fiddle.jshell.net/_display/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

What is the expected behavior?

When rerendering an img with the same src but defining the crossorigin attribute it should reload the image with the origin header

When rerendering an img with the same src and crossorigin=anonymous again it should not fire a new request without origin header

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Google Chrome
Version 69.0.3497.100 (Official Build) (64-bit)

React v16.6.0

[sophiebits]

It looks like this is probably because the src attribute gets assigned first. If you change the JSX to have the crossorigin tag before the src then it looks like it works correctly.

We have a special case for multiple here:

react/packages/react-dom/src/client/ReactDOMComponent.js

Lines 406 to 409 in 169f935

	if (type === 'select' && props.multiple) {
	const node = ((domElement: any): HTMLSelectElement);
	node.multiple = true;
	}

We could possibly do similar for crossorigin, though I'm unsure if we should want to.

[maloguertin]

We could possibly do similar for crossorigin, though I'm unsure if we should want to.

What would be the arguments for not wanting to do that?

[rodovich]

If you change the JSX to have the crossorigin tag before the src then it looks like it works correctly.

Can this be relied on? As far as I can tell neither Babel docs nor the JSX spec specify that the input order is preserved in the output (although empirically it does appear to be with Babel), and MDN states that object iteration order is implementation-dependent (although empirically it does appear to match the declaration order, at least with object literals with string keys).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[stuart-clark-45]

This is still an issue please reopen

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[arackaf]

I just bumped into this. Can we re-open this issue please?

[markhennings]

This is a very difficult issue to troubleshoot because order does not normally matter for attributes. Reopen the issue please and save devs precious time :)

[polco-gelato]

Hello! I just spent few hours trying to find out why some of my requests for images were failing with CORS. And that was the reason. Maybe that needs to be somehow mentioned in the doc: order of attributes matters ? or crossOrigin, if present, needs to be set before src ?
Especially what was happening to me was: React would do the request first without the crossOrigin param set, then later my code would try loading the same image, with the crossOrigin param this time, and that would fail because the browser cached the first request without the param.

[ialexryan]

Staying on top of this confusing bug is costing us time and creating tech debt in our codebase. It feels bad to see this issue being closed with the bug remaining unfixed. Can someone with the appropriate permissions please hit the reopen button?

[twsl]

This bug is still present