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

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

[arackaf]

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

[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).