WebUSB/WebBluetooth权限治理（来源白名单/用户手势）最佳实践

背景与价值设备接口权限敏感，需严格治理来源与触发方式，避免越权或钓鱼行为。统一规范来源白名单：仅允许受控域使用设备接口。用户手势：仅在点击等用户手势触发时调用。权限提示：统一提示与撤销入口。核心实现来源与用户手势校验const allowOrigins = new Set(['https://app.example.com'])

function originAllowed(): boolean { try { const u = new URL(document.location.href); return allowOrigins.has(u.origin) } catch { return false } }

async function connectUsb(button: HTMLButtonElement): Promise<boolean> {

if (!originAllowed()) return false

let ok = false

button.addEventListener('click', async () => {

try {

const d = await (navigator as any).usb.requestDevice({ filters: [] })

ok = !!d

} catch { ok = false }

}, { once: true })

button.click()

return ok

}

async function connectBle(button: HTMLButtonElement): Promise<boolean> {

if (!originAllowed()) return false

let ok = false

button.addEventListener('click', async () => {

try {

const d = await (navigator as any).bluetooth.requestDevice({ acceptAllDevices: false, filters: [] })

ok = !!d

} catch { ok = false }

}, { once: true })

button.click()

return ok

}

落地建议在受控来源下并以用户手势触发设备权限，提示用户与提供撤销入口。验证清单是否仅在受控来源与用户手势触发；权限提示与撤销是否可用。