为什么浏览器会限制画布中其他域的图像使用？

Question

  

可能重复：
  Why does my navigator tainted a canvas when an image from an other domain is used?

这是我先前问题之一的重新制定：one of my precedent questions

出于安全原因，浏览器将在使用其他域中的图像后限制画布上某些功能的使用。

这是什么安全原因？如何在画布中显示图像会带来风险？

Answer 1

我写了一篇名为Understanding the HTML5 Canvas Image Security Rules

的帖子

简短版本是，如果允许画布将本地文件绘制到自身，那么它可能会绘制本地驱动器上的文件（对您来说是私有的）或仅对您可见的私有站点（{{1} }），获取其imageData，并将该文件上传到服务器，有效地窃取图像。我们不能这样做，因此“本地文件和跨域文件破坏原始清理”规则已经到位。

如果您拥有一个网站并希望能够以交叉方式使用图像，则需要enable CORS。

Answer 2

这是一个疯狂的例子，但希望你明白这个想法：

想象一下，您有一个在线购物网站，在用户个人资料页面中，您会显示一张信用卡的漂亮图片（画布创建），上面有四张最后一张卡片，当用户点击它时，他们可以更改信用卡详细信息（数量，日期等）。没关系。

现在想象一下，无论如何，例如XSS漏洞，sql注入等等，破解者都可以更改加载画布图像的链接，指向攻击者服务器中的画布图像。

破解者发送的画布图像与原始网站相同，但末尾有不同的四个最后一个数字，并且链接显示“如果这不是您的信用卡，请点击此处进行更改”

当用户点击该链接进入破解者的网络钓鱼网页时，会转发原始的“更改卡数据详细信息”页面，但当用户输入其信用卡详细信息时，它们将保存在攻击者服务器上，然后重定向回到原始网站。