HTML5 Canvas的Origin-Clean安全原則 - 黑暗執行緒

HTML5 Canvas的Origin-Clean安全原則 - 黑暗執行緒

前幾天介紹了如何利用toDataURL()將canvas繪製結果轉為圖檔的做法，但實際應用時，卻發現常常會冒出奇怪的錯誤:

在IE, Chrome或Safari上出現: SECURITY_ERR: DOM Exception 18
在FireFox則是冒出: 0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)
原來，跟Cross-Site Scripting的限制一樣，HTML canvas也有其安全原則! 簡單來說，可想成每個canvas有個origin-clean旗標，一開始預設為true，一旦有下列任一情況發生時，origin-clean旗標即被設為false:

drawImage()時，使用與document不同來源(origin，跟瀏覽器跨網域議題裡網域的概念差不多)的image或video作為材料
drawImage()時，使用orgin-clean=false的canvas作為材料
fillStyle使用其他來源的image或video作為pattern
fillStyle使用其他orgin-clean=false的canvas建立的pattern
strokeStyle使用其他來源的image或video作為pattern
strokeStyle使用其他orgin-clean=false的canvas建立的pattern
fillText()或strokeText()使用其他來源的字型
一旦canvas的orgin-clean旗標被設為false，此時若呼叫toDataURL()、getDataImage()或measureText()等方法，都會引發安全性錯誤[DOMException.SECURITY_ERR (18)]! 最簡單的例子，就是網站A網頁上的canvas，在drawImage時，引用了放在網站B的某個圖檔當作 src，則該canvas就無法再執行toDataURL()了!