探讨 `WebHID` 和 `WebUSB` API 在与特定硬件设备进行底层通信时的安全模型和使用场景。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，很高兴今天能和大家聊聊WebHID和WebUSB这两个“硬核”的Web API。它们就像浏览器伸出的两只手，可以直接和电脑上的硬件设备握手，想想是不是有点小激动？不过，直接接触硬件，安全问题可不能马虎，所以咱们今天就来好好剖析一下它们的安全模型，顺便再看看它们各自擅长的领域。

开场白：硬件，你好！Web，你好！

Web技术发展到现在，已经不满足于仅仅在屏幕上展示信息了。它开始渴望和现实世界互动，而WebHID和WebUSB就是实现这种互动的桥梁。

想象一下，如果你想用浏览器控制一个炫酷的机械键盘，或者读取一个专业测量仪的数据，以前这几乎是不可能完成的任务，但有了WebHID和WebUSB，一切就变得简单多了。

WebHID：人类友好设备，你好！

首先，我们来认识一下WebHID。HID，全称Human Interface Device，也就是“人类界面设备”。顾名思义，它主要用来和人进行交互，比如键盘、鼠标、游戏手柄等等。WebHID API允许网页直接访问这些HID设备，而不需要安装任何驱动程序，是不是很方便？

WebHID的安全模型：小心驶得万年船

直接访问硬件，安全问题是重中之重。WebHID的安全模型主要体现在以下几个方面：

需要用户授权： 这就像你去别人家做客，总要先敲门问问主人是不是欢迎你吧？网页要访问HID设备，必须先获得用户的明确授权。浏览器会弹出一个对话框，列出可用的HID设备，用户可以选择允许哪个网站访问哪个设备。这个过程是透明且可控的，用户可以随时撤销授权。

// 请求访问HID设备
async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [{ usagePage: 0x0001, usage: 0x0006 }] // 键盘
    });

    if (devices.length > 0) {
      const device = devices[0];
      await device.open();
      console.log("HID设备已连接:", device.productName);

      device.addEventListener("inputreport", (event) => {
        const { data, reportId } = event;
        // 处理来自设备的数据
        console.log("收到数据:", data, "Report ID:", reportId);
      });

      device.oninputreport = (event) => {
          const { data, reportId } = event;
          console.log("收到数据(oninputreport):", data, "Report ID:", reportId);
      }

      device.addEventListener("disconnect", () => {
          console.log("HID设备已断开连接");
      });
    } else {
      console.log("未选择任何HID设备");
    }
  } catch (error) {
    console.error("请求HID设备失败:", error);
  }
}

// 调用请求函数
requestHIDDevice();

代码解释：

navigator.hid.requestDevice()：这个函数会弹出设备选择对话框，filters参数用来指定要查找的设备类型。在这里，我们指定了usagePage为0x0001，usage为0x0006，表示键盘。
device.open()：打开设备连接。
device.addEventListener("inputreport", ...): 监听设备发来的数据，当设备有数据发送时，会触发这个事件。
device.addEventListener("disconnect", ...): 监听设备断开连接事件。

HTTPS only： 就像你去银行办理业务，总要确保通信是加密的吧？WebHID API只能在HTTPS协议下使用，这意味着所有的数据传输都是加密的，可以有效防止中间人攻击。
Feature Policy控制： Feature Policy允许网站控制哪些功能可以在其页面中使用。通过Feature Policy，网站可以限制WebHID API的使用，防止恶意脚本滥用。
权限管理： 浏览器提供了完善的权限管理机制，用户可以随时查看和修改网站的HID设备访问权限。

WebHID的适用场景：人机交互的利器

WebHID最适合那些需要和用户进行直接交互的设备，比如：

自定义键盘： 你可以用WebHID来编写一个网页，让用户自定义键盘的按键功能，或者设置炫酷的灯光效果。
游戏手柄： Web游戏可以直接通过WebHID读取游戏手柄的输入，实现更流畅的游戏体验。
专业控制器： 一些专业的控制器，比如DJ控制器、飞行摇杆等，也可以通过WebHID和网页进行交互，实现更强大的功能。

WebUSB：通用串行总线，你好！

接下来，我们来认识一下WebUSB。USB，全称Universal Serial Bus，也就是“通用串行总线”。它是一种通用的接口标准，几乎所有的电脑外设都使用USB接口进行连接。WebUSB API允许网页直接访问USB设备，这为Web应用打开了一扇通往硬件世界的大门。

WebUSB的安全模型：责任越大，风险越大

WebUSB比WebHID更加强大，但也意味着它面临的安全风险也更大。WebUSB的安全模型主要体现在以下几个方面：

需要用户授权： 和WebHID一样，WebUSB也需要用户的明确授权。浏览器会弹出一个对话框，列出可用的USB设备，用户可以选择允许哪个网站访问哪个设备。
```
// 请求访问USB设备
async function requestUSBDevice() {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [{ vendorId: 0xcafe, productId: 0xbabe }] // 指定厂商ID和产品ID
    });

    if (device) {
      await device.open();
      await device.selectConfiguration(1); // 选择配置
      await device.claimInterface(0); // 声明接口

      console.log("USB设备已连接:", device.productName);

      // 发送数据
      const data = new Uint8Array([0x01, 0x02, 0x03]);
      await device.transferOut(1, data); // Endpoint 1

      // 接收数据
      const result = await device.transferIn(2, 64); // Endpoint 2, 64 bytes
      console.log("收到数据:", result.data);

      device.addEventListener("disconnect", () => {
          console.log("USB设备已断开连接");
      });

    } else {
      console.log("未选择任何USB设备");
    }
  } catch (error) {
    console.error("请求USB设备失败:", error);
  }
}

// 调用请求函数
requestUSBDevice();
```
代码解释：
- navigator.usb.requestDevice()：这个函数会弹出设备选择对话框，filters参数用来指定要查找的设备类型。在这里，我们指定了vendorId（厂商ID）和productId（产品ID）。
- device.open()：打开设备连接。
- device.selectConfiguration(1)：选择配置。USB设备可以有多个配置，你需要选择一个合适的配置。
- device.claimInterface(0)：声明接口。USB设备可以有多个接口，你需要声明一个你想要使用的接口。
- device.transferOut(1, data)：向设备发送数据。transferOut函数用于发送数据，第一个参数是Endpoint，第二个参数是要发送的数据。
- device.transferIn(2, 64)：从设备接收数据。transferIn函数用于接收数据，第一个参数是Endpoint，第二个参数是要接收的字节数。
- device.addEventListener("disconnect", ...): 监听设备断开连接事件。
HTTPS only： 和WebHID一样，WebUSB也只能在HTTPS协议下使用。
Feature Policy控制： 同样，Feature Policy也可以用来限制WebUSB API的使用。
设备制造商的责任： WebUSB的安全很大程度上取决于设备制造商。制造商需要确保其USB设备的设计是安全的，并且不会受到恶意软件的攻击。
源隔离（Origin Isolation）： 浏览器可以通过源隔离技术，将不同的网站隔离在不同的进程中，从而防止恶意网站利用WebUSB攻击其他网站。

WebUSB的适用场景：无限可能

WebUSB的应用场景非常广泛，几乎所有的USB设备都可以通过WebUSB进行控制，比如：

3D打印机： 你可以用WebUSB来控制3D打印机，直接在浏览器中进行打印操作。
示波器： 你可以用WebUSB来读取示波器的数据，进行数据分析和可视化。
工业控制设备： WebUSB可以用于控制各种工业控制设备，实现远程监控和自动化控制。
固件更新： 可以使用WebUSB来进行设备的固件更新。

WebHID vs WebUSB：选择困难症？

WebHID和WebUSB都是强大的Web API，它们都可以用来和硬件设备进行交互。那么，我们应该选择哪个呢？这里给大家提供一些参考：

特性	WebHID	WebUSB
适用设备	人机交互设备 (键盘、鼠标、手柄等)	通用USB设备 (3D打印机、示波器等)
复杂度	相对简单	相对复杂
安全风险	相对较低	相对较高
驱动需求	无需驱动	可能需要驱动（取决于设备）
应用场景	人机交互、游戏、自定义设备	工业控制、科学仪器、固件更新、通用USB设备

简单来说：

如果你的设备是标准的HID设备，并且只需要进行简单的人机交互，那么WebHID是更好的选择。
如果你的设备是通用的USB设备，并且需要进行更底层的控制，那么WebUSB是更好的选择。
如果你的设备同时支持HID和USB协议，那么你可以根据具体的需求选择其中一个。

安全建议：防患于未然

在使用WebHID和WebUSB时，一定要注意安全问题。这里给大家提供一些建议：

只授权信任的网站： 不要轻易授权网站访问你的硬件设备。
使用HTTPS协议： 确保你访问的网站使用HTTPS协议。
关注浏览器安全更新： 及时更新你的浏览器，以获取最新的安全补丁。
了解设备的安全风险： 在使用WebUSB时，要了解你的设备可能存在的安全风险。
开发者安全编码： 开发者在使用WebHID和WebUSB时，要遵循安全编码规范，防止出现安全漏洞。例如，对接收到的数据进行验证，防止缓冲区溢出等问题。

代码示例：数据验证

// 数据验证示例 (WebUSB)
async function handleData(data) {
  // 检查数据长度
  if (data.byteLength > MAX_DATA_LENGTH) {
    console.error("数据长度超过限制");
    return;
  }

  // 检查数据类型
  if (!(data instanceof Uint8Array)) {
    console.error("数据类型不正确");
    return;
  }

  // 检查数据内容 (例如，范围检查)
  for (let i = 0; i < data.byteLength; i++) {
    if (data[i] < MIN_VALUE || data[i] > MAX_VALUE) {
      console.error("数据超出范围");
      return;
    }
  }

  // 如果所有检查都通过，则处理数据
  console.log("数据验证通过:", data);
  // ...
}

// 接收数据 (WebUSB)
async function receiveData(device, endpoint, length) {
  try {
    const result = await device.transferIn(endpoint, length);
    if (result.status === "ok") {
      await handleData(result.data); // 对接收到的数据进行验证
    } else {
      console.error("数据传输失败:", result.status);
    }
  } catch (error) {
    console.error("接收数据失败:", error);
  }
}

总结：拥抱硬件，安全第一

WebHID和WebUSB为Web应用打开了一扇通往硬件世界的大门，它们可以让我们用浏览器控制各种各样的设备，实现更强大的功能。但是，直接访问硬件也带来了新的安全挑战。我们必须充分了解它们的安全模型，采取必要的安全措施，才能安全地使用这些强大的API。

希望今天的讲座能帮助大家更好地理解WebHID和WebUSB，并在实际应用中更加安全。谢谢大家！

发表回复 取消回复

发表回复取消回复