CORS：如何在使用 AWS S3 和 canvas.toDataUrl 时解决 Safari 和 Firefox 的安全问题？答案

【问题标题】：CORS: How to solve security Issue with Safari and Firefox while using AWS S3 and canvas.toDataUrl?CORS：如何在使用 AWS S3 和 canvas.toDataUrl 时解决 Safari 和 Firefox 的安全问题？
【发布时间】：2017-07-16 22:50:19
【问题描述】：

我正在使用 Meteor 和 React react-image-crop，我传递了一个由 S3 和 Cloudfront 托管的 Image src，部署在 Heroku .为了在 Safari 和 Firefox 上实现canvas.toBlob() 功能，我添加了Javascript-Canvas-To-Blob。

在裁剪图像时，我收到来自 Safari 和 Firefox 的安全错误：

SecurityError: 操作不安全。

SecurityError（DOM 异常 18）：操作不安全。

将我指向canvas.toDataURL()。

我对自己的理解非常不自信，但可以说问题是由于客户端（我的浏览器）和 S3 服务器之间的直接连接造成的，它们具有不同的域，因此违反了same domain policy？

所以我通过

在我的客户端（浏览器）的域中加载图像

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

现在我创建了一个画布，在画布上绘制“裁剪”的图像并将其转换为一个 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));
});

这一定是问题所在。在 Safari/Firefox 中，Javascript-Canvas-To-Blob 使用 canvas.toDataURL()，这似乎是不允许的，因为它是从 S3 域上的客户端域执行的？

因此，Javascript 向 S3 发送了请求图像的 HTTP 请求。 S3 用 img 回答，它仍然属于 S3 域。现在我的客户端无法执行 canvas.toDataURL() 操作，因为它作用于 S3 域中的 img？

最后如何正确设置 S3 的 CORS 和我的 Meteor 客户端相互通信？

【问题讨论】：

标签： javascript amazon-web-services meteor canvas amazon-s3

【解决方案1】：

要将 CORS 配置添加到您的 S3 存储桶： S3 - Access-Control-Allow-Origin Header

要在代码中使用 CORS 图像，请添加以下行： img.crossOrigin = "Anonymous"; 某处：

let img = new Image();

img.crossOrigin = "Anonymous";

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

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

【讨论】：

【解决方案2】：

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

我认为您需要将浏览器策略包添加到您的应用中。这将添加允许您执行跨域请求所需的标头。

【讨论】：