Webgl Cross Origin Images Don't Work

I've got some problem with cross-origin image and I hope you can help. Here the beahviour. I've got 2 domains, in example: - domain1.com - domain2.com On domain1 I put many html5 g

Solution 1:

The games have to request cross origin images. Simply returning the correct headers is not enough. If the games themselves don't request cross origin images by setting the crossOrigin attribute then the browser will not allow the images to be used even if they have the correct headers.

Here's an example

const gl = document.createElement("canvas").getContext("webgl");
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

loadImage('https://i.imgur.com/ZKMnXce.png', false);
loadImage('https://i.imgur.com/u6VI8xz.jpg', true);

functionloadImage(url, crossOrigin) {
  const img = newImage();
  img.onload = () => { upload(img); };
  if (crossOrigin) {
    img.crossOrigin = '';
  }
  img.src = url;
}

functionupload(img) {
  // trap for cors errortry {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    log(img.src, "uploaded image");
  } catch (e) {
    log(img.src, e);
  }
}

functionlog(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

pre { margin: 0; }

And here you can see even those the first image returned the CORS headers it was not allowed to be used because crossOrigin was not set

The second image has the same headers but it works because we set the crossOrigin attribute

Note that you might be able to include a script like this before the game scripts to kind of hack in CORS support.

(function() {

functionisSameOrigin(url) {
  return (newURL(url, window.location.href)).origin === window.location.origin;
}

functionneedsCORS(url) {
  // not sure all the URLs that should be checked forreturn !isSameOrigin(url) && !url.startsWith("blob:") && !url.startsWith("data:");
}

const srcSetFn = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src').set; 

Object.defineProperty(HTMLImageElement.prototype, 'src', {
  enumerable: true,
  set: function(url) {
     if (needsCORS(url)) {
       // Set if not already setif (this.crossOrigin !== undefined) {
         this.crossOrigin = '';
       }
     } else {
       this.crossOrigin = undefined;
     }
     // Set the original attribute
     srcSetFn.call(this, url);
  },
});

}());

Solution 2:

http://webgl-hooman.blogspot.ca/2018/01/cross-origin-image-cannot-be-loaded-in.html

CORS = Cross Origin Resource Sharing. It's a way for the webpage to ask the image server for permission to use the image.​ The cross origin is the security protection that is built in Google Chrome not allowing users to have access to local files (in this case your image/texture). Even in Safari, you will get "the operation is insecure" error. You have couple of options. The easiest way is to have your webgl application runs from a web server such as IIS or Apache. The other option is to open your webgl applications using Internet Explorer or Microsoft Edge browsers if you are using Windows. If you are running your webgl application from Mac using "FireFox" browser, add crossorigin="anonymous" to your image tag in HTML where your texture is getting loaded. But this won't work if you are using "Windows" operating system or any other browsers even in Mac! It only works with MAC+Firefox. So either change your image tag to this or simple add this var image = document.getElementById("texImage"); image.crossOrigin = ""; More on this, read: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html