2013-01-15 25 views
5

Utilizzo la tela HTML5 e la funzione .toDataURL() tramite il metodo KineticJS's.toDataURL(). La tela utilizza le immagini che i miei utenti hanno caricato sul sito, che sono memorizzate su un altro computer e sottodominio farm1.domain.com.canvas.toDataURL() causa un errore di sicurezza

Problema: Quando .toDataURL() viene chiamato, ho l'errore

SECURITY_ERR: DOM Exception 18 

C'è un modo per aggirare questo? Ho anche lo stesso problema se l'utente accede alla pagina tramite domain.com e l'immagine è ospitata allo www.domain.com.

Tentativo:

ho aggiunto le seguenti righe al httpd.conf all'interno virtualhost e riavviato il servizio Apache.

Header add Access-Control-Allow-Origin "http://www.domain.com" 
Header add Access-Control-Allow-Origin "http://domain.com" 
Header add Access-Control-Allow-Origin "http://farm1.domain.com" 

ho ancora ottenere lo stesso errore quando si accede a un'immagine ospitata su www.domain.com dalla pagina su domain.com! C'è un modo per aggirare questo in KineticJS?

+0

Probabilmente una ripetizione di: http://stackoverflow.com/questions/9344548/security-error-with-canvas-todataurl-and-drawimage?rq=1 e http://stackoverflow.com/questions/2390232/ why-does-canvas-todataurl-throw-a-security-exception –

+0

duplicato ed è stato risposto, guarda il relativo nella colonna di destra, e qui è la [specifica] (http://www.w3.org/TR/2011 /WD-html5-20110405/the-canvas-element.html#security-with-canvas-elements) – antejan

+0

Immagino che il flag clean-origin deve essere impostato su true per evitare l'errore? Questo può essere fatto in KineticJS? – Nyxynyx

risposta

0

Non c'è modo di aggirare questo errore. Le immagini caricate in una tela da un dominio diverso solleveranno questo errore come attualmente implementato da ogni browser. Nel tuo caso le immagini dovrebbero essere archiviate nello stesso dominio e non otterresti eccezioni.

+0

È davvero strano che non riesca a memorizzare le mie immagini su altri server e CDN soprattutto quando la quantità di immagini non può essere contenuta in un singolo server ... – Nyxynyx

+0

@ Nyxynyx Sì, sfortunatamente è un limite di sicurezza dell'elemento canvas. –

1

È necessario aggiungere le intestazioni Access-Control-Allow-Origin alle immagini che si stanno caricando, non alla pagina che le sta caricando. Per i dettagli su questa intestazione e su CORS in generale, si consiglia di leggere "CORS isn't just for XHR", che tratta specificamente questo problema.

Problemi correlati