Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
maloguertin opened this issue Oct 30, 2018 · 3 comments

Comments

@maloguertin
Copy link

commented Oct 30, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Oct 30, 2018

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:

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.

@sophiebits sophiebits changed the title Bug when rendering a new img with same src but different crossOrigin attribute crossOrigin attribute needs to be applied before src attribute Oct 30, 2018

@sophiebits sophiebits changed the title crossOrigin attribute needs to be applied before src attribute crossOrigin attribute needs to be applied before <img src> attribute Oct 30, 2018

@maloguertin

This comment has been minimized.

Copy link
Author

commented Oct 31, 2018

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

This comment has been minimized.

Copy link

commented Mar 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.