从网页读取图像数据到Firefox安全不安全？

我目前在Firefox上做一个插件，这应该很简单。但因为我是新手，所以发生了一些问题：从网页读取图像数据到Firefox安全不安全？

目的是在用户单击图像（）时绑定上下文菜单上的项目。我想用画布很多地操作这个图像（一些像视觉加密一样的工作），并将结果显示在一个新的面板或对话框中。

要将新项目绑定到菜单上，请使用以下代码。

cm.Item({ 
    label: _("menu-label-encrypt"), 
    context: cm.SelectorContext("img"), 
    contentScriptFile: [ 
     data.url('jquery.js'), 
     data.url('encrypt.menu.js'), 
    ], 
    onMessage: function(cmd){ 
     var cryptWorker = imgcrypt(); 
     cryptWorker.key(cmd.password); 
     var ret = cryptWorker.encrypt(cmd.width, cmd.height, cmd.data); 
     console.log(ret.length); 
    }, 
});

我的想法是使用contextScriptFile encrypt.menu.js注入代码到网页中，并获取画布的数据作为一个数组，然后将使用self.postMessage的插件张贴，并得到处理：

self.on('click', function(node){ 
    var canvasID = 'cache'; 
    var img = $(node)[0]; 
    $('<canvas>', {id: canvasID}).appendTo('body').hide(); 

    var canvas = $('#' + canvasID)[0]; 
    var ctx = canvas.getContext('2d'); 
    ctx.canvas.width = img.width; 
    ctx.canvas.height = img.height; 
    ctx.drawImage(img, 0, 0, img.width, img.height); 

    var data = ctx.getImageData(0, 0, img.width, img.height).data, 
     dataAry = new Array(data.length); 

    for(var i=0; i<data.length; i++) 
     dataAry[i] = data[i]; 

    var command = { 
     'password': 'test', 
     'width': img.width, 
     'height': img.height, 
     'data': dataAry, 
    }; 

    self.postMessage(command); 
});

现在问题出乎我的意料：当我在localhost:4000托管的某个页面上尝试使用此插件时，它可以正常工作。在一些真正的网页，它显示：

menu.js:14 - SecurityError: The operation is insecure.

我知道，这可能违反了一些相同来源政策造成的，但是这是一个内容的脚本，通过一个插件注入。没有外部服务器的帮助，读取图像数据是不可能的，还是我在做一些完全错误的事情？

谢谢。

来源

2014-10-05 Lucifer Orichalcum

我还没有找到任何解决方案（这就是说，要注入一个内容从远程retrived图像获取数据）。但是mozilla的sdk中的net/xhr很适合插件。或者，我写了一个在main.js中工作的XHR，并将其用作代理。

在附件一侧，此XMLHttpRequest没有相同的域限制，可用于检索由URL给出的图像的二进制数据。通过设置xhr.responseType='arraybuffer';

可以将返回的数据以ArrayBuffer的形式返回，该插件的XHR的URL仅仅是被点击的<IMG>的src。浏览器似乎在缓存图像，并且使用XHR来检索这个图像非常快，并且不需要对服务器的另一个请求。

来源

2014-10-06 13:03:09

从网页读取图像数据到Firefox安全不安全？

回答

相关问题