Javascript 如果画布同源标志脏了，如何将图像保存到相册

我在这里面临着一个困难的局面。我正在构建一个显示推文的开放式Web应用程序。如果这些推文中的任何一条包含图像的URL，我们将显示带有图像标记的图像。我想让用户选择将此图像保存到他的相册或使用“共享web”活动共享它

所有在映像上工作的web活动都希望blob能够工作。我们不能简单地将URL传递给它。我无法从远程图像生成blob，因为只要我尝试使用drawImage画布调用将该图像blit到画布中，就会在画布上出现安全错误，因为该图像与应用程序的来源不同

这种“安全性”防止了对远程映像的各种篡改，例如将其保存到磁盘或使用web活动

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

总之，让我们总结一下：“我如何从一个img标记（其源指向一个远程位置，与开放式Web应用程序不同）到一个我可以用于Web活动的blob？”

谢谢

这不是“安全”，这是安全。我理解你的沮丧，但你想做的事情本质上是不安全的，就像让web应用程序访问本地文件一样。你能发现它有用并不重要。坏人也可以

加载图像会绕过同源策略。这意味着任何web应用程序都可以从浏览器用户当前登录的任何其他应用程序加载任何图像：电子邮件附件（包括PDF格式副本）、Facebook上的私人图库，以及任何内容。这不会导致严重的攻击，因为以这种方式“访问”图像的效果很小：您可以强制浏览器加载图像，但无法将其读回或发送回服务器。对画布的无限制访问将打破这最后一道防线：攻击者可以加载您的机密图像，将其呈现到画布并读回数据

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

这不是“安全性”，而是安全性。我理解你的沮丧，但你想做的事情本质上是不安全的，就像让web应用程序访问本地文件一样。你能发现它有用并不重要。坏人也可以

加载图像会绕过同源策略。这意味着任何web应用程序都可以从浏览器用户当前登录的任何其他应用程序加载任何图像：电子邮件附件（包括PDF格式副本）、Facebook上的私人图库，以及任何内容。这不会导致严重的攻击，因为以这种方式“访问”图像的效果很小：您可以强制浏览器加载图像，但无法将其读回或发送回服务器。对画布的无限制访问将打破这最后一道防线：攻击者可以加载您的机密图像，将其呈现到画布并读回数据

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

那么activity确实支持使用URL。样板应用程序有一个。如果你不介意你的应用程序被授予特权（这需要市场的彻底审查），你可以尝试使用。代码将类似于：

       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();

然后，“活动”不支持使用URL。样板应用程序有一个。如果你不介意你的应用程序被授予特权（这需要市场的彻底审查），你可以尝试使用。代码将类似于：

       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();

---

当您从为应用程序提供服务的同一站点交付内容时，“安全性”不会阻止访问。解决方法是将用户的图像上传到您的网站，并在相册中使用。当您从为应用程序提供服务的同一网站交付内容时，“安全”不会阻止访问。解决方法是将用户的图像上传到您的网站，并将其返回相册中使用。非常感谢！我可能会去xhr电话，该应用程序已经是特权。非常感谢Jason！我可能会使用xhr调用，该应用程序已经具有特权。我现在更了解它了。我一直认为应用程序运行在一个孤立的上下文中，所以我从来没有想过“标签”会从其他一些登录的应用程序加载内容。谢谢你的指点。我现在更明白了。我一直认为应用程序运行在一个孤立的上下文中，所以我从来没有想过“标签”会从其他一些登录的应用程序加载内容。谢谢你指出这一点。