[SOLVED] CORS problem with DynamicTexture on some servers (tainted canvas)

[Vousk-prod.]

Hi everyone,

I'm using DynamicTexture in a projet. It works like a charm in our servers,

But now we delivered the project to an other server and we get the following error:

In Chrome console:

babylon.3.0.max.js:9192 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.
    at Engine.updateDynamicTexture (babylon.3.0.max.js:9192:22)
    at DynamicTexture.update (babylon.3.0.max.js:42260:41)

In Firefox console:

SecurityError: The operation is insecure.  babylon.3.0.max.js:9192
    Engine.prototype.updateDynamicTexture babylon.3.0.max.js:9192:13
    DynamicTexture.prototype.update babylon.3.0.max.js:42260:13

In Edge console,

SCRIPT5022: SecurityError
babylon.3.0.max.js (9192,13)

with a link pointing to https://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=FR-FR&k=k(VS.WebClient.Help.SCRIPT5022)

 

It looks like the culprit line in BJS is:

this._gl.texImage2D(this._gl.TEXTURE_2D, 0, internalFormat, internalFormat, this._gl.UNSIGNED_BYTE, canvas);

I can't reproduce the bug in the Playground, I can't even reproduce it on my own servers...

Any idea what the problem could be ?

 

[adam]

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

[Vousk-prod.]

Thank you @adam

But I don't get something:

Our server is configured to deliver crossorigin content. The other server (from where the public html page is served) loads, in that html page, our scripts and images from our server. So we shouldn't have CORS problem.

The other server should also define CORS rules? Or there is something inside the source code (when loading the image used in DynamicTexture) we need to set to avoid tainted canvas?

[adam]

Try setting img.crossOrigin = "anonymous" before you set img.src.

https://stackoverflow.com/questions/23123237/drawing-images-to-canvas-with-img-crossorigin-anonymous-doesnt-work#23123261

edit:

this might need to happen here:

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/controls/image.ts#L88

[GameMonetize]

I will add it:)

[Vousk-prod.]

Thank you @adam .

I added  img.crossOrigin = "Anonymous" to the images I load in the DynamicTexture and now it's OK !