Remove crossOrigin attribute changing

[quangbuule]

Hi,

Changing crossOrigin attribute here will prevent loading image from trusted source (having capability of reading credentials from current domain).

For example: I am at website https://example.com. I want to crop the image that is located at https://img.example.com/some.jpg - which have ability of reading cookie from *.example.com to authenticate me. But the code of Croppie set the crossOrigin to anonymous (for any http/https images), so it fails loading the image.

I suggest letting it be default behavior of browser.

Cheers!

[thedustinsmith]

That code is there so we can load images from a different domain. I'd be OK with adding an option to indicate whether or not we should include that attribute, but I don't think removing it completely will work for cross domain requests ... will it?

[quangbuule]

Let 's take a look at the images I uploaded here, it's located at another domain, and loaded safe and sound without setting any crossorigin.

Also, the crossorigin will fallback to anonymous, so the code to set the crossorigin is not needed.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img (Section crossorigin)

Thank you!

[thedustinsmith]

If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin HTTP header), preventing its non-tainted usage in elements. If invalid, it is handled as if the anonymous value was used. See CORS settings attributes for additional information.

If the attribute is not present, the Origin header will not be sent.

Your image loads fine, I'm not disagreeing with that. It's when you draw that image to a canvas, and try to get get data from that canvas is when you run into problems.

[quangbuule]

You are right, we should add that as an option. In my case I just need the metadata (positioning, scale...), not the canvas data. So I didn't notice the issue when removing the crossOrigin.

[ryios]

Yeah anonymous doesn't work for authenticated images. The image I am trying to crop is on a custom rendering end point and it's not anonymous, it requires authentication so I need "withCredentials" to be set, the code in cropper.js physically removes my withCredentials configuration and causes it to not render in croppie.

Simply removing that code so that my withCredentials attribute is respected resolves the problem. I don't think croppie should be removing the attribute or setting it to anonymous, just respect whatever the user sets on their img tag. Optionally only do that if it doesn't already have a crossOrigin attribute.