javascript - 在多个子域上对图像数据进行内联编码

Question

我试图用图像中包含的 base64 编码数据替换网页中的所有 img 标签。

图像表示为:

<img src="http://a.example.com" />

将更改为:

<img src="data:image/png;base64,iVBORw0KGg..." />

该网页包含来自多个子域的图像，例如

<img src="http://a.example.com" />
<img src="http://b.example.com" />

在单个子域上我可以使用:

var images = document.getElementsByTagName('img');
for(var i=0; i<images.length; i++){
 var img = new Image();
 img.src = images[i].src;
 // Create canvas tag to represent img
 var canvas = document.createElement("canvas"); 
 canvas.width = img.width; 
 canvas.height = img.height;
 var context = canvas.getContext("2d");
 context.drawImage(img,0,0);

 img.src = canvas.toDataURL("image/png");
 $(images[i]).replaceWith(img);
}

但是，当图像位于 HTML 页面以外的子域中时，我得到:

Uncaught Error: SECURITY_ERR: DOM Exception 18

在控制台中。我如何在页面上执行此操作以将所有图像引用及其各自的编码数据转换？

Answer 1

您违反了规范的法律，该规范规定如果您将 drawImage 用于与 Canvas 文档来源不同的图像，则 orgin-clean 标志设置为 false。从那时起，您将不允许使用 toDataURL。规范对此事的完整描述是 here.

这种安全性的原因是为了防止称为信息泄漏的事情。要了解为什么这是不好的，请考虑以下假设情况:

假设您在工作网络上，因此您可以从浏览器访问内部私有(private)公司网站和您的(私有(private)!)硬盘。私有(private)站点可能类似于 www.internal.myCompany.com，您的硬盘驱动器可以从 file:///C:/SomeOfMyPhotos/ 等 url 访问。

现在假设您访问了一个带有隐藏 Canvas 的网站，并且当您浏览该网站时，该 Canvas 不断调用 drawImage() 到该 Canvas 上，其中包含它猜测可能存在的 url。这些 url 类似于私有(private)子域上的图像:

www.internal.myCompany.com/secret/secret-plans.jpg

或者你硬盘上的一张图片:

file:///C:/SomeOfMyPhotos/thatEmbarassingPhoto.png

恶意站点会不断尝试对您保密的 URL 的不同组合，直到它找到一个实际上是文件的组合。然后它将它绘制到 Canvas 上。然后它将从 Canvas 中获取 imageData 并将其发送到服务器。

瞧!他们窃取了您的 secret 计划和令人尴尬的照片，而且大部分情况都没有经过您的同意。

现在我们知道上述情况不太可能发生:毕竟， secret 计划几乎都是 PNG 格式，而尴尬的照片几乎都是 JPG 格式。但显然上述情况可能会发生，因此安全隐患必须考虑到这一点。