如果画布相同原点标记脏了，如何将图像保存到相册

Question

我在这里面临着困难的处境。 我正在构建一个显示推文的Open Web App。 如果这些推文中的任何一条包含图片的URL，我们将显示带有图片标签的图片。 我想为用户提供将该图像保存到他的相册或使用共享网络活动共享的选项。

在图像上进行的所有Web活动都希望Blob起作用。 我们不能简单地将URL传递给它。 我无法从远程图像构建Blob，因为一旦尝试使用drawImage canvas调用将该图像映射到画布中，由于图像与应用程序的来源不同，我在画布上收到安全错误。

这种“安全性”可以防止各种类型的摆弄远程映像，例如将其保存到磁盘或使用Web活动。

我了解这是规范的一部分，但我并不真正了解目的。 毕竟它只是图像，如果我编写远程图像的保存脚本，则有机会知道我在做什么，但是我又不是决定该规范的w3c小组的成员，而那些人则聪明得多比我好，所以我可能正在监督一些事情...

无论如何，让我们总结一下：“如何将img标记的源指向与Open Web App不同的远程位置，然后将其指向可用于Web活动的Blob？”

谢谢

Answer 1

然后， 共享活动确实支持使用URL。 Boilerplate应用程序具有此示例 。 如果您不介意您的应用程序具有特权（需要市场进行全面审查），则可以尝试使用systemXHR 。 该代码将类似于：

       var xhr = new XMLHttpRequest({
            mozSystem: true
        });
        xhr.open("GET", "url to image", true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            //sample activity - use any activity that requires blob
            var activity = new MozActivity({
            name: "open",
            data: {
                type: "image/png",
                blob: this.response,
            },
            });
        };
        xhr.onerror = function () {
            alert("Error with System XHR");
        };
        xhr.send();

Answer 2

这不是“安全性”，这是安全性 。 我理解您的无奈，但是您想要做的事情本质上是不安全的，就像让Web应用程序访问本地文件一样。 您可以发现它有用无所谓。 坏家伙也可以。

加载图像会绕过相同的原始策略 。 这意味着，任何Web应用程序都可以从浏览器用户当前登录的任何其他应用程序中加载任何图像：电子邮件附件（包括PDF格式的副本），Facebook上的私人画廊，甚至所有内容。 这不会导致严重的攻击，只是因为以这种方式“访问”图像几乎没有：您可以强制浏览器加载图像，但是不能将其读回或发送回服务器。 对画布的无限制访问将打破最后一道防线：攻击者可以加载您的机密图像，将其渲染到画布上并读取数据。

这与iframe安全性的工作原理非常相似：由于任何Web应用程序都可以将其他任何应用程序加载到iframe中，因此无法从外部访问跨源iframe，因此您无法从中读取任何数据。