{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/14035","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/14035/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/14035/comments","events_url":"https://api.github.com/repos/facebook/react/issues/14035/events","html_url":"https://github.com/facebook/react/issues/14035","id":375655113,"node_id":"MDU6SXNzdWUzNzU2NTUxMTM=","number":14035,"title":"Bug when rendering a new img with same src but different crossOrigin attribute ","user":{"login":"maloguertin","id":6407064,"node_id":"MDQ6VXNlcjY0MDcwNjQ=","avatar_url":"https://avatars2.githubusercontent.com/u/6407064?v=4","gravatar_id":"","url":"https://api.github.com/users/maloguertin","html_url":"https://github.com/maloguertin","followers_url":"https://api.github.com/users/maloguertin/followers","following_url":"https://api.github.com/users/maloguertin/following{/other_user}","gists_url":"https://api.github.com/users/maloguertin/gists{/gist_id}","starred_url":"https://api.github.com/users/maloguertin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maloguertin/subscriptions","organizations_url":"https://api.github.com/users/maloguertin/orgs","repos_url":"https://api.github.com/users/maloguertin/repos","events_url":"https://api.github.com/users/maloguertin/events{/privacy}","received_events_url":"https://api.github.com/users/maloguertin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-30T19:26:15Z","updated_at":"2018-10-30T22:33:34Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  Note: if the issue is about documentation or the website, please file it at:\r\n  https://github.com/reactjs/reactjs.org/issues/new\r\n-->\r\n\r\n**Do you want to request a *feature* or report a *bug*?**\r\n\r\nbug\r\n\r\n**What is the current behavior?**\r\n\r\nReact doesn't handle changing the crossOrigin attribute properly\r\n\r\n**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:**\r\n\r\n### Same img going from **no** `crossorigin` attribute to `crossorigin=anonymous`\r\n\r\nIn pure JS: \r\nhttp://jsfiddle.net/R6DWN/39/\r\nOn first load Origin is not set (as should be according to chrome):\r\n```\r\nReferer: http://fiddle.jshell.net/_display/\r\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n```\r\n\r\nWhen clicking `reload`:\r\n```\r\nOrigin: http://fiddle.jshell.net\r\nReferer: http://fiddle.jshell.net/_display/\r\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n```\r\nIn React:\r\nhttps://jsfiddle.net/69z2wepo/316905/\r\n\r\nwhen clicking `reload` the img element does get updated with crossorigin but the image isn't reloaded\r\n\r\n### Same img loading twice with `crossorigin=anonymous`\r\n\r\nIn pure JS:\r\nhttp://jsfiddle.net/R6DWN/40/\r\n\r\nThe request is only fired once if you check the network tab with those headers:\r\n```\r\nReferer: https://fiddle.jshell.net/_display/\r\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n```\r\n\r\nIn React:\r\nhttps://jsfiddle.net/69z2wepo/316907/\r\n\r\nOn first load you have those headers:\r\n```\r\nOrigin: https://fiddle.jshell.net\r\nReferer: https://fiddle.jshell.net/_display/\r\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n```\r\n\r\nOn clicking `reload` for some reason the request is fired again WITHOUT the origin header even with the crossOrigin='anonymous':\r\n```\r\nReferer: https://fiddle.jshell.net/_display/\r\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n```\r\n\r\n\r\n**What is the expected behavior?**\r\n\r\nWhen rerendering an img with the same src but defining the `crossorigin` attribute it should reload the image with the `origin` header\r\n\r\nWhen rerendering an img with the same src and `crossorigin=anonymous` again it should not fire a new request without `origin` header\r\n\r\n**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**\r\n\r\nGoogle Chrome\r\nVersion 69.0.3497.100 (Official Build) (64-bit)\r\n\r\nReact v16.6.0\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/434494263","html_url":"https://github.com/facebook/react/issues/14035#issuecomment-434494263","issue_url":"https://api.github.com/repos/facebook/react/issues/14035","id":434494263,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNDQ5NDI2Mw==","user":{"login":"sophiebits","id":6820,"node_id":"MDQ6VXNlcjY4MjA=","avatar_url":"https://avatars2.githubusercontent.com/u/6820?v=4","gravatar_id":"","url":"https://api.github.com/users/sophiebits","html_url":"https://github.com/sophiebits","followers_url":"https://api.github.com/users/sophiebits/followers","following_url":"https://api.github.com/users/sophiebits/following{/other_user}","gists_url":"https://api.github.com/users/sophiebits/gists{/gist_id}","starred_url":"https://api.github.com/users/sophiebits/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sophiebits/subscriptions","organizations_url":"https://api.github.com/users/sophiebits/orgs","repos_url":"https://api.github.com/users/sophiebits/repos","events_url":"https://api.github.com/users/sophiebits/events{/privacy}","received_events_url":"https://api.github.com/users/sophiebits/received_events","type":"User","site_admin":false},"created_at":"2018-10-30T22:33:34Z","updated_at":"2018-10-30T22:33:34Z","author_association":"MEMBER","body":"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.\r\n\r\nWe have a special case for `multiple` here:\r\n\r\nhttps://github.com/facebook/react/blob/169f935f781c764a8c04f441c5e27b00a0329e8c/packages/react-dom/src/client/ReactDOMComponent.js#L406-L409\r\n\r\nWe could possibly do similar for crossorigin, though I'm unsure if we should want to."}}
{"actor":{"display_login":"sophiebits"}}