Canvas, iframe and Access-Control-Allow-Origin

Question

I am getting crazy with this problem, and hope there is a solution or workaround. I have a canvas inside an iframe, in a different domain (for security reasons). This canvas shows a Processing.js animation/drawing. I need to allow the canvas to load image files that are located on the same domain.

index.html with the iframe is in domain.com

index.html with the canvas is in sub.domain.com

Now I know for sure that:

1. The canvas can load/visualize a remote image but cannot access a remote image data (pixels).
2. The canvas can fully access an image file on the same domain, unless it is played in an iframe (!?).
3. Setting Access-Control-Allow-Origin header simply allows to access files on other domains.
4. The canvas does not support/consider Access-Control-Allow-Origin headers at all.

Is there a way to bypass all these security limits and simply get a canvas played in an iframe to load an image file?

Answer 1

I found the solution to my problem (and saw that nobody answered). Actually I forgot something... I was using the sandbox attribute in the iframe tag and that was the problem. Once removed, images started to be accessible within the canvas, in Firefox and Chrome at least (did not test IE yet). Anyway, the sandbox attribute still has a very bad support and is probably totally useless in a cross-domain scenario.

So. I can confirm that with a normal iframe (without any sandbox parameter) there are no problems when loading images into a canvas, within an iframe, if and only if the image is in the same domain of the canvas page.