SECURITY_ERR:在 Chrome 扩展中使用 getImageData 时的 DOM 异常 18 [英] SECURITY_ERR: DOM Exception 18 on using getImageData in a Chrome Extension

问题描述

我正在编写我的第一个 Chrome 扩展程序.我正在尝试使用 jQuery 和 jQuery Image Desaturate plugin 对页面上的图像进行去饱和处理http://www.flickr.com.

I'm writing my first Chrome extension. I'm trying to use jQuery and the jQuery Image Desaturate plugin to desaturate an image on a page on http://www.flickr.com.

我正在我的 background.html 中以编程方式加载我的脚本(以及 jQuery 和插件):

I'm loading my script (and jQuery and the plugin) programatically in my 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 页面的权限:

I've specified permissions for Flickr pages in my manifest.json:

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

这似乎工作正常，例如，我可以通过将 Flickr 照片页面上的所有 div 的背景添加到 flickrnoir.js，然后打开一个 Flickr页面并点击我的扩展程序按钮:

That appears to be working fine, and I can, for example, turn the background of all divs on a Flickr photo page red by adding this to flickrnoir.js, and then opening up a Flickr page and clicking on my extension's button:

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

...所以，我成功加载了 jQuery，它可以成功访问和更改 http://*.flickr.com/* 页面的 DOM 元素.

...so, I successfully have jQuery loaded and it can successfully access and change DOM elements of a http://*.flickr.com/* page.

但是，当我尝试使用去饱和插件对图像(或实际上所有图像)去饱和时，我遇到了安全错误.我的代码:

However, when I try to use the desaturate plugin to desaturate an image (or all images, in fact) I run across a security error. My code:

$("img").desaturate();

...最终在运行这一行的 jQuery.desaturate 插件代码中结束:

...eventually ends up in the jQuery.desaturate plugin's code running this line:

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

此时，Chrome 会抛出一个安全异常:

At that point, Chrome throws a security exception:

Uncaught Error: SECURITY_ERR: DOM Exception 18

...这让我无法停下脚步.

...and this stops me in my tracks.

好的，所以我猜这是因为页面位于 www.flickr.com，而我复制到画布的图像位于 farm6.static.flickr.com?这是否违反了跨域政策?

Okay, so I'm guessing this is because the page is at www.flickr.com, whereas the image I'm copying to the canvas is at farm6.static.flickr.com? Is that violating the cross-domain policy?

我真的不熟悉 Chrome 扩展安全模型，或者 canvas 的跨域限制，或者两者如何交互，所以我可以使用你能给我的任何帮助来理解这个，但当然，我的基本问题是——我如何克服这个安全异常并使我的代码正常工作?

I'm really not familiar yet with the Chrome extension security model, or cross-domain restrictions on canvas, or how the two interact, so I could use any help you can give me in understanding this, but of course, my fundamental question is -- how do I get past this security exception and get my code working?

推荐答案

是的，这是一个安全限制.正如它在 规格:

Yep, this is a security limitation. As it says in the specs:

每当调用其 origin-clean 标志设置为 false 的画布元素的 toDataURL() 方法时，该方法必须引发 SECURITY_ERR 异常.

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

每当使用其他正确的参数调用原始清洁标志设置为 false 的画布元素的 2D 上下文的 getImageData() 方法时，该方法必须引发 SECURITY_ERR 异常.

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

每当画布元素的 2D 上下文的 measureText() 方法最终使用的字体与拥有画布元素的 Document 对象的来源不同时，该方法必须引发 SECURITY_ERR 异常.

Whenever the measureText() method of the 2D context of a canvas element ends up using a font that has an origin that is not the same as that of the Document object that owns the canvas element, the method must raise a SECURITY_ERR exception.

当我在开发类似的扩展时，我所做的是将图像 url 从内容脚本传递到背景页面，并在那里进行所有画布操作，然后将画布转换为数据 url 并将其发送回内容脚本:

When I was working on a similar extension what I did was I passed an image url from a content script to a background page and did all canvas manipulations there, then converted canvas to data url and send it back to a content script:

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

这篇关于SECURITY_ERR:在 Chrome 扩展中使用 getImageData 时的 DOM 异常 18的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！