使用canvas.toDataURL有哪些安全问题？

Question

canvas.toDataURL通常会生成哪些安全线程？我们必须采取哪些措施才能安全无线地访问我们的网站？

在以下链接中有关于安全性错误的讨论，如果图像未在本地托管，则.toDataURL会引发，但为什么会这样？

canvas.toDataURL() causing a security error Capture HTML Canvas as gif/jpg/png/pdf?

Answer 1

您可能知道同源政策。从本质上讲，它是浏览器使用的一种安全机制，用于确保只允许来自用户访问的同一站点的脚本无限制地运行并访问DOM。

您可以将脚本伪装成图像，例如，您可以在脚本中将每组4个字符存储在一个像素中（每个通道一个字节），然后读取该图像的像素以重建脚本。

这也是同源策略也适用于图像的原因：如果您将图像从不同的域绘制到网页上的画布中，那么如果您绘制了横幅，则可以使用画布进行限制。将图像放入其中。例如，您无法检查其像素。

现在假设您可以使用canvas.toDataURL（）从跨源画布生成数据URL。虽然您的浏览器知道您的画布包含跨源内容，但数据URL只是：URL。因此，没有确定的方法可以知道它是以某种方式来自不同的域，它可能被用来绕过整个同源的东西。例如，您可以创建一个新的img并使用数据URL作为其src。