CORS support in THREE.Loader.load_image ?

[remoe]

Hi

"load_image" of Loader does not support CORS. I think this is a bug. Fix:

image.crossOrigin = '';

Cheers
Remo

[mrdoob]

Well spotted. Fixed!
5d5bb3d

I wonder whether we should use '' or 'anonymous' though. I've seen the later used too.

[alteredq]

I wonder whether we should use '' or 'anonymous' though. I've seen the later used too.

These two should be equivalent:

The empty string is also a valid keyword, and maps to the Anonymous state. 

http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#attr-crossorigin-anonymous

[remoe]

But why is it not possible to use "use-credentials" in all this load image requests ? it is needed when you want request the files only with a valid session.

Thanks

[alteredq]

We simply didn't encounter use case with credentials yet.

So far I didn't even see some example on how to actually deal with credentials (both on client and server sides).

Everybody just shows how to do anonymous requests for some big image repositories, giving permissions for everybody (as opposed to setting up your server on one domain to give permissions to just your application that is hosted on a different domain).

[remoe]

yes, but why limit the possibilities ? i request my resources with a valid session and after that i make a redirect to a external resource (cross domain access). Is this not a use case ? ;)

[alteredq]

What would be needed to get it working?

Is it enough just to have some flag to set use-credentials instead of empty string?

That's what I meant - I didn't see so far any examples doing non-anonymous CORS requests (what to set on client, what to do on server). It's hard to implement feature you don't know how it works (and no, reading specs didn't help in this case).

[remoe]

On the server side you need "Access-Control-Allow-Credentials" true in the headers. And on the client you need a modern browser like Chrome or Firefox and crossOrigin = '"use-credentials'. Then the browser send on this request the sessionid in the header.

[mrdoob]

And what does it do? Does it show a popup to write down user/pass? What's the UX?

[remoe]

No, no popup :) you need only a session. And you should set "use-credentials" only on this environment.

[mrdoob]

I see.. Well, for Loader we could just have a .crossOrigin public variable with '' as default. Maybe the same for ImageUtils?

[remoe]

Or a general load_image in ImageUtils and use it in Loader class. I mean something like the following (pseudo):

THREE.Loader.prototype = {
...
function load_image( where, url ) {
...
    THREE.ImageUtils.load_image(image, url);

}


THREE.ImageUtils = {
...
load_image: function(image, url) {
  var crossOrigin = '';
  if(typeof origin_select === 'function') {
    crossOrigin = origin_select(url);
  }
  image.crossOrigin = crossOrigin;
  image.src = url;
}

"origin_select" is a callback in ImageUtils. Then it is possible to make something application specific per url.

[mrdoob]

What's wrong with

var loader = new THREE.JSONLoader();
loader.crossOrigin = 'use-credentials';

and

THREE.ImageUtils.crossOrigin = 'use-credentials';

No callbacks, no dependencies... ?

[remoe]

When the server has "Access-Control-Allow-Credentials" = false then it does not work. And for me it is not DRY :) Is it not cleaner when only one instance know something about CORS/ImageLoad ? For me is the Loader above ImageUtils, so the dependencies are correct. Is it not ?

(But your idea is much simpler :)

[mrdoob]

When the server has "Access-Control-Allow-Credentials" = false then it does not work.

What doesn't work?

Is it not cleaner when only one instance know something about CORS ?

Well, if you think of it in a theorical way, yes. But if you go that way your code becomes harder to follow... order of dependencies at build time change. And then anytime you want to change something you need to keep in mind all the relations and dependencies and well... it just stops being fun :P

[remoe]

1. sorry, you mean "crossOrigin" as changeable variable, then all works.
2. I know what you mean. I prefer the "harder to follow" approach ;)

[mrdoob]

1. Yep yep :)

[remoe]

@mrdoob , i tested it with dev branch. It doesn't work on all cases:

stacktrace:

load_image() at Loader.js:139
create_texture() at Loader.js:178
THREE.Loader.createMaterial() at Loader.js:285
THREE.Loader.initMaterials() at Loader.js:76
THREE.JSONLoader.createModel() at JSONLoader.js:105
xhr.onreadystatechange() at JSONLoader.js:61

At first the crossOrigin is defined correctly. But the code in "THREE.Loader.initMaterials(..)" does some wrong things like:

"THREE.Loader.prototype.createMaterial"

This is called statically ...

Should this not fixed ?

[remoe]

does anyone understand my reported issue ? :)

[mrdoob]

Oh, so instead of THREE.Loader.prototype.createMaterial( materials[ i ], texture_path ); it should be this.createMaterial( materials[ i ], texture_path );?

[remoe]

yes, i think so. But i don't know the consequences ...