Workaround to Cross-Origin problem in chrome

Good morning,
I want to create a browser-app, which can be downloaded and run offline by the final user.

So the final user is supposed to download the whole package (which includes the .js files -and their licenses- the 3d models, the textures), to click on a .html file and enjoy it.
As you probably guessed, I faced the dreaded cross origin problem, here, namely when I tried to import the meshes with
BABYLON.SceneLoader.ImportMesh("", root, babylon_filename, scene, function (meshes) {…});.

FF actually worked fine from the start, as long as the resources were in a subfolder of the the folder containing the html, but chrome stubbornly refused to load anything.

My first workaround was to import directly the content of the babylon file. Basically I renamed the file “x.babylon.js”, and wrapped all its content in a var import_content=`former_file_content`

Then I called BABYLON.SceneLoader.ImportMesh("", root, “data:”+import_content, scene, function (meshes) {…});.

And it worked, loading the meshes.
Great.
But!
While in FF everything works again perfectly, in chrome this trick is not enough, because it doesn’t load the associated textures, again for the cross origin problem.

I want to specify immediately that I know the most common “solutions” to the cross origin problem, like: run a local server, make your browser-app an extension, launch chrome allowing the cross origin, but all of them are inadequate for my purpose: I don’t want to ask to the final user to run a local server, to launch from command line chrome using some esoteric parameters, or to install an extension. I don’t want to ask to the final user anything, aside “download it, unzip it, click the html file, enjoy”.

So I wonder if anyone has any idea about a possible workaround, maybe similar to the one I used to load the mesh (ie: transforming the JPGs in some stringified form, inserting them in a .js file as string variables, and then saying to the importer “look, your meshes are now in this array of strings, load them from there”).
Or some way to say, programmatically, that those JPGs are allowed to be loaded (after all, dammit, I can show them in a DOM element, I don’t see why showing them on a webgl mesh should be more of a security issue!)

Thanks.

i suppose you could embed them into a js file as base64 strings :thinking:

1 Like

Nice, this is a good idea, I will research about it, thanks.
But how can I tell to the importer that those are the JPGS it is looking for?

Sounds like it should be a PWA so
“download it, unzip it, click the html file, enjoy”
becomes
“add a shortcut to your desktop, enjoy”.

Add a serviceworker, in other words.