为什么我不能强制下载受污染的画布，为什么这是一个安全问题

Why can't I force download of tainted canvas and why is it a security issue?

本文关键字：为什么 问题 安全 一个 不能 下载 污染      更新时间：2023-09-26

为什么我不能强制下载受污染的画布，为什么这是一个安全问题？

以以下示例为例：在 example.com（我的域示例）上，我可以下载一个 JSON 文件并读取它。

我可以从 example.org 加载带有 src 的图像（其他人的域示例）。我可以将该图像绘制到画布上（此时它会被污染），并且我仍然可以在该画布上绘制。

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

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

为什么数据 （JSON） 可以，而图像不合适？

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

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

它仅与安全性相关（与版权无关）。从这篇文章中我们可以看出，跨源限制的主要意图是：

该机制的主要意图是使页面之间的脚本和其他交互在很大程度上不受限制作为同一网站的一部分（理解为具有特定的DNS 主机名或其部分），同时几乎完全阻止不相关站点之间的任何干扰。

下面几段（我的强调）：

从理论上讲，该模型似乎足够简单和健壮，以确保适当的在不相关的页面之间分离，并用作对特定内容中可能不受信任或有风险的内容进行沙盒处理域 [...]

这篇文章没有特别提到画布，但对于画布，它与例如抓取当前显示在选项卡（不同来源）中的内容并将其发送回恶意第三方有关，然后第三方可以看到内容（例如银行对账单、一些帐户信息和排序 - 理论上无论如何）。

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

这可以防止用户使用图像公开私人数据未经许可从远程网站提取信息。

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

无论哪种情况，我们都可以显示和执行诸如在画布中转换为图像之类的操作，即使它被污染，但如果被污染，我们就无法使用getImageData()，toDataURL()或toBlob()从中提取任何数据或读取像素信息。

避免限制

为了避免其他网站的这种限制，您必须设置一个页面代理，该代理将代表您的页面执行图像请求，然后将其提供给您的页面而没有任何限制。这当然会增加带宽和加载时间。

另一种方法是简单地将图像上传到您自己的服务器或服务器设置以允许跨源使用。在这种情况下，您将无法将其用作安全攻击面，但根据合理使用、许可等（否则与 CORS 本身无关），您自己可能会成为侵权违规的目标。

可在此处找到 CORS 规范。

跨源图像会导致安全违规 - 原因如下...

我不知道CORS限制是否也考虑了对版权图像的保护，但这些其他域图像可能受版权保护，因此允许您将它们用作新保存图像的"基础"是直接的安全违规 - 它可能是窃取。浏览器无法读取版权声明，因此必须污染所有跨域图像的画布。

撇开直接盗窃问题不谈，恶意代码可能会越过您的肩膀，将您的银行帐户图像复制到画布上，然后将该画布图像导出给自己。这是一种间接的安全违规行为。

因此，您必须遵守安全要求 - 方法如下...

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

  • 您可以要求 example.com 配置其服务器以允许匿名访问其内容。

    • 您可以将映像托管

  • 在已提供对其托管映像的匿名访问的公共主机上。 Dropbox.com、Cloudinary.com 和 Imgur.com 是允许匿名访问特定文件夹的众多映像主机之一。

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

  • 还有其他一些解决方案涉及通过您的 Web 域从 example.com 管道传输图像。这些解决方案存在服务器安全和服务器资源问题，应避免使用。

相关文章：