Sensor demo code works locally but not on Stackblitz

[cyrfer]

Describe the bug

I am experiencing these client errors in Chrome on OSX Sonoma for my application code.

App.tsx:19 [Violation] Permissions policy violation: accelerometer is not allowed in this document.
App.tsx:19 Uncaught DOMException: Failed to construct 'AbsoluteOrientationSensor': Access to sensor features is disallowed by permissions policy

The above errors are due to this code, in App.tsx

    const options: MotionSensorOptions = {
      frequency: 1,
      referenceFrame: "device",
    }
    const sensor = new AbsoluteOrientationSensor(options)

Link to the blitz that caused the error

https://stackblitz.com/edit/vitejs-vite-7rvkfw?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

1. open the browser's developer console to watch for print statements.
2. make sure the aplication is running (you should see a green background with a blue APPROVE button)
3. click APPROVE button
4. notice the error displayed in the console & in html (below the APPROVE button)

Expected behavior

I want to be able to run the sensor examples on MDN, i.e.
https://developer.mozilla.org/en-US/docs/Web/API/OrientationSensor#basic_example

I downloaded the code and ran it locally. I realized the vite.config file needed to be improved to support https with the local server. The application is only meant to succeed (after clicking APPROVE) when tested on mobile with https. When running a local server, the Sensor API behaves as expected.

I believe a mobile user should also be able to use the application when hosted on Stackblitz. However, the Stackblitz project does not load on mobile for some reason. Tested on Android/Chrome.

Parity with Local

• I have run the project in my local machine and I could not reproduce the issue.

Screenshots

Platform

Browser name  = Chrome
Full version  = 120.0.0.0
Major version = 120
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 137880543,
  "usedJSHeapSize": 132910727,
  "jsHeapSizeLimit": 4294705152
}
Hash = a2aabdd9

Additional context

No response

[Nemikolh]

Hi @cyrfer ! 👋 Thanks for opening this isse!

We have a fix for this in the pipeline. In the meantime, if you open the preview in a separate tab your demo should work without any issue there.

[Nemikolh]

The fix have been merged both for our Next Gen editor (Codeflow) and our Classic editor.