從網頁讀取圖像數據到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安全不安全？

回答

相關問題