的JavaScript HTML5的drawImage與來自不同域的圖像

所以我有以下代碼：的JavaScript 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對象加載正確）。而且B:也適用，它將圖像繪製到我的畫布上。

在test 2中，我加載託管在與我的網頁域不同的域上的圖像。 C:工作正常，我知道你可以加載託管在其他域的圖像。但是，D:不起作用。我得到以下錯誤：

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....

，從我的理解是指該算作跨站點腳本。

所以這裏的問題：

1）爲什麼這被認爲是跨站點腳本？我的意思是，我知道爲什麼 ......但爲什麼D:不允許，當C:是？國際海事組織他們在原則/精神上都是一樣的東西？

2）有沒有辦法解決這個問題，而不是傳統的跨站腳本解決方法？我想我將不得不使用AJAX將URL傳遞給服務器端腳本併發出請求，然後將該映像保存在服務器上並向其返回一個URL以使其位於同一個域中，或者其他（我認爲）我可以返回原始的base64編碼數據，並使用canvas方法從原始數據構建它。我可以生活在做這些事情之一，但...我有點希望也許我錯過了關於HTML5 /帆布的東西（我是新來的！）

來源

2012-06-01 slinkhi

拿着它。其他事情正在發生。

您絕對可以從不同的域中繪製圖像。

下面是在的jsfiddle代碼placekitten.com繪製圖像：

http://jsfiddle.net/ZZW5V/

你應該嘗試用notyourdomain圖像的URL替換該提琴代碼的URL。它應該仍然有效。

一般而言，您應該始終能夠從任何能夠從其中成功獲取圖像的位置將圖像繪製到畫布上。

在那之後，您不允許做的事情是獲取imageData或將畫布保存到toDataUrl的PNG。有重要的security reasons爲什麼這是不允許的。

我的猜測是你正在做某件事違反安全規則之一，而不僅僅是試圖畫出圖像。

來源

2012-06-01 15:29:23

aha！先生，你是對的。經過更多的探究，我發現它並不是拋出錯誤的'.drawImage（）'，而是後面對'.getImageData（）'的調用！好吧，這樣做更有意義，與'A：'和'C：'東西更一致。 – slinkhi

這是一個安全措施，以防止信息被「偷走」。這與您無法使用AJAX從另一個域中獲取頁面的原因是一樣的。

例如，假設一家銀行網站使用圖片來顯示信用信息。您的代碼可能會將該圖像加載到頁面中，然後將其發送到您的服務器，從而竊取客戶端的安全信息。這是一個極端的例子，但是一個有效的例子。

您可以將圖像附加到頁面上，因爲您無法從中獲取任何信息。您無法將圖像加載到您的javascript中，因爲您隨後可以使用原始圖像數據進行操作和傳輸。

來源

2012-06-01 14:51:31 Death

+1，謝謝你的迴應！是的，我知道整個xss歌曲和舞蹈，但沒有任何意義，我不能做我在帖子中顯示的內容，事實證明，你實際上可以這樣做，因爲它與原理相同'.appendChild（）';腳本實際上進一步失敗（見Simon Sarris的迴應） – slinkhi

的JavaScript HTML5的drawImage與來自不同域的圖像

回答

相關問題