Allow Web Bluetooth and Web Serial within iframes

[ErikMejerHansen]

What

Allow livebooks to use the Web Bluetooth and Web Serial APIs.
Previously discussed here: #1331

How

Both Web Bluetooth and Web Serial are disallowed for cross origin iframes unless enabled in the iframe allow attribute.

Verification

Using the attached Livebook before these changes and clicking the "Open Web Bluetooth Dialog" and "Open Web Serial Dialog" will result in Permissions policy violation: bluetooth is not allowed in this document. and Permissions policy violation: serial is not allowed in this document errors.

After these changes the Web Bluetooth and Web Serial dialogs open as expected (in supported browsers).

Web BLE and Web Serial Livebook

WebBluetooth & WebSerial

Mix.install([
  {:kino, "~> 0.12.0"}
])

Web Bluetooth

defmodule WebBLE do
  use Kino.JS

  def web_ble() do
    Kino.JS.new(__MODULE__, "")
  end

  asset "main.js" do
    """
       export function init(ctx) {
        ctx.root.innerHTML = `
          <button id="bleButton">Open Web Bluetooth Dialog</button>
       `;

       var bleDialogButtonEl = document.getElementById("bleButton");
       
       bleDialogButtonEl.addEventListener("click", (_event) => {
         navigator.bluetooth.requestDevice({ acceptAllDevices: true});
       }); 
    }
    """
  end
end

WebBLE.web_ble()

Web Serial

defmodule WebSerial do
  use Kino.JS

  def web_serial() do
    Kino.JS.new(__MODULE__, "")
  end

  asset "main.js" do
    """
       export function init(ctx) {
        ctx.root.innerHTML = `
          <button id="serialButton">Open Web Serial Dialog</button>
       `;

       var serialDialogButtonEl = document.getElementById("serialButton");
       
       serialDialogButtonEl.addEventListener("click", (_event) => {
         navigator.serial.requestPort({ acceptAllDevices: true});
       }); 
    }
    """
  end
end

WebSerial.web_serial()

[CLAassistant]

All committers have signed the CLA.

[jonatanklosko]

Thanks :)