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

问题描述

我在写第一个Chrome扩充功能。我试图使用jQuery和 jQuery Image Desaturate插件来在 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.

我正在加载我的脚本（和jQuery和插件）在我的background.html中编程：

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/"
]

$ b b

这看起来工作正常，我可以，例如，通过添加到 flickrnoir.js 将Flickr照片页面上的所有div的背景变成红色。 ，然后打开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，它可以成功访问和更改DOM元素 http：//*.flickr.com/* 页面。

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

但是，当我尝试使用desaturate插件去饱和一个图像（或所有的图像，事实上）我遇到了安全错误。我的代码：

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的canvas元素的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的canvas元素的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.

无论何时当canvas元素的2D上下文的measureText（）方法使用一个字体，不同于拥有canvas元素的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屋！