为什么我不能强制下载受污染的画布,为什么会出现安全问题?

时间:2016-04-27 11:28:10

标签: javascript security html5-canvas

为什么我不能强制下载受污染的画布,为什么会出现安全问题?

举个例子:在example.com(我的域名)上,我可以下载一个JSON文件并阅读它。

我可以从example.org(别人的域名)加载带有src的图像。我可以将该图像绘制到画布上(此时它会被污染),我仍然可以在画布上绘制。

我的页面的访问者可以右键单击该画布并将图像另存为。

污点只是为了阻止图像数据进入JavaScript吗?

为什么数据(JSON)没问题,图像不正常?

在JavaScript中,我可以通过转换为数据URL,制作链接元素并使JavaScript单击来自动开始下载画布。

如果没有"安全问题"有没有办法实现相同的结果,我想自动下载画布,就像用户右键单击"将图像保存为"我不需要JavaScript中的图像数据。因为它只是在画布上绘制了一个图表,该图片已被另一个域的基本图像污染。

2 个答案:

答案 0 :(得分:1)

它仅与安全相关(与版权无关)。我们可以从 this article 看到跨源限制的主要目的是:

  

这种机制的主要目的是使其成为可能   很大程度上无限制的脚本和页面之间的其他交互   作为同一网站的一部分(理解为具有特定的网站)   DNS主机名或其中的一部分,虽然几乎完全阻止   不相关的网站之间的任何干扰。

还有几段(我强调):

  

理论上,该模型看起来简单而强大,足以确保正确   在不相关的页面之间分离,并作为一种方法   沙箱可能不受信任或特定内容中的风险内容   域名 [...]

该文章没有特别提及画布,但是对于画布,它与例如抓取当前显示在标签(不同来源)中的内容有关,并将其发送回恶意第三方,然后可以看到内容(例如像银行对账单,一些账户信息和排序 - 在理论上无论如何)。

MDN 以这种方式概括了这种类型的攻击:

  

这可以防止用户使用图像暴露私有数据   未经许可从远程网站获取信息。

但对于不存在风险的不同源服务器,它们可能允许跨源使用,这就是为什么在某些情况下我们可以请求将属性/属性crossOrigin = "anonymous"添加到图像标记/元素。

我们可以在任何一种情况下显示并做一些事情,比如在画布中转换为图像,即使它被污染了,但如果被污染,我们就不能任何数据或使用{{1}从中读取像素信息},getImageData()toDataURL()

避免限制

要避免来自其他网站的此限制,您必须设置一个页面代理,它将代表您的页面执行图像请求,然后无限制地将其提供给您的页面。这当然会增加带宽和加载时间。

另一种方法是将图像上传到您自己的服务器或服务器设置,以允许跨源使用。在这种情况下,您将无法将其用作安全攻击面,但您可以自行成为侵权违规的目标,具体取决于公平使用,许可等(与CORS本身无关)。

可以找到CORS规范 here

答案 1 :(得分:0)

跨域图片会导致安全违规 - 这就是原因......

我不知道CORS限制是否也考虑到了版权图像的保护,但这些其他域图像可能受版权保护,因此您可以将它们用作" base"对于您新保存的图像是直接的安全违规 - 它可能是偷窃。浏览器无法读取版权声明,因此必须对所有跨域图像进行污点处理。

除了直接盗窃问题,恶意代码可以俯视你的肩膀并将你的银行帐户图像复制到画布上并将该画布图像导出到自己身上。这是间接的安全违规行为。

所以你必须遵守安全要求 - 以下是......

  • 最简单的方法:将这些图片托管在与您网页相同的域中。

  • 您可以向example.com询问configure their server,以允许匿名访问其内容。

  • 您可以在已提供对其托管图像进行匿名访问的公共主机上托管您的图像。 Dropbox.comCloudinary.comImgur.com是许多允许匿名访问特定文件夹的图片主机。

  • 如果您的用户使用现代浏览器,您可以使用FileReader让用户从example.com中选择要下载的图像。通过使用户明确选择特定图像,可以满足安全限制,然后您可以成功导出图像。

  • 还有一些其他解决方案涉及通过您的网络域从example.com管道传输图像。这些解决方案具有服务器安全性和服务器资源问题应该避免。