3

I am using Meteor with React, react-image-crop, which I pass an Image src hosted by S3 and Cloudfront, deployed on Heroku. To achieve canvas.toBlob() functionality on Safari and Firefox I added Javascript-Canvas-To-Blob.

On cropping the Image I get security Error from Safari and Firefox:

SecurityError: The operation is insecure.

SecurityError (DOM Exception 18): The operation is insecure.

Pointing me to the canvas.toDataURL().

I am very insecure about my understanding but is it right to say, that the problem is due to the direct connection between the client (my browser) and the S3 Server, which have different domains and so violate the same domain policy?

So I load an image in the domain of my client (browser) via

let img = new Image();
img.onload = function() {
  console.log(img.src);
}
img.src = S3DomainUrl;

Now I created a canvas, draw the "cropped" image on a canvas and transform it to a blob:

var canvas = document.createElement('canvas');                                                                                                                                 
... (cropSizes)
var ctx = canvas.getContext('2d');
ctx.drawImage(loadedImage, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
canvas.toBlob(function(blob) {
  console.log(URL.createObjectURL(blob));
});

Here must be the problem. In Safari/Firefox the Javascript-Canvas-To-Blob uses canvas.toDataURL(), which seems to be not allowed as it is acting from the Client domain on the S3 domain?

So Javascript sent a HTTP request asking for the Image to S3. S3 answered with the img, which still belongs to the S3 Domain. And now my client cannot perform the canvas.toDataURL() operation as it acts on the img from the S3 domain?

Finally how do I correctly set the CORS of S3 and my Meteor client to communicate with each others?

DrDirk
  • 1,937
  • 3
  • 25
  • 36

2 Answers2

1

To add the CORS config to your S3 bucket: S3 - Access-Control-Allow-Origin Header

To use the CORS image in your code, add this line: img.crossOrigin = "Anonymous"; Somewhere like:

let img = new Image();

img.crossOrigin = "Anonymous";

img.onload = function() {
  console.log(img.src);
}
img.src = S3DomainUrl;

For more info see:

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Community
  • 1
  • 1
kooc
  • 146
  • 5
0

https://atmospherejs.com/meteor/browser-policy

I think you will need to add the browser policy package to your app. This will add the headers necessary to allow you to perform cross domain requests.

Paul Cochrane
  • 399
  • 1
  • 4