跨域 iframe 启用 webUSB，无需共享权限答案

【问题标题】：Enable webUSB across cross-origin iframes without sharing permissions跨域 iframe 启用 webUSB，无需共享权限
【发布时间】：2022-06-11 04:43:42
【问题描述】：

我正在尝试在包含来自不同来源的沙盒 iframe 的页面上使用 webUSB。我的目标是顶层页面和每个嵌入式上下文都可以使用 webUSB，但不共享权限。相反，他们每个人都必须致电requestDevice 才能访问 USB 设备

默认情况下，顶级页面的权限/webUSB 设备似乎由 iframe 共享。这是我的测试设置。顶级页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top</title>
</head>
<body>
    <button id="button">request</button>
    
    <!-- iframe running on a different domain. See code below -->
    <iframe sandbox="allow-scripts" allow="usb" src="https://.../sub-frame.html"></iframe>

    <script>
        const button = document.getElementById('button');
        button.addEventListener('click', async () => {
            const device = await navigator.usb.requestDevice({ filters: [] });
            console.log(device);
        });
    </script>
</body>
</html>

子帧（来自不同的来源）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded</title>
</head>
<body>
    <button id="button">Log</button>
    <script>
        const button = document.getElementById('button');
        button.addEventListener('click', async () => {
            const devices = await navigator.usb.getDevices();
            console.log(devices);
        });
    </script>
</body>
</html>

在 Chrome 中测试此示例，当顶层页面调用 requestDevice 并且我通过权限流程时，iframe 现在也可以通过调用 navigator.usb.getDevices() 访问设备。我想阻止它。相反，iframe 应该调用requestDevice，然后获取它自己的 USB 设备列表。

如果我改用allow="usb 'self'"，则嵌入页面根本不再与 webUSB api 相交。我查看了 webUSB 和权限规范，但找不到任何方法来完成此操作。

我如何才能在嵌入式上下文中启用 webUSB 之类的功能，但以一种方式隔离每个嵌入式上下文，就像它是另一个顶级文档一样？

【问题讨论】：

标签： html iframe webusb feature-policy

【解决方案1】：

此行为是由 Chromium 功能引起的，该功能在过去几年中已针对各种权限门控 API 实现，称为“permission delegation”。

我不知道 Chromium 项目是否会考虑在嵌入式框架中重新启用 USB 设备权限的单独存储，但可能可以增强 API 以支持对特定设备而不是授予所有设备的权限进行更精细的委派父页面。

请在https://crbug.com/new 上提交功能请求。

【讨论】：