THREE JS tainted canvas and CORS

Question

I'm trying to render a THREE.js scene having a background image obtained from a different domain.

I was getting a tainted canvas error because the image did not have CORS approval and as a result manipulation of the canvas results in a security error.

After reading this answer, I set the THREE.TextureLoader() to allow cross origin loading:

var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var texture = loader.load(
   url_to_image,
   // Function when resource is loaded
   function ( texture ) {
     var backgroundMesh = new THREE.Mesh(
       new THREE.PlaneGeometry(2, 2, 0),
       new THREE.MeshBasicMaterial({
            map: texture
        })
      );
     backgroundMesh.material.depthTest = false;
     backgroundMesh.material.depthWrite = false;

     // create your background scene
     backgroundScene = new THREE.Scene();
     backgroundCamera = new THREE.Camera();
     backgroundScene.add( backgroundCamera );
     backgroundScene.add( backgroundMesh );

   },
   // Function called when download progresses
   function ( xhr ) {},
   // Function called when download errors
   function ( xhr ) {}
);

However, I now get the CORS error: Access to Image at 'url_to_image' from origin 'my_domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my_domain' is therefore not allowed access.

Comments from this answer seem to suggest that some domains do not give permission to use the image in the browser in WebGL, how can I find out if that is the case?

If it's not a problem with the domain I'm pulling the image from, how can I get this to work?

score 0 · Answer 1 · answered Jul 13 '17 at 19:48

0

Well, judging by the error message you get, the domain you are requesting the image from does not support cross origin resource sharing.

If you control the resource on that domain, you would need to add an appropriated "Access-Control-Allow-Origin" header to the response.

If you don't control the domain, then there is little that you can do (besides using a CORS proxy) in the browser, since the point of CORS is that your JS should not be able to access the result of the request if CORS is not explicitly enabled by domain hosting the resource.

answered Jul 13 '17 at 19:48

Daniel Hintze

447
3
8

I do not control the domain. Could you please explain how can I use a CORS proxy? – Matteo Jul 13 '17 at 21:17
There are some public ones, for instance https://crossorigin.me/. Otherwise you would need to set up your own sever, as K.Miao pointed out in the other answer. – Daniel Hintze Jul 16 '17 at 17:47

score 0 · Answer 2 · answered Jul 15 '17 at 18:10

Use your server to forward your image request to the resource domain.

It would be like this:

Your browser ===> Your server ===> Image

What you're currently doing is directly fetching the image in the browser, which means you're crossing two domains (one is your server and the other is the image resource domain). But by using a server to forward your request, your browser sends requests to only your server, which avoids violating CORS.

Crossing domains is not secure and forbidden by most of the browsers. However, you can manually disable the CORS restriction by configuring your browser. For example, in Safari, you can select Disable Cross-Origin Restrictions in Develop menu.

THREE JS tainted canvas and CORS

2 Answers2

Linked