Il modello di sicurezza del canvas ignora le intestazioni di controllo dell'accesso-autorizzazione-autorizzazione?

Question

Sembra che anche se si imposta l'intestazione access-control-allow-origin per consentire l'accesso da mydomain.org a un'immagine ospitata sul dominio example.org, il flag 'origin-clean' dell'area canvas viene impostato su false e si tenta di manipolare i dati dei pixel di questa immagine attiverà un'eccezione di sicurezza.

Non si deve eseguire il comando canvas 'obbedire all'intestazione access-control-allow-origin e consentire l'accesso ai dati dell'immagine senza generare un'eccezione?

Answer 1

L'intestazione access-control-allow-origin funziona solo per il dominio incrociato XmlHttpRequest. Il tag <canvas> NON rispetta quell'attributo e quindi ciò che stai cercando non funzionerà.

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

L'unica opzione è quella delega l'immagine tramite il proprio server.

Answer 2

meno che io sto leggendo completamente sbagliato, le specifiche sembra suggerire che sarà lavoro con tela - vedere la sezione "Non sporcando l'elemento canvas" sotto Casi d'uso:

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

Descrive in modo specifico il disegno di immagini remote servite con l'intestazione Access-control-allow-origin in una tela e quindi chiamando aDataURL() nell'area di disegno.

Forse i browser non hanno ancora raggiunto questo limite, ma è così che ho letto le specifiche, almeno.

Answer 3

In realtà, canvas onora "access-control-allow-origin" se l'immagine ha attributo "crossOrigin" con valore "anonymous".

funziona abbastanza bene in un esempio fisso: 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); 
} 

(io ho usato jQuery solo per DOM-manipolazione e Gestione degli eventi)