什么我设置CORS设置和在哪里，使我的画布不会被污染？ [英] What do I set CORS settings to and where so that my canvas doesn't get tainted?

问题描述

我有一个大画布，图标和图片，都来自我的S3桶。当我尝试上传它（运行 toDataUrl ）时，Chrome会投诉

无法在'HTMLCanvasElement'上执行'toDataURL'：无法导出有污染的画布

这个错误之前，但我的解决方案，那个时间是本地托管所有的图像。这是不可能的这一次，但是，所以我需要解决这个问题。

Googling这个问题带来了很多东西关于CORS，我不了解。

我在我的S3存储桶中尝试了以下设置：

 code><？xml version =1.0encoding =UTF-8？> 
< CORSConfiguration xmlns =http://s3.amazonaws.com/doc/2006-03-01/> 
< CORSRule> 
< AllowedOrigin> *< / AllowedOrigin> 
< AllowedOrigin>匿名< / AllowedOrigin> 
< AllowedMethod> PUT< / AllowedMethod> 
< AllowedMethod> POST< / AllowedMethod> 
< AllowedMethod> GET< / AllowedMethod> 
< AllowedMethod> HEAD< / AllowedMethod> 
< AllowedHeader> *< / AllowedHeader> 
< / CORSRule> 
< / CORSConfiguration> 
  

但这不起作用。

我的直觉告诉我，我必须改变在服务器的东西，否则这个安全要求的目的是什么？

那么我要改变什么，

解决方案

您的CORS配置应该是很好的，最小需要为

 <？xml version =1.0encoding =UTF-8？& 
< CORSConfiguration xmlns =http://s3.amazonaws.com/doc/2006-03-01/> 
< CORSRule> 
< AllowedOrigin> *< / AllowedOrigin> 
< AllowedMethod> GET< / AllowedMethod> 
< / CORSRule> 
< / CORSConfiguration>然而，你需要的是设置你的< img> 
 
 

code>的



此外，您还可以将 crossOrigin 属性更改为anonymous检查s3上的图像是否已被公开（应该有一个被授予者 Everyone 设置为打开/下载并且您使用图像文件的属性标签中提供的链接（类似于 c c> https://s3.yourRegion.amazonaws.com/userName/Folder/file.png ）。 / p>



最后，您必须在更改存储桶的CORS设置后清除浏览器的缓存，否则浏览器不会向服务器发出新的请求，它将使用它已缓存的不安全版本。

I have a big canvas with icons and pictures that all come from my S3 bucket. When I'm trying to upload it (which runs toDataUrl) Chrome complains that

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I've encountered this error before, but my solution that time was to host all the images locally. This is not possible this time, however, so I will need to tackle this issue head on.

Googling this issue brings up a lot of stuff about CORS, which I don't understand.

I've tried the following settings in my S3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>Anonymous</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

This, however, does not work.

My intuition tells me I have to change something in the server as well, otherwise what is the purpose of this security requirement?

So what do I change, and where, so that my canvas won't be tainted anymore?

解决方案

Your CORS configuration should be good, the minimal needed being

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

What you need however, is to set your <img>'s crossOrigin attribute to "anonymous".

Also, check that the image on s3 has been made Public (there should be a grantee Everyone set to Open/Download), and that you use the link available in the Properties tab of your image file (something like https://s3.yourRegion.amazonaws.com/userName/Folder/file.png).

And finally, you have to clear the browser's cache after you changed your bucket's CORS setting, otherwise the browser won't make a new request to the server and it will use the unsafe version it has cached.

这篇关于什么我设置CORS设置和在哪里，使我的画布不会被污染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！