Background
We use the Javascript library Three.JS for visualizing models stored up on Amazon S3.
I use the JSONLoader for all of my models. Other formats lack the toolchain support our team needs, and common formats like COLLADA or OBJ seem to be second-class citizens as far as the included loader libraries go (they are found, for instance, in the source tree under “examples”… the JSONLoader is in the core loaders folder).
I have large model files, and so store them and their associated assets up on Amazon S3 storage, where bandwidth and space are relatively cheap. The intent is that the web app using Three.JS loads models from our storage on Amazon, and everything is okay.
Problem
Unfortunately, the models are Javascript files (“modelBlah.js”, for example) and when they are loaded by the JSONLoader any sane browser immediately pouts about the fact that we’re violating the same-origin policy for scripting–e.g., we’re loading and attempting to evaluate scripts from a different domain than the calling script (which is the main harness for the app).
So, it would seem that we’ve flown in the face of many years of web security best practices.
Solutions looked at so far
-
Host the models ourselves? We’re using Heroku for now, and ideally we’d like to use a service specifically billed as “Big Buckets of Bits and Bandwidth” instead of doing it ourselves.
-
Use DNAME records to spoof where the resources come from? Unfortunately, this doesn’t seem sufficient to fool browsers, as the subdomain used for the media hosting would still enrage the browser security.
-
Use CORS, specifically Access-Control-Allow-Origin headers? Brief skimming of Amazon S3 doesn’t seem to allow this, though I am hopefully mistaken. Even so, would that be sufficient?
Any ideas?
S3 does not yet allow you to set CORs. To work around this exact problem, I ended up running an EC2 instance to act as a proxy server for downloading the models. The proxy (currently just running node) grabs the file from S3, sets the CORs header and passes it down to the application. There are a lot of options for the node setup including the knox or bufferjs.