그래서 나는 다음과 같은 코드가 있습니다 :다른 도메인에서 이미지와 자바 스크립트 HTML5의 drawImage
var element = document.getElementById("myCanvas");
var width = element.width;
var height = element.height;
var context = element.getContext("2d");
/* test 1 */
var img1 = new Image(width, height);
img1.src = "http://www.mydomain.com/image.jpg";
document.body.appendChild(img1); // <-- A: this works
context.drawImage(img1,0,0,width,height); // <-- B: this works
/* test 2 */
var img2 = new Image(width, height);
img2.src = "http://www.notmydomain.com/image.jpg";
document.body.appendChild(img2); // <-- C: this works
context.drawImage(img2,0,0,width,height); // <-- D: this does not work
그래서 동일한 도메인에서 호스팅되는 사진과 함께 이미지 객체를 생성 test 1에, 내 코드를보고 좋아 내 페이지로. A:에서 정확하게로드 된 것을 볼 수 있습니다 (A: 및 C:은 img 객체가 올바르게로드되었는지 테스트하기 위해 throw됩니다). 그리고 B:도 작동합니다. 이미지를 캔버스에 그립니다.
test 2에서 내 페이지의 도메인과 다른 도메인에 호스팅 된 이미지를로드합니다. C:이 정상적으로 작동하며 다른 도메인에서 호스팅되는 이미지를로드 할 수 있음을 알고 있습니다. 그러나 D:이 작동하지 않습니다. 나의 이해에서이 의미
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....
크로스 사이트 스크립팅로 계산됩니다 : 나는 다음과 같은 오류가 발생합니다.
1) 왜이 고려된다 크로스 사이트 스크립팅 :
그래서 여기에 질문입니까? 내 말은, 내가 을 알고있는 이유는 ... 일 때 D:이 허용되지 않는 이유는 무엇입니까? IMO 그들은 원칙적으로나 정신적으로 같은 종류입니까?
2) 일반적인 교차 사이트 스크립팅 해결 방법 이외의 다른 방법이 있습니까? AJAX를 사용하여 URL을 서버 쪽 스크립트에 전달하고 요청을 한 다음 서버에 이미지를 저장하고 URL을 반환하여 동일한 도메인에 있도록하거나 그렇지 않으면 (나는 생각한다) 원시 base64로 인코딩 된 데이터를 반환하고 캔버스 메서드를 사용하여 원시 데이터에서 데이터를 빌드 할 수있다. 나는이 중 하나를하면서 살 수 있지만 ... 나는 html5/캔버스 물건에 대해 뭔가 빠뜨린 것 같아. (신참!)
aha! 당신 말이 맞습니다. 더 많은 것을 파고 들자 마자 나는 오류를 던지고있는'.drawImage() '가 아니라는 것을 발견했다. 나중에 나왔던'.getImageData()'에 대한 호출이었다. 좋아요,이게 더 합리적 이군요.'A :'와'C :'물건으로 더 잘 맞 춥니 다. – slinkhi