context.getImageData（）操作不安全 [英] context.getImageData() operation is insecure

问题描述

我想为HTML5 canvas实现一个简单的灰度过滤器，但我可以抓取图像数据为像素。我从FF和Chrome得到安全警告。最后，过滤器不会使图片变灰。

JS FIDLE CODE

js：

  var canvas = document.getElementById（`canvas'）; 
 var context = canvas.getContext（'2d'）; 
 
 var image = new Image（）; 
 image.onload = function（）{
 if（image.width！= canvas.width）
 canvas.width = image.width; 
 if（image.height！= canvas.height）
 canvas.height = image.height; 
 context.clearRect（0，0，canvas.width，canvas.height）; 
 context.drawImage（image，0，0，canvas.width，canvas.height）; 
 var imageData = context.getImageData（0，0，canvas.width，canvas.height）; 
 filter（imageData）; 
 context.putImageData（imageData，0，0）; 
} 
 image.src =http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300。 jpg; 
 
函数过滤器（imageData）{
 var d = imageData.data; 
 for（var i = 0; i  var r = d [i]; 
 var g = d [i + 1]; 
 var b = d [i + 2]; 
 d [i] = d [i + 1] = d [i + 2] =（r + g + b）/ 3; 
} 
 return imageData; 
} 
  

解决方案

从 W3 ：

getImageData（sx，sy，sw，sh） canvas元素的origin-clean标志设置为false，抛出 SecurityError 异常

这是为了防止恶意网站所有者将用户浏览器可访问的潜在私有图片加载到画布上，然后将数据发送到自己的服务器。如果出现以下情况，源清除可以关闭：

• 元素的2D上下文的drawImage用一个HTMLImageElement或一个HTMLVideoElement调用，它的起源与拥有canvas元素的Document对象的
  不同。





• 元素的2D上下文的fillStyle属性设置为CanvasPattern对象，该对象的是从HTMLImageElement或
  HTMLVideoElement创建的，HTMLVideoElement的原点与创建模式时拥有canvas元素的Document
  对象的原点不同。




• 元素的2D上下文的fillStyle属性设置为从HTMLCanvasElement创建的CanvasPattern对象，该对象的
  origin-clean标志在创建模式时为false。




• 元素的2D上下文的strokeStyle属性设置为从HTMLImageElement或
  创建的CanvasPattern对象，HTMLVideoElement的原点与文档的原点不同
  



• 元素的2D上下文的strokeStyle属性设置为从HTMLCanvasElement创建的CanvasPattern对象，该对象的$



• 元素的2D上下文的fillText（）或strokeText（）方法被调用并结束

$ b使用的字体原型不是与拥有canvas元素的Document对象相同的
。 $ b

来源

I want to realize a simple greyscale filter for HTML5 canvas, but I canot grab the Image data as pixels. I get security warnings from FF and Chrome. Finally the filter does not make the image grey.

JS FIDLE CODE

js:

    var canvas = document.getElementById('canvas');       
var context = canvas.getContext('2d');  

var image = new Image();
image.onload = function () {
  if (image.width != canvas.width)
    canvas.width = image.width;
  if (image.height != canvas.height)
    canvas.height = image.height;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";

function filter(imageData){
 var d = imageData.data;
   for (var i = 0; i < d.length; i += 4) {
     var r = d[i];
     var g = d[i + 1];
     var b = d[i + 2];
     d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
   }
return imageData;
}

解决方案

This is a security feature. From W3:

The getImageData(sx, sy, sw, sh) method must, if the canvas element's origin-clean flag is set to false, throw a SecurityError exception

This is to prevent malicious site owners from loading potentially private images that the user's browser has access to onto the canvas, then sending the data to their own servers. The origin-clean can be turned off if:

• The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

• The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

• The element's 2D context's fillText() or strokeText() methods are invoked and end up using a font that has an origin that is not the same as that of the Document object that owns the canvas element.

Source

这篇关于context.getImageData（）操作不安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！