read image data from web page to a firefox addon insecure? - firefox

Question

I'm currently doing a plugin on firefox, which should be very simple. But since I am new on that, some problems have occured:
The purpose is to bind an item on the context menu when user clicking on an image(). I want to manipulate this image a lot(some work like visual encryption) using a canvas, and display the result in a new panel or dialog.
To bind the new item onto the menu, following code is used.
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);
},
});
My idea is to use the contextScriptFile encrypt.menu.js to inject a code into the page, and fetch the canvas data as an array, which will then be posted using self.postMessage to the addon and get processed:
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);
});
and now the problem came to my surprise: when I tried this addon on some page hosted at localhost:4000, it works. On some real web page, it shows:
menu.js:14 - SecurityError: The operation is insecure.
I know that this may be caused by a violation of some same-origin policy, but this is a content-script injected by an addon. Is it also impossible to read the image data without some help of a external server, or am I doing something totally wrong?
Thank you.

Answer 1

I've not found any solution to this approach(that being said, to inject a content to get the data from an remotely retrived image). But the net/xhr in mozilla's sdk works at the side of addon well. Alternatively I have wrote a XHR working in main.js and used it as a proxy.
At the side of addon, this XMLHttpRequest have no same-domain restrictions and can be used to retrive the binary data of the image given by a URL. The retrived data can be returned in a form of ArrayBuffer by setting xhr.responseType='arraybuffer';
The URL given to the addon's XHR is simply the src of <IMG>, which is being clicked. The browser seems to be caching the image and using XHR to retrive this image is very fast and doesn't need another request to the server.