javascript - 为什么使用 HTML Canvas 对图像进行 CORS？

Question

最近，我花了一些时间研究 Web 开发中一个相当普遍的问题的解决方案 - 我正在处理在透明背景上居中对齐的 Logo ，但必须在它们下方放置文本，这样看起来就好像文本和图像之间的空白量从一页转移到另一页。经过一些研究，我发现我可以使用 Canvas 将图像重新对齐到左下角，并且该解决方案运行良好......至少在我将该解决方案集成到我们的代码库中并发现它失败之前:

“无法从 Canvas 获取图像数据，因为 Canvas 已被跨源数据污染。” (说什么!？)

查看它，有问题的代码位于以下函数的第一行:

getColumn: function (context, x, y, imageHeight) {
    var arr = context.getImageData(x, y, 1, imageHeight).data; //<-- CORS HATES THIS!
    return pvt.normalizeRGBArray(arr)
}

现在，我很清楚什么是 CORS 标准，也知道解决这个问题的方法。服务器需要先支持CORS。服务器可以设置 http header access-control-allow-origin:“*”，或者允许开发人员将图像的 crossDomain 属性设置为“anonymous”/“use-credentials”。这一切都很好而且花花公子，除非您在一家大公司从事前端工作，在这种情况下，说服服务器领主更改与安全相关的任何内容是不可能的。

真的，我的问题是 Canvas 上的图像发生此安全错误背后的逻辑是什么？他们是大声哭泣的该死的图像!可以下载它们，热链接到它们，在内存中使用它们，但是“哦，不!”不要以任何方式操纵它们，否则 CORS 会抛出错误!

如果你问我，图像没有被污染，就是这个愚蠢的 CORS 标准。有人可以解释为什么会发生这种情况的逻辑吗？使用 Canvas 操纵图像怎么可能成为安全问题？

Answer 1

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

来源:MDN