¿El modelo de seguridad de lienzo ignora los encabezados de control de acceso-permitir-origen?

Question

Parece que incluso si configura el encabezado access-control-allow-origin para permitir el acceso de mydomain.org a una imagen alojada en el dominio example.org, el lienzo 'origin-clean flag se establece en falso e intenta manipular los datos de píxeles de esa imagen provocará una excepción de seguridad.

¿No debería 'obedecer' el encabezado de control de acceso-permitir-origen y permitir el acceso a los datos de la imagen sin lanzar una excepción?

Answer 1

El encabezado access-control-allow-origin solo funciona para dominios cruzados XmlHttpRequest. La etiqueta <canvas> NO respeta ese atributo y, por lo tanto, lo que está intentando no funcionará.

Ver http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

La única opción es proxy de la imagen a través de su propio servidor.

Answer 2

A menos que estoy leyendo completamente equivocada, la especificación parece sugerir que se trabajo con tela - consulte la sección "No contaminar el elemento canvas" en los casos de uso:

http://www.w3.org/TR/cors/#use-cases

Habla específicamente de dibujar imágenes remotas servidas con el encabezado access-control-allow-origin en un lienzo y luego llamar aDataURL() en el lienzo.

Quizás los navegadores aún no se han puesto al día con esto, pero así es como leo las especificaciones, al menos.

Answer 3

En realidad, canvas HACE honor a "access-control-allow-origin" si la imagen tiene el atributo "crossOrigin" con el valor "anonymous".

funciona bastante bien en un ejemplo fija: http://jsfiddle.net/WLTqG/29/

var ctx = document.getElementById('c').getContext('2d'), 
    img = new Image(); 
img.crossOrigin = 'anonymous'; 
img.src = 'https://lh3.googleusercontent.com/-LAFgeyNL894/AAAAAAAAAAI/AAAAAAAAAAA/-CWBGs9xLXI/s96-c/photo.jpg'; 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    try { 
     var imgData = ctx.getImageData(0, 0, 100, 100); 
     $('.button').on('click', function(e) { 
      e.preventDefault(); 
      applyFilter(ctx, imgData); 
     }); 
    } catch(err) { 
     $('.button').hide(); 
     $('body').append("Access denied"); 
     console.log(err); 
    } 
}; 
function applyFilter(ctx, data) { 
    for (var x = 0; x < data.width; x++) { 
     for (var y = 0; y < data.height; y++) { 
      var index = 4 * (y * data.width + x); 
      data.data[index] = data.data[index] - 50; //r 
      data.data[index+1] = data.data[index+1] - 50; //g 
      data.data[index+2] = data.data[index+2] - 50; //b 
      data.data[index+3] = data.data[index+2] - 50; //a 
     } 
    } 
    ctx.putImageData(data, 0, 0); 
} 

(he usado jQuery sólo para DOM-manipulación y eventos de tramitación)