CORS error when loading images from external urls

[Wamy-Dev]

cdfd80c

Supposedly fixed on this commit ^^^

using: "react-filerobot-image-editor": "^4.3.8"

Any fixes?

[AhmeeedMostafa]

Could u please provide more context about ur issue to be able to check? as it is fixed

[Wamy-Dev]

I don't really have any other context. I just get a cors error when trying to use an outside url on a production env. It seems like it works locally but when running on https://example.com, it fails with cors.

Apparently others are having the same problem.

[AhmeeedMostafa]

I'm sorry I couldn't provide any help for an issue not clear for me,,, some more context about the issue would be more helpful ex. The url used, video/steps/codesandbox producing the issue

[jbwestphal]

It also happens in the platform I'm working on... I've updated to the latest version and still same CORS error that happens sometimes (prod-like env)

[AhmeeedMostafa]

@jbwestphal I have wrote down ur image's url and copied into the demo and it works good without any errors, could u please clarify?

[Wamy-Dev]

Its a problem on production. Not local which is strange

[jbwestphal]

I see, yeah it's weird because it happens sometimes... The URL is from AWS S3 Bucket, which is set as public... wondering if we need to take extra steps to make sure the plugin always accepts any image URL. We are using the ReactJs version, e.g.

"react-filerobot-image-editor": "^4.4.0"
"filerobot-image-editor": "^4.4.0"

---

<FilerobotImageEditor
            source={source} // which is always this kind of AWS URL
            onSave={(editedImageObject, designState) => {
              ...
           }}
            closeAfterSave
            onClose={close}
            Rotate={{ angle: 90, componentType: 'slider' }}
            Crop={{
              ratio: 1 / 1,
              ratioTitleKey: 'Square',
              noPresets: true,
            }}
            tabsIds={[TABS.ADJUST, TABS.RESIZE, TABS.FILTERS, TABS.FINETUNE]}
          />

[AhmeeedMostafa]

@Wamy-Dev Checked the same image of @jbwestphal on demo's hosted prod. and still working fine!

@jbwestphal we don't face such an issue in fact so it's always accepting any image URL, I'm getting surprised that both of u face the issue... but from plugin's side it's as expected the thing u could do from ur side checking ur server and make sure it has (Access-Control-Allow-Origin headers allow shared requests) -- CORS enabled --

and anyways I'd be happy if u could provide more context to debug the issue

[drlube]

@AhmeeedMostafa I am trying to debug this issue with @jbwestphal. The external URL always loads just fine in the browser inline (even when the CORS error appears). The issue is only triggered when activating the firebot plugin. Are you loading the image in a non-standard way that would confuse the browser?

This is what our CORS policy is on the S3 bucket:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Are there any other methods you would use besides GET and HEAD?

[AhmeeedMostafa]

@drlube nope, if any of u could provide a codesandbox contains the code that generates the CORS error I might help otherwise I couldn't really help as still no clear info for me.... the mentioned CORS policy seems good so not pretty sure what causing the issue

[Zedash]

Hello guys,

I've had the same problem, I use the AWS CloudFront CDN paired with a Lambda function to serve my images and assets and I have two solutions to resolve these CORS errors:

1. Load your image into an new Image() object and return the src string ;
2. Or, configure your CDN / Lambda function (if you have the option) to add the Access-Control-Allow-Origin: '*' header.

For the first option you can do somthing like this:

/**
   * @param {String} src URL of the remote image or base64.
   * @returns {String}
   */
  const loadImage = (src) => {
    const image = new Image();

    image.onload = () => console.log(image);

    image.crossOrigin = 'Anonymous';
    image.src = src;

    return image.src;
  };

Remove the crossOrigin if you can't define the Access-Control-Allow-Origin: '*' header on the origin side.

[Wamy-Dev]

Loading the image into an img tag and then getting the data from that is what I have had to resort to as it was simple enough to do. This needs to be fixed though.

[AhmeeedMostafa]

@Wamy-Dev if we removed crossOrigin it will cause an issue for other people, more appropriately is to have the CORS policy on ur server, we might add some property whether to consider adding crossOrigin in the request or not... but note that removing crossOrigin may be cause another issue with canvas saving (Tainted canvas)

[AhmeeedMostafa]

@ALL, we have supported noCrossOrigin property in v4.5.0 release that might be useful for u, but we don't advice to use it unless u know what u are doing as it might affect the filters applying & image saving

[drlube]

This seems to fix our issue for now: https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

It's because the cached image loaded via the <img> tag doesn't retain the CORS headers in Chrome/Edge (and possibly other browsers), so when the cached image is loaded into the plugin with no CORS headers, it fails.

[AhmeeedMostafa]

Closed as it's pretty clear for all of us now.

[parth-pindiwala-us]

I am still facing the issue.

If I use noCrossOrigin then the image is loaded but I get this error.
Konva error: Unable to apply filter. Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. This post may help you https://konvajs.org/docs/posts/Tainted_Canvas.html.