🏠 back to Observable

Web Bluetooth API - cross-origin iframe security error


#1

I’m trying to stream sensor data directly to a notebook using the web bluetooth API.

Here’s the notebook: https://beta.observablehq.com/@aallman/ble-data-from-esp32-initial-test

When I try to call navigator.bluetooth.requestDevice I get this error: “requestDevice() called from cross-origin iframe.” It seems like this problem might be related to the issue with native window notifications (Native window notifications - not working?). If so, has there been any further thoughts on how to handle this type of situation?

My first approach to getting sensor data was using websockets but I ran into problems getting the secure version (wss) to work on the little iot device that’s producing the sensor data. Both the websocket and web bluetooth approaches worked fine using non-secure local site, but I was really hoping to be able to work with the live data directly in Observable.

Thanks!!


#2

It looks like Chrome disabled bluetooth access within a cross-origin iframe, so I don’t think there’s currently a way to do this. The relevant issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=518042&desc=2

It looks like once Chrome adds support, we can add “bluetooth” to the iframe feature policy:

https://chromium-review.googlesource.com/c/chromium/src/+/657572


#3

Thanks Mike!