为什么在使用HTML画布的图像上使用CORS？

Question

最近,我花了一些时间研究解决Web开发中一个相当常见的问题的解决方案 - 我在透明背景上处理中间对齐的徽标,但是必须在它们下面放置文本,然后它看起来好像是文本和图像之间的空白在页面之间移动.经过一些研究,我发现我可以使用画布重新对齐左下图像,并且解决方案工作得很漂亮......至少在我将解决方案集成到我们的代码库中之前发现它失败了:

"无法从画布获取图像数据,因为画布已被跨源数据污染." (说什么!？)

调查一下,违规代码位于以下函数的第一行:

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标头access-control-allow-origin:"*",或允许开发人员将图像的crossDomain属性设置为"anonymous"/"use-credentials".这一切都很好,花花公子,除非你在一家大公司的前端工作,说服服务器领主改变与安全相关的任何事情是一个非首发性的对话.

所以,我的问题是,在画布上的图像中出现这种安全错误背后的逻辑是什么？他们是大声哭泣的图像!可以下载它们,热链接到它们,在内存中使用它们,但"哦不!" 不要以任何方式操纵它们,否则CORS会抛出错误!

如果你问我,图像没有被污染,那就是这个头发的CORS标准.有人可以解释为什么会发生这种情况的逻辑吗？如何使用画布操作图像可能是一个安全问题？

Answer 1

这可以防止用户在未经许可的情况下使用图像从远程网站提取信息而暴露私人数据。

来源：MDN