为什么我不能强制下载受污染的画布，为什么这是一个安全问题？ [英] Why can't I force download of tainted canvas and why is it a security issue?
问题描述
为什么我不能强制下载受污染的画布，为什么这是一个安全问题？
Why can't I force download of tainted canvas and why is it a security issue?
采取这个示例情况：在example.com（我的域名）我可以下载一个JSON文件并阅读它。
Take this example situation: On example.com (my domain) I can download a JSON file and read it.
我可以从example.org（别人的域）加载带有src的图像。我可以将该图像绘制到画布上（此时它会变得有污点），我仍然可以在画布上绘制。
I can load an image with a src from example.org (someone else's domain). I can draw that image to a canvas(at which point it becomes tainted), and I can still draw on top of that canvas.
我页面的访问者可以正确单击该画布并将图像保存为。
A visitor to my page can right click on that canvas and save image as.
污点是否只是为了阻止图像数据进入JavaScript？
Is the taint just to stop the image data getting into the JavaScript?
为什么数据（JSON）和图像不正常？
Why is it OK for data (JSON) and not OK for images?
在JavaScript中我可以通过转换为数据URL自动开始下载画布，制作链接元素并使JavaScript单击它。
In JavaScript I can automatically start a download of a canvas by converting to data URL, making a link element and making the JavaScript click it.
有没有办法在没有安全问题的情况下实现相同的结果，我想自动下载画布就像用户右键单击将图像另存为一样，我不需要JavaScript中的图像数据。因为它只是在画布顶部绘制了一个图表，该图片已被另一个域的基本图像污染。
Is there a way to achieve the same result without a "security issue", I want to automatically download the canvas just like if the user had right click "save image as" I don't need the image data in the JavaScript. As it just draws a diagram on top of a canvas that has been tainted by a base image from another domain.
推荐答案
它仅与安全相关（与版权无关）。我们可以从 这篇文章中看到跨源限制的主要意图是：
It is solely related to security (and is not related to copyright). We can see from this article that the main intent of cross-origin restriction is:
此机制的主要目的是使$ b $成为可能b很大程度上无限制的脚本和页面之间的其他交互
作为同一站点的一部分（理解为具有特定的
DNS主机名，或其中的一部分），同时几乎完全阻止
任何干扰不相关的网站之间。
The principal intent for this mechanism is to make it possible for largely unrestrained scripting and other interactions between pages served as a part of the same site (understood as having a particular DNS host name, or part thereof), whilst almost completely preventing any interference between unrelated sites.
还有几段（我的重点）：
And a few paragraphs down (my emphasis):
从理论上讲，该模型看起来简单而且足够强大，可以确保不相关页面之间正确的
分隔，并作为
沙箱可能不受信任或有风险的内容的方法在特定的
域内 [...]
In theory, the model seems simple and robust enough to ensure proper separation between unrelated pages, and serve as a method for sandboxing potentially untrusted or risky content within a particular domain [...]
这篇文章没有特别提到画布，但是对于画布来说，它与例如抓取当前显示在标签（不同来源）中的内容有关，并将其发送回恶意第三方，然后可以看内容（例如诸如银行对账单，一些账户信息和排序 - 在理论上无论如何）。
The article doesn't mention canvas in particular but for canvas it has to do with for example grabbing content currently displayed in a tab (different origin) and send it back to a malicious third party which then can see the content (e.g. things like bank statements, some account information and the sort - in theory anyways).
MDN 以这种方式概括了这种类型的攻击：
MDN generalizes this type of attacks this way:
这可以保护用户免于使用图像
公开私有数据，以便在未经许可的情况下从远程网站提取信息。
This protects users from having private data exposed by using images to pull information from remote web sites without permission.
但对于不存在风险的不同原始服务器，它们可能允许跨源使用，这就是为什么在某些情况下我们可以请求添加属性/属性 crossOrigin =anonymous 到图片标签/元素。
But for different origin server where this poses no risk they may allow cross-origin use which is why in some cases we can request this adding the attribute/property crossOrigin = "anonymous" to the image tag/element.
我们可以在任何一种情况下显示并做一些事情，比如转换到画布中的图像，即使它被污染了，但如果被污染，我们不能拉任何数据或使用 getImageData（）， toDataURL（）或 toBlob（）。
We can in either case display and do things like transformations to images in canvas even if it is tainted, but if tainted we cannot pull any data or read pixel information from it using getImageData(), toDataURL() or toBlob().
要避免来自其他网站的此限制，您必须设置一个页面代理，它将代表您的网页执行图片请求，然后无限制地将其提供给您的网页。这当然会增加带宽和加载时间。
To avoid this restriction from other sites you would have to set up a page proxy which would do the image request on your page's behalf, then serve it to your page without any restriction. This of course adds to bandwidth as well as load-time.
另一种方法是将图像上传到您自己的服务器或服务器设置以允许交叉原产地使用。在这种情况下，您将无法将其用作安全攻击面，但您可以自行成为侵权违规的目标，具体取决于公平使用，许可等（与CORS本身无关）。
The other way is to simply upload the image to your own server or to a server setup to allow cross-origin use. In this case you would not be able to use it as a security attack surface, but you could yourself be targeted for infringement violation depending on Fair-Use, license and such (otherwise unrelated to CORS itself).
可以找到CORS规范 此处 。
The CORS specification can be found here.
这篇关于为什么我不能强制下载受污染的画布，为什么这是一个安全问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
