Security issues of HTML5 Canvas

[ajhsu]

Why it matters?

The potential security issue about HTML5 canvas would be: https://simonsarris.com/understanding-the-html5-canvas-image-security-rules/

Related topics about the issue

• Security and tainted canvases
• The crossorigin attribute: Requesting CORS access to content
• The crossorigin attribute from the img element
• The SecurityError exception when calling toDataURL method

[ajhsu]

<img> 是可以不管 Same-origin policy 存取 Cross-origin images；但是當你把 img 的內容畫在 Canvas 時，Canvas 就無法輸出任何資料，因為這時的 Canvas 已經被 img 給污染 (tainted) 了。

另一方面，如果你透過 new Image() 來取得擁有 CORS 權限的圖片，並且畫到 Canvas 時，則可以正常輸出，因為所有的流程都符合 CORS 的標準。反之，若透過 new Image 來取得沒有 CORS 權限的圖片，則是會被擋下來的 (符合 Same-origin policy)。