“Tainted canvases may not be loaded” Cross domain issue with WebGL textures

by

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 = new Image();
img.crossOrigin = "anonymous";   // COMMENT OUT TO SEE IT FAIL
img.onload = uploadTex;
img.src = "https://i.imgur.com/ZKMnXce.png"; 

function uploadTex() {
  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);
  }
}

function log() {
  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.

enter image description here

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

More Related Contents:

  1. Getting Chrome to accept self-signed localhost certificate
  2. How to make audio autoplay on chrome
  3. Using Chrome’s Element Inspector in Print Preview Mode?
  4. How can I get the URL of the current tab from a Google Chrome extension?
  5. Save the console.log in Chrome to a file
  6. What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
  7. How can I open my extension’s pop-up with JavaScript?
  8. How to verify an XPath expression in Chrome Developers tool or Firefox’s Firebug?
  9. Automatically open Chrome developer tools when new tab/new window is opened
  10. Chrome CORS error on request to localhost dev server from remote site
  11. Chrome DevTools Devices does not detect device when plugged in
  12. How to reposition Chrome Developer Tools
  13. Bizarre Error in Chrome Developer Console – Failed to load resource: net::ERR_CACHE_MISS
  14. CSS Border radius not trimming image on Webkit
  15. Selenium WebDriverException: unknown error: call function result missing ‘value’ while calling sendkeys method
  16. chrome.identity User Authentication in a Chrome Extension
  17. Can I modify outgoing request headers with a Chrome Extension?
  18. Saving canvas to image via canvas.toDataURL results in black rectangle
  19. Chrome not showing OPTIONS requests in Network tab
  20. Why doesn’t Chrome browser recognize my http2 server?
  21. Chrome Dev Tools – “Size” vs “Content”
  22. Does –disable-web-security work in Chrome?
  23. net::ERR_INSECURE_RESPONSE in Chrome
  24. What does “http://*/*”, “https://*/*” and “” mean in the context of Chrome extension’s permissions
  25. How can I detect the current tab’s mime type in a Google Chrome extension?
  26. WebRTC OfferToReceiveAudio error in Firefox
  27. Chrome Dev Tools: How to trace network for a link that opens a new tab?
  28. Where can I find and submit bug reports on Google’s Chrome browser?
  29. How to delete indexedDB?
  30. How to block a URL in Chrome’s developer tools network monitor

Leave a Comment