从网页读取图像数据到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.
我知道,这可能违反了一些相同来源政策造成的,但是这是一个内容的脚本,通过一个插件注入。没有外部服务器的帮助,读取图像数据是不可能的,还是我在做一些完全错误的事情?
谢谢。
答
我还没有找到任何解决方案(这就是说,要注入一个内容从远程retrived图像获取数据)。但是mozilla的sdk中的net/xhr
很适合插件。或者,我写了一个在main.js
中工作的XHR,并将其用作代理。
在附件一侧,此XMLHttpRequest
没有相同的域限制,可用于检索由URL给出的图像的二进制数据。通过设置xhr.responseType='arraybuffer';
可以将返回的数据以ArrayBuffer
的形式返回,该插件的XHR的URL仅仅是被点击的<IMG>
的src。浏览器似乎在缓存图像,并且使用XHR来检索这个图像非常快,并且不需要对服务器的另一个请求。