"tainted Canvases May Not Be Loaded" Cross Domain Issue With Webgl Textures

July 31, 2024 Post a Comment

I've learnt a lot in the last 48 hours about cross domain policies, but apparently not enough. Following on from this question. My HTML5 game supports Facebook login. I'm trying to

Solution 1:

are you setting the crossOrigin attribute on your img before requesting it?

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150";

It's was working for me when this question was asked. Unfortunately the URL above no longer points to anything so I've changed it in the example below

var img = newImage();
img.crossOrigin = "anonymous";   // COMMENT OUT TO SEE IT FAIL
img.onload = uploadTex;
img.src = "https://i.imgur.com/ZKMnXce.png"; 

functionuploadTex() {
  var gl = document.createElement("canvas").getContext("webgl");
  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  try {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    log("DONE: ", gl.getError());
  } catch (e) {
    log("FAILED to use image because of security:", e);
  }
}

functionlog() {
  var div = document.createElement("div");
  div.innerHTML = Array.prototype.join.call(arguments, " ");
  document.body.appendChild(div);
}

<body></body>

How to check you're receiving the headers

Open your devtools, pick the network tab, reload the page, select the image in question, look at both the REQUEST headers and the RESPONSE headers.

The request should show your browser sent an Origin: header

The response should show you received

Access-Control-Allow-Methods: GET, OPTIONS, ...Access-Control-Allow-Origin: *

Note, both the response AND THE REQUEST must show the entries above. If the request is missing Origin: then you didn't set img.crossOrigin and the browser will not let you use the image even if the response said it was ok.

If your request has the Origin: header and the response does not have the other headers than that server did not give permission to use the image to display it. In other words it will work in an image tag and you can draw it to a canvas but you can't use it in WebGL and any 2d canvas you draw it into will become tainted and toDataURL and getImageData will stop working

Solution 2:

this is a classic crossdomain issue that happens when you're developing locally.

I use python's simple server as a quick fix for this.

navigate to your directory in the terminal, then type:

$ python -m SimpleHTTPServer

and you'll get

Serving HTTP on0.0.0.0 port 8000 ...

so go to 0.0.0.0:8000/ and you should see the problem resolved.

Solution 3:

You can base64 encode your texture.

Html5 Website

"tainted Canvases May Not Be Loaded" Cross Domain Issue With Webgl Textures

Solution 1:

Solution 2:

Solution 3:

Post a Comment for ""tainted Canvases May Not Be Loaded" Cross Domain Issue With Webgl Textures"