技术讲座：JavaScript 操控‘外设’——探索 WebHID、WebUSB 与 Web Bluetooth API 的安全与实现
引言
随着互联网技术的不断发展，Web 应用逐渐成为人们日常生活中不可或缺的一部分。为了提高用户体验，Web 应用需要与各种外设进行交互，如键盘、鼠标、游戏手柄、传感器等。JavaScript 作为 Web 应用的主要编程语言，提供了多种 API 来实现与外设的交互。本文将深入探讨 WebHID、WebUSB 和 Web Bluetooth API 的安全与实现，帮助开发者更好地利用这些技术。
WebHID API
WebHID（Web Hardware Device API）是用于在 Web 应用中与硬件设备交互的 API。它允许开发者通过 JavaScript 控制键盘、鼠标、游戏手柄等外设。
安全性
WebHID API 的安全性主要体现在以下几个方面：
- 权限控制：在访问外设之前，用户需要授权 Web 应用。这可以通过
navigator.hid.getDevices()方法实现。 - 设备访问控制：开发者可以通过
navigator.hid.openDevice()方法打开指定的设备，但需要用户授权。 - 数据传输加密：WebHID API 使用 TLS 加密数据传输，确保数据安全。
实现示例
以下是一个使用 WebHID API 控制键盘的示例：
// 获取所有连接的设备
navigator.hid.getDevices().then(devices => {
console.log('Connected devices:', devices);
});
// 打开指定的设备
navigator.hid.openDevice('12345678-1234-5678-1234-567812345678').then(device => {
console.log('Device opened:', device);
});
// 向设备发送数据
device.sendReport(0x01, new Uint8Array([0x01, 0x02, 0x03]));WebUSB API
WebUSB API 允许 Web 应用直接与 USB 设备进行交互。它提供了比 WebHID 更广泛的设备访问权限，但也带来了更高的安全风险。
安全性
WebUSB API 的安全性主要体现在以下几个方面：
- 权限控制：在访问 USB 设备之前，用户需要授权 Web 应用。
- 设备访问控制：开发者可以通过
navigator.usb.getDevices()方法获取所有连接的 USB 设备，但需要用户授权。 - 数据传输加密：WebUSB API 使用 TLS 加密数据传输，确保数据安全。
实现示例
以下是一个使用 WebUSB API 与 USB 设备交互的示例：
// 获取所有连接的 USB 设备
navigator.usb.getDevices().then(devices => {
console.log('Connected devices:', devices);
});
// 打开指定的设备
navigator.usb.requestPermission(device).then(permission => {
return device.open();
}).then(device => {
console.log('Device opened:', device);
});
// 向设备发送数据
device.transferOut(0x01, new Uint8Array([0x01, 0x02, 0x03]));Web Bluetooth API
Web Bluetooth API 允许 Web 应用与蓝牙设备进行交互。它支持多种蓝牙设备，如心率传感器、温度传感器等。
安全性
Web Bluetooth API 的安全性主要体现在以下几个方面：
- 权限控制：在访问蓝牙设备之前，用户需要授权 Web 应用。
- 设备访问控制：开发者可以通过
navigator.bluetooth.requestDevice()方法请求用户选择设备。 - 数据传输加密：Web Bluetooth API 使用 TLS 加密数据传输，确保数据安全。
实现示例
以下是一个使用 Web Bluetooth API 与蓝牙设备交互的示例：
// 请求用户选择设备
navigator.bluetooth.requestDevice({
filters: [{services: ['heart_rate']}] // 指定设备服务
}).then(device => {
console.log('Device selected:', device);
});
// 连接设备
device.gatt.connect().then(server => {
console.log('Device connected:', server);
});
// 读取设备数据
server.getPrimaryService('heart_rate').then(service => {
return service.getCharacteristic('heart_rate_measurement');
}).then(characteristic => {
return characteristic.readValue();
}).then(value => {
console.log('Heart rate:', value.getUint16(0));
});总结
WebHID、WebUSB 和 Web Bluetooth API 为 Web 应用提供了丰富的外设交互功能。开发者需要了解这些 API 的安全性和实现方法，以确保应用的安全性。本文介绍了这些 API 的基本概念、安全性和实现示例，希望对开发者有所帮助。