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

Closed
maloguertin opened this issue Oct 30, 2018 · 13 comments
Closed

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

maloguertin opened this issue Oct 30, 2018 · 13 comments

Comments

@maloguertin
Copy link

@maloguertin maloguertin 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
Copy link
Collaborator

@sophiebits sophiebits 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.

Loading

@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
Copy link
Author

@maloguertin maloguertin 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?

Loading

@rodovich
Copy link

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

Loading

@stale
Copy link

@stale stale bot commented Jan 10, 2020

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.

Loading

@stale
Copy link

@stale stale bot commented Jan 17, 2020

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!

Loading

@stale stale bot closed this Jan 17, 2020
@stuart-clark-45
Copy link

@stuart-clark-45 stuart-clark-45 commented Feb 4, 2020

This is still an issue please reopen

Loading

@sophiebits sophiebits reopened this Feb 4, 2020
@stale stale bot removed the Resolution: Stale label Feb 4, 2020
@stale
Copy link

@stale stale bot commented May 22, 2020

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!

Loading

@stale
Copy link

@stale stale bot commented May 30, 2020

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!

Loading

@stale stale bot closed this May 30, 2020
@arackaf
Copy link

@arackaf arackaf commented Jun 10, 2020

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

Loading

@markhennings
Copy link

@markhennings markhennings commented Sep 2, 2020

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

Loading

@polco-gelato
Copy link

@polco-gelato polco-gelato commented Jun 11, 2021

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.

Loading

@ialexryan
Copy link

@ialexryan ialexryan commented Aug 9, 2021

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?

Loading

@twsl
Copy link

@twsl twsl commented Sep 19, 2021

This bug is still present

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants