Forum Discussion

🚨 This forum is archived and read-only. To submit a forum post, please visit our new Developer Forum. 🚨
tnraddatz's avatar
tnraddatz
Honored Guest
3 years ago
Solved

[Bug Report] Meta Quest Browser Sandbox IFrame Requires "allow-same-origin"

Hi Team, 

Thank for you for hard work! Meta Quest Browser has been awesome to develop with.  

I'd like to report a bug, or at least an oddity.. I've noticed that the Meta Quest Browser enforces sandboxed IFrames to have "allow-same-origin" be toggled, or else VR content cannot load and with threejs (webxr) specifically, it will crash the browser! 

This behavior does not happen on Chrome, though I am using a chrome plugin to use "VR" on my local workstation, so its not exactly a 1-to-1 test.  

To reproduce this issue, create a simple Iframe with threejs/babylonjs webxr content in the srcDoc attribute: 

This below example WILL work. 

 

      <iframe
        scrolling={'no'}
        style={{
          display: 'block',
          border: 'none',
          margin: '0px',
          height: '100vh',
          width: '100vw'
        }}
        sandbox="allow-scripts allow-same-origin" 
        title={scene_uuid}
        srcDoc={sceneJsData}
        hidden={loadingScreenWait}
      />

 


 This below example will NOT work:

 

      <iframe
        scrolling={'no'}
        style={{
          display: 'block',
          border: 'none',
          margin: '0px',
          height: '100vh',
          width: '100vw'
        }}
        sandbox="allow-scripts"
        title={scene_uuid}
        srcDoc={sceneJsData}
        hidden={loadingScreenWait}
      />

 

 

Having the sandbox only be allowed "allow-scripts" should be sufficient for webXR.  Requiring both "allow-script allow-same-origin" actually breaks sandboxing altogether, because a script with allow-same-origin can break out of its own sandbox, according to MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe


Bonus points: crash the browser.. 


If you wrap a sandboxed iframe in a sandboxed iframe you can crash the browser with threejs! 

Example: 

    <iframe
      title={title}
      src={`/endpoint/with/sandboxedIframe/and/threejs/srcDoc`}
      scrolling={'no'}
      allow="xr-spatial-tracking;fullscreen;camera"
      sandbox="allow-scripts" 
      style={{
        display: 'block',
        border: 'none',
        margin: '0px',
        width: width,
        height: height,
        background: 'black'
      }}
    />


and the srcDoc iframe on the other endpoint 

      <iframe
        scrolling={'no'}
        style={{
          display: 'block',
          border: 'none',
          margin: '0px',
          height: '100vh',
          width: '100vw'
        }}
        sandbox="allow-scripts"
        title={scene_uuid}
        srcDoc={sceneJsData}
        hidden={loadingScreenWait}
      />

1 Reply

  • Hey!

    You all fixed it! Thank you 🙂

    -Thomas