我应该在哪里设置 CORS 设置，这样我的画布才不会被污染？

Posted 2023-03-04

【中文标题】我应该在哪里设置 CORS 设置，这样我的画布才不会被污染？

【英文标题】：What do I set CORS settings to and where so that my canvas doesn't get tainted?

【发布时间】：2016-05-02 08:10:07

【问题描述】：

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

无法在“htmlCanvasElement”上执行“toDataURL”：受污染的画布 可能无法导出。

我之前遇到过这个错误，但我当时的解决方案是在本地托管所有图像。但是，这一次是不可能的，所以我需要正面解决这个问题。

谷歌搜索这个问题带来了很多关于 CORS 的东西，我不明白。

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

<?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>

但是，这不起作用。

我的直觉告诉我，我也必须更改服务器中的某些内容，否则这个安全要求的目的是什么？

那么我要改变什么，在哪里，这样我的画布就不会再被污染了？

【参考方案1】：

您的 CORS 配置应该是好的，最低要求是

<?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>

但是，您需要将<img> 的crossOrigin attribute 设置为"anonymous"。

另外，检查 s3 上的图像是否已公开（应该有一个被授予者 Everyone 设置为 Open/Download），并且您使用了图像文件的 Properties 选项卡中可用的链接（一些比如https://s3.yourRegion.amazonaws.com/userName/Folder/file.png)。

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

【讨论】：

哦。我有很多这样的：var background = document.getElementById('background') 有各种变量名。为这些设置 crossorigin 的语法是什么？

@Yeats 你必须设置<img> 标签的crossOrigin 属性，或者它的DOM 对象的.crossOrigin 属性之前 加载图像，否则，浏览器不会请求获取来源安全的资源，并且图像会污染画布。

"来自 's3-eu-west-1.amazonaws.com' 的图像已被跨域资源共享策略阻止加载：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。来源 ' localhost:3000' 因此不允许访问。"

你确定你得到了正确的链接并且图片已经被公开了吗？

非常确定。我已经使用这些图片很长时间了。