Can not use WebBluetooth function.

[tetunori]

Nature of issue?

• Found a bug

Details about the bug:

Hi all, I found that I could not use WebBluetooth function on the latest p5js web editor as of 2021/07/15. So, now we can NOT use p5.ble.js, p5.toio, and so on.
Please check the demos below.
p5.ble.js demo
p5.toio demo

I could surely use it in June 2021 so I think some recent changes might affect.
At least, this issue occurs on Chrome and Firefox environment.

Environment

• Web browser and version: Chrome 91.0.4472.124（Official Build）（64 bit）
• Operating System: Windows 10 Home, 10.0.19042 build 19042

Steps to reproduce this bug:

1. Access to one of the demos above.
2. Try to connect.(click Connect button or click screen on Preview window.)
3. Problem occurs! The error log "SecurityError: requestDevice() called from cross-origin iframe." is shown in the Console and BLE connection dialog never opens up.

Usually, BLE connection dialog below opens and we can connect to the BLE peripheral.

Since WebBluetooth on P5 js web Editor is very easy to use and helpful for a lot of people, I hope this issue will be fixed.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thank you for reporting! I did a little bit of research and unfortunately I don't know if it's possible to fix this at the moment. There's been an open issue in Chromium about it since 2015, and there apparently was an attempt to add this feature but it was abandoned 😢

If you use the "present" view, it should work, though I think if you are using it to do active development you will notice that it will cache previous versions of your sketch. I thought there was an open issue about this but I'm having a hard time finding it, so I will open an issue about that bug 😄

I know it's really frustrating to have a feature no longer work and not have an answer when it could be fixed. This is an issue that many other online code editors face as well—for example, someone made a bluetooth proxy example for Observable.

Update: I was wrong about the caching issue. That issue only comes up with media files, see #1738, #1860.

[tetunori]

Thanks @catarak for your first analysis.
I have checked with Docker environment and found the result below.

v2.0.2 : This issue occurred.
v2.0.0 : This issue occurred.
v1.4.2 : No problem. This issue didn't occur.

I hope it will help you to analyze.

[tetunori]

I found that this issue occurs with the code 14513b9 (just before merge #1894 ).

So, I think there is a cause in commits merged as #1894 .

[catarak]

Yes! This issue is caused by #1894, but unfortunately the change protects the p5.js Editor against Cross Site Scripting (XSS) attacks. I would like to be able to enable bluetooth connects from within the sandboxed iframe but it seems like browsers unfortunately prevent this, which is super frustrating.

[tetunori]

Thx for your response. I got the current situation and fully understandable.
So, until the day when browsers supply any methods to allow WebBluetooth in iframe, let this issue remain open.

[pelikhan]

Maybe there is hope? WebSerial is enabled currently on the editor.

[tetunori]

The other day, I found the item on Permission policy support for WebBluetooth in Chrome v104 release(roadmap) status below.
https://chromestatus.com/feature/6439287120723968

I think this function might enable p5.js Web Editor(has cross-origin iframes) to support Web Bluetooth function and some libraries using the technology such as p5.ble.js, p5.toio and so on.

Actually, OpenProcessing has just already supported it and it does work now!
Example: https://openprocessing.org/sketch/1709870

[jasonjsnell]

I agree, it does look like OpenProcessing is able to use WebBluetooth in its iframe successfully.

@catarak could a similar solution be implemented for the P5 editor?

I'm working on an EEG bluetooth template for ITP / IMA students who are new to code, and I'd love for it to work in the P5 editor rather than having them move over to VS Code.

[raclim]

Hi everyone! I just tried to implement a solution for this, please reopen this issue or create a new one if the Web Bluetooth function still doesn't work!

[tetunori]

@raclim I have confirmed and p5.toio works fine! Thanks for your fixing!