SECURITY_ERR：DOM在Chrome擴展中使用getImageData的例外18

我正在編寫我的第一個Chrome擴展。我正在嘗試使用jQuery和jQuery Image Desaturate plugin在http://www.flickr.com的頁面上淡化圖像。SECURITY_ERR：DOM在Chrome擴展中使用getImageData的例外18

我加載我的腳本（和jQuery和插件）編程在我background.html：

// On browser action click, we load jQuery and the desaturate plugin, then 
    // call our own flickrnoir.js to desaturate the photo. 
    chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, { file: "jquery.js" }, function() { 
     chrome.tabs.executeScript(null, {file: "jQuery.desaturate.js" }, function() { 
     chrome.tabs.executeScript(null, { file: "flickrnoir.js" }); 
     }) 
    }); 
    });

我在我的manifest.json指定的Flickr頁面權限：

"permissions": [ 
    "tabs", "http://www.flickr.com/", "http://*.static.flickr.com/" 
]

這似乎工作正常，我可以，例如，將所有div的背景上的Flickr照片頁面添加到flickrnoir.js，然後打開Flickr頁面並單擊我的分機按鈕：

$("div").css("background-color", "#ff0000");

...所以，我成功地加載了jQuery，它可以成功訪問和更改http://*.flickr.com/*頁面的DOM元素。

但是，當我嘗試使用去飽和插件去飽和圖像（或所有圖像，實際上）時，我遇到安全性錯誤。我的代碼：

$("img").desaturate();

...在jQuery.desaturate插件的代碼最終結束了運行這行：

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

在這一點上，Chrome瀏覽器會引發安全異常：

Uncaught Error: SECURITY_ERR: DOM Exception 18

......這讓我停下腳步。

編輯：好的，所以我猜這是因爲頁面在www.flickr.com，而我複製到畫布的圖像是在farm6.static.flickr.com？這是否違反了跨域策略？

我真的不熟悉Chrome擴展安全模型，或者canvas的跨域限制，或者兩者如何交互，所以我可以使用任何幫助可以讓我理解這一點，但當然，我的根本問題是 - 我如何通過這個安全例外，並讓我的代碼工作？

來源

2011-04-01 Matt Gibson

是的，這是一個安全限制。因爲它說的specs：

每當一個canvas元素，其起源清潔標誌被設置爲false叫的toDataURL（）方法，該方法必須提高一個SECURITY_ERR例外。

只要將其origin-clean標誌設置爲false的canvas元素的2D上下文的getImageData（）方法以其他正確的參數調用，該方法就必須引發SECURITY_ERR異常。

每當canvas元素的2D上下文的measureText（）方法結束時，使用的字體的原點與擁有canvas元素的Document對象的原點不同，該方法必須引發SECURITY_ERR例外。

當我工作的一個類似的擴展我所做的是我通過圖像URL從內容腳本到後臺頁面，並做了所有的畫布操作那裏，然後轉換畫布傳輸數據的URL，併發送回內容腳本：

//background.html: 
function adjustImage(src, tab) { 
    var img = new Image(); 
    img.onload = function() { 
      var canvas = Pixastic.process(img); 

      chrome.tabs.sendRequest(tab.id, {cmd: "replace", data: canvas.toDataURL()}); 
    }; 
    img.src = src; 
}

來源

2011-04-01 15:33:10 serg

太棒了，只是我需要的信息。我的擴展現在正在工作並令照片愉快地變得飽滿。（我得到獨角獸！） – 2011-04-01 22:12:31

所以我也正在研究一個擴展，我想從跨域使用圖像數據採集的圖像，我發現有可能！（沒有任何時髦的背景頁消息傳遞）

@Serg，事實證明，在網頁中你不能做跨域的東西，但是，但是經過一些進一步挖掘，我發現，在Chrome瀏覽器擴展，您可以！

它的主要問題是，你所要做的就是在清單中請求跨源XMLHttpRequests的權限。

{ 
    "name": "My extension", 
    ... 
    "permissions": [ 
    "http://www.google.com/" 
    ], 
    ... 
}

欲瞭解更多信息（特別是關於如何保持安全），請閱讀this。

來源

2011-08-22 13:16:19 fotoflo

正如你在我原來的問題中看到的，我已經授予了這些權限。也許在過去的四五個月裏有什麼變化？因爲權限應該會影響圖像數據以及XMLHttpRequests似乎總是合理的...... – 2011-08-22 14:29:27

你試過了嗎？我相信我是成功的。 – fotoflo 2012-04-16 13:49:21

看起來這種方法可能適用於Chrome 13（它在我提出原始問題幾個月後發佈）以及之後的版本。從[該頁面]（http://code.google.com/chrome/extensions/xhr.html）：「版本說明：從Chrome 13開始，內容腳本可以將跨源請求發送到同一臺服務器，在Chrome 13之前，內容腳本無法直接發出請求;相反，它必須向其父擴展發送一條消息，要求擴展程序發出一個跨源請求。「我沒有時間回去然後重新嘗試我的原始代碼。 – 2012-04-17 10:57:05

SECURITY_ERR：DOM在Chrome擴展中使用getImageData的例外18

回答

相關問題