Cross domain error only on iOS and desktop Safari, but works fine on all other mobile and desktop browsers

[FbFGlobal_Dev]

Have any of you bumped into this issue: My BJS project works fine on Desktop (chrome and firefox), mobile (android devices) but when I view it on desktop Safari and iOS Safari it doesn't work and is throwing cross domain errors. 

[MarianG]

Hi. I saw this. Default babylonjs try to load file from manifest, if it doesn;t exist, you will receive an error, but it will work in all most browsers,and on IOS or Safari doesn't work. So create a manifest file. I think this is the problem.

[FbFGlobal_Dev]

Unfortunately I have created a manifest file and it is finding it. I tested by removing the manifest file and a new 404 error would pop up in the console. I put the manifest file back and the 404 error is gone but still received the cross domain error. It is also important to note that the Babylon project is being brought through as an iFrame and the error is indicating that an asset from the Babylon project's server is looking for an asset on the host page's server (this is only happening on iOS I get zero errors on other browsers and everything displays perfectly)

[GameMonetize]

Can you share the precise error that you get?

[FbFGlobal_Dev]

Sure thing!

[Log] BJS - [10:34:30]: Babylon.js engine (v2.3.0) launched (babylon.2.3.js, line 3)

[Error] Blocked a frame with origin "Babylon project's http://" from accessing a frame with origin "the http:// address to the Demo page that holds the iframe containing the Babylon project". Protocols, domains, and ports must match.
    attachControl (babylon.2.3.js:9:4949)
    t (babylon.2.3.js:8:27880)
    Load (babylon.2.3.js:13:31675)

[Error] Blocked a frame with origin "Babylon project's http://" from accessing a frame with origin "the http:// address to the Demo page that holds the iframe containing the Babylon project". Protocols, domains, and ports must match.
    attachControl (babylon.2.3.js:8:14163)
    (anonymous function)
    (anonymous function) (babylon.2.3.js:9:7081)
    forEach
    _checkIsReady (babylon.2.3.js:9:7067)
    (anonymous function) (babylon.2.3.js:9:6955)

[GameMonetize]

Ok so this seems to be a CORS issue  (captian obvious!)

Do you reference out of doamin resources? like the babylon.js file for instance?

[FbFGlobal_Dev]

Yes I have to pull the babylon.js file from a domain resource. It is not possible for me to dictate a folder structure for the babylon project (it is something I don't have access/authorization for). When assets are uploaded to the server, I have no control over where they are placed, but I receive the path to the asset so I can reference it in my project.

[GameMonetize]

This may come from a limitation of iFrame on IOS I guess

[FbFGlobal_Dev]

Hmm ok I'll see if I can find a work around, but do you have an idea as to what aspect of the framework is being hindered by this iframe limitation? Is it that the framework cannot find the render canvas within the iframe? Is it that the server path of the scene assets are different from each other (reiterating that I have no control over asset location on the server once uploaded)? What part of the framework would be looking for server paths and trying to pull them automatically based on the page the project is sitting on? Just looking for a starting place to find a solution (there has to be one if it works fine everywhere except on iOS)

[jerome]

the framework is just a big javascript library, nothing more, nothing less

the browser security restrictions known as Same Origin Policy apply to any web ressource within a web page. It has nothing to do with how the framework works. Just consider BJS as any other script, it is to say, any other web ressource in your page to understand where the limitation comes from.

Usually the browser notices in its console what it downloaded or not and why. An iframe, with a different Web Origin than the main page that embbeds it is typically a case of SOP application.

[FbFGlobal_Dev]

Thanks Jerome!

I know the framework is just js, but was wondering if within that js it was filling in pathways to assets automatically by doing something like setting a variable to location.origin for instance and then filling in the rest of the asset path with the parameters given in the sceneLoader  (like folder name, etc) OR doing something like parent.location.origin (this is just an example and a very easy way to replicate the exact type of error I'm receiving). I'm not so familiar with the babylon.js file to know how it was built and what exactly it's doing to get from point A to point B, which is why I was asking if there would be any reason babylon.js might be trying to access something outside of the project it's included in. Maybe it has something to do with the manifest file....is there a way I can overwrite the pathway to that asset rather than it trying to find it in the same place as the .babylon file or set it to not look for it at all?(I know iOS and desktop Safari have issues with cookies being sent from an iframe I'd imagine this is the same issue) 

[FbFGlobal_Dev]

Hey Gang!

I have an update on this! So I did a couple things while experimenting to get this working. First I made the switch to Babylon v2.4, then switched from hand.js to PEP. This would now render the frame on iOS browsers (so that was a start) but I would not have camera controls (no errors would come up either). Then I looked at how the scene was built. Originally, I just loaded the entire scene with BABYLON.SceneLoader.Load() and added a light and arcRotateCamera (again this worked great for desktop and android but those darn Apple products weren't too happy). Anywho I opted to build the scene out manually and just imported my meshes and rigs via BABYLON.SceneLoader.ImportMesh(). Once doing that, my scene now renders and I have full camera controls on iOS, Android and desktop! 

It would seem that, in this user case, SceneLoader.Load() doesn't like to be in an iFrame.

I did run into another snag though on iOS. Now only some of the animations are running and others are not (Android and Desktop are running perfectly!)  After each object is loaded (there are 5 of them) I begin the animation of that object:

BABYLON.SceneLoader.ImportMesh("", folder, babylon file, scene, function (mesh, particleSystems, skeleton) {
                    mesh = mesh[0];
                    scene.beginAnimation(skeleton[0], 1, 50, true);
                });

Should I be kicking off the animations differently?

[GameMonetize]

Nope this is fine:)

 

Other option will be to tag the mesh to autoAnimate = true directly inside the .babylon file