2

I have fedora installed on a virtual machine on my computer, and I've been trying to get deviceOrientation events to fire when I view the site on my phone.

It hasn't been working, so using the answer from this thread: How to check for a device/browser that fully supports the deviceorientation event?, I ran this code to check if it's supported:

if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
    // setup real compass thing, with event.alpha
    document.write("haz!");
} else {
    // setup some mouse following hack
    document.write("nope");
}

This results in "nope". But I know that my phone supports deviceOrientation, because the example on MDN works.

Then, I uploaded the exact same file to my own website, where lo and behold, it gave me "haz!".

I have no idea why the server I use should make a difference to whether deviceOrientation is supported. The only thing I can think of is that maybe it requires SSL, but I don't see SSL mentioned anywhere in any documentation, and I have previously used deviceOrientation on a website hosted on my raspberry pi, which didn't have SSL.

M. Salman Khan
  • 608
  • 1
  • 6
  • 16

1 Answers1

4

From v.76 Chrome requires that the page you are on is served through https.

This can be seen by going to this http:// fiddle which will output nope, while the same fiddle served through https:// will output haz!, just like the snippet below, which is served through https:

if (window.DeviceOrientationEvent) {
    console.log("haz!");
} else {
    console.log("nope");
}

Here is the chromium bug that introduced this restriction.

Note that if it is only for your own purpose, then you can leverage it by starting your Chrome with the --unsafely-treat-insecure-origin-as-secure, apparently it's also possible to do it on mobile versions (though I didn't test myself).

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thank you so much! I was going crazy with that haha. Any idea why they've disabled it without SSL? What security risk could deviceOrientation pose? – M. Salman Khan Sep 05 '19 at 01:39
  • 1
    It's actually per specs recommendations: https://w3c.github.io/deviceorientation/#security-and-privacy Their point is that it's a wonderful way to finger-print users since two different hardwares will produce different precision. (btw I found the crbug that introduced this change and added it in my answer) – Kaiido Sep 05 '19 at 01:42