SECURITY_ERR: Chrome एक्सटेंशन में getImageData का उपयोग करने पर DOM अपवाद 18

Question

मैं अपना पहला क्रोम एक्सटेंशन लिख रहा हूं। मैं http://www.flickr.com पर किसी पृष्ठ पर एक छवि को विलुप्त करने के लिए jQuery और jQuery Image Desaturate plugin का उपयोग करने का प्रयास कर रहा हूं।

मैं प्रोग्राम के मेरी background.html में मेरी स्क्रिप्ट (और jQuery और प्लगइन) लोड हो रहा है कर रहा हूँ:

// 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 में फ़्लिकर पृष्ठों के लिए अनुमतियों को निर्दिष्ट किया है:

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

ऐसा लगता है कि यह ठीक काम कर रहा है, और उदाहरण के लिए, मैं flickrnoir.js पर इसे जोड़कर फ्लिकर फोटो पेज पर सभी divs की पृष्ठभूमि को चालू कर सकता हूं, और उसके बाद फ़्लिकर पेज खोल रहा हूं और अपने एक्सटेंशन के बटन पर क्लिक कर सकता हूं:

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

... इसलिए, मैंने सफलतापूर्वक jQuery लोड किया है और यह http://*.flickr.com/* पृष्ठ के DOM तत्वों को सफलतापूर्वक एक्सेस और परिवर्तित कर सकता है।

हालांकि, जब मैं किसी छवि को असंतृप्त करने के लिए असंतृप्त प्लगइन का उपयोग करने का प्रयास करता हूं (या वास्तव में सभी छवियां) मैं सुरक्षा त्रुटि में चला जाता हूं। मेरे कोड:

$("img").desaturate(); 

... अंत में इस लाइन चल jQuery.desaturate प्लगइन के कोड में समाप्त होता है:

Uncaught Error: SECURITY_ERR: DOM Exception 18 

:

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

उस समय, क्रोम एक सुरक्षा अपवाद फेंकता

... और यह मुझे मेरे ट्रैक में बंद कर देता है।

संपादित करें: ठीक है, तो मुझे लगता है कि यह पृष्ठ www.flickr.com पर है, जबकि छवि मैं कैनवास में कॉपी कर रहा हूं farm6.static.flickr.com पर है? क्या यह क्रॉस-डोमेन नीति का उल्लंघन कर रहा है?

मैं वास्तव में क्रोम एक्सटेंशन सुरक्षा मॉडल, या canvas पर क्रॉस-डोमेन प्रतिबंधों के साथ परिचित नहीं हूं, या दोनों कैसे इंटरैक्ट करते हैं, इसलिए मैं इसे समझने में आपको जो भी सहायता दे सकता हूं, लेकिन निश्चित रूप से, मेरा मूल प्रश्न यह है कि - मैं इस सुरक्षा अपवाद को कैसे प्राप्त करूं और अपना कोड काम कर रहा हूं?

Answer 1

हाँ, यह एक सुरक्षा सीमा है। यह specs में कहते हैं:

जब भी कोई कैनवास तत्व जिसका मूल-साफ ध्वज गलत पर सेट है कहा जाता है की विधि toDataURL(), विधि एक SECURITY_ERR अपवाद उठाना चाहिए।

जब भी कैनवास तत्व के 2 डी संदर्भ की getImageData() विधि जिसका मूल-साफ़ ध्वज गलत पर सेट होता है उसे अन्यथा सही तर्क के साथ बुलाया जाता है, तो विधि को सुरक्षा_ईआरआर अपवाद उठाना चाहिए।

जब भी कैनवास तत्व के 2 डी संदर्भ की माप टेक्स्ट() विधि एक फ़ॉन्ट का उपयोग करके समाप्त होती है जिसमें उत्पत्ति है जो कैनवास तत्व के दस्तावेज़ दस्तावेज़ के समान नहीं है, तो विधि को सुरक्षा_ईआरआर अपवाद।

जब मैं एक ऐसी ही विस्तार क्या मैंने किया था मैं एक पृष्ठभूमि पृष्ठ के लिए एक सामग्री स्क्रिप्ट से एक छवि यूआरएल पारित कर दिया है और वहाँ सभी कैनवास जोड़तोड़ किया पर काम कर रहा था, तो डेटा यूआरएल को कैनवास बदला जाएगा और करने के लिए वापस भेज सामग्री स्क्रिप्ट:

//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; 
} 

Answer 2

तो मैं भी एक विस्तार है, जहां मैं क्रॉस-डोमेन से छवि डेटा का प्रयोग करना चाहता था पर काम कर रहा था छवियों का अधिग्रहण किया और मैंने पाया कि आईटी संभव है! (किसी भी फैशनेबल पृष्ठभूमि पृष्ठ संदेश गुजर बिना)

@Serg, यह पता चला है के रूप में, वेब पेज में क्रॉस-डोमेन सामान नहीं कर सकते, फिर भी, कुछ और लेकिन खुदाई के बाद, मैंने पाया कि क्रोम एक्सटेंशन में , आप ऐसा कर सकते हैं!

इसका जस्ता है, आपको बस अपने मैनिफेस्ट में क्रॉस-ओरिजिन एक्सएमएलएचटीपीआरक्वेट्स के लिए अनुरोध अनुमतियां हैं।

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

अधिक जानकारी के लिए (विशेष रूप से सुरक्षित कैसे रहें) this पढ़ें।