为什么使用 HTML Canvas 对图像进行 CORS? [英] Why CORS on Images with HTML Canvas?

问题描述

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

Recently, I spent a bit of time researching a solution to a rather common problem in web development- I was dealing with logos middle-aligned on a transparent background, but having to place text below them, it would then appear as though the amount of whitespace between the text and the image shifts from page to page. After a bit of research, I discovered I could re-align the images bottom-left using a canvas, and the solution worked beautifully... at least until I integrated the solution into our code-base and discovered it was failing with:

无法从画布获取图像数据，因为画布已被跨域数据污染."(说什么！?)

"Unable to get image data from canvas because the canvas has been tainted by cross-origin data." (Say what!?)

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

Looking into it, the offending code was located at the first line of the following function:

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".这一切都很好而且很花哨，除非你在一家大公司的前端工作，在这种情况下，说服服务器领主改变与安全相关的任何事情都不是一蹴而就的.

Now, I understand perfectly well what the CORS standard is, and I know the solution to this problem. The server needs to support CORS first. Either the server can set the http header access-control-allow-origin: "*", or allow a developer to set the crossDomain attribute for the image to "anonymous"/"use-credentials". This is all fine and dandy except when you work on the front-end for a big company where convincing the server-lords to change anything related to security is a non-starter conversation.

所以，真的，我的问题是在画布上的图像发生此安全错误背后的逻辑是什么?他们是他妈的大声哭出来的图像！可以下载它们，热链接到它们，在内存中使用它们，但是哦，不！"不要以任何方式操作它们，否则 CORS 会抛出错误！

So really, my question here is what IS the logic behind having this security error occur with images on a canvas? They are frickin' images for crying out loud! It is fine to download them, hot-link to them, use them in memory, but "oh no!" don't manipulate them in any way whatsoever, or CORS throws an error!

如果你问我，图像没有被污染，这是这个毛脑筋的 CORS 标准.有人可以解释为什么会发生这种情况的逻辑吗?使用画布来操作图像怎么可能是一个安全问题?

If you ask me, the image is not tainted, it's this hairbrained CORS standard that is. Can somebody please explain the logic for why this happens? How could using a canvas to manipulate an image possibly be a security concern?

推荐答案

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

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

来源:MDN

这篇关于为什么使用 HTML Canvas 对图像进行 CORS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！