보안 오류가 발생하는 canvas.toDataURL()

나는 KineticJS's.toDataURL() 메서드를 통해 HTML5 캔버스와 .toDataURL() 함수를 사용하고 있습니다. 캔버스는 사용자가 사이트에 업로드 한 이미지를 사용하며 다른 컴퓨터 및 하위 도메인 farm1.domain.com에 저장됩니다.보안 오류가 발생하는 canvas.toDataURL()

문제 : 오류

SECURITY_ERR: DOM Exception 18

이 주위에 방법이 있나요 .toDataURL()가 호출 될 때, 내가 얻을? 사용자가 domain.com을 통해 페이지에 액세스하고 이미지가 www.domain.com에서 호스팅되는 경우에도 동일한 문제가 발생합니다.

시도 :

내가 가상 호스트에서 httpd.conf에 다음 줄을 추가하고 아파치 서비스를 다시 시작됩니다. domain.com 페이지에서 www.domain.com에 호스팅 된 이미지에 액세스 할 때

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"

나는 여전히 같은 오류를 얻을! KineticJS에서이 문제를 해결할 방법이 있습니까?

출처

2013-01-15 Nyxynyx

아마도 다음을 반복 할 수 있습니다. http://stackoverflow.com/questions/9344548/security-error-with-canvas-todataurl-and-drawimage?rq=1 and http://stackoverflow.com/questions/2390232/ 왜 canvas-todataurl-throw-a-security-exception –

가 중복되어 응답되었고 오른쪽 열에 관련 내용을 살펴 보겠습니다. 여기에는 [spec] (http://www.w3.org/TR/2011)이 있습니다. /WD-html5-20110405/the-canvas-element.html#security-with-canvas-elements) – antejan

오류를 방지하려면 origin-clean 플래그를 true로 설정해야한다고 생각하십니까? 이것이 KineticJS에서 할 수 있습니까? – Nyxynyx

이 오류를 해결할 방법이 없습니다. 다른 도메인의 캔버스에로드 된 이미지는 현재 모든 브라우저에서 구현 한대로이 오류를 발생시킵니다. 귀하의 경우에는 이미지가 동일한 도메인에 저장되어야하며 예외가 발생하지 않습니다.

출처

2013-01-15 06:54:53

다른 서버 및 CDN에 이미지를 저장할 수 없다는 것이 이상합니다. 특히 이미지 수가 단일 서버에 맞지 않을 때 ... – Nyxynyx

@ Nyxynyx 예. 불행히도 canvas 요소의 보안 제한 사항입니다. –

로딩중인 이미지가 아닌 해당 이미지에 Access-Control-Allow-Origin 헤더를 추가해야합니다. 이 헤더 및 CORS에 대한 자세한 내용은이 문제를 특별히 다루는 "CORS isn't just for XHR"을 읽어보십시오.

출처

2013-01-15 07:35:22 duskwuff

보안 오류가 발생하는 canvas.toDataURL()

답변

관련 문제