admin

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的某个图档当作