iFrame 沙箱限制与 Web Serial 接口调用的穿透解决方案

许多工控平台和物联网监控大屏采用 iframe 嵌套形式来加载第三方在线工具。但由于安全审计限制，网页调用 Web Serial API 会默认受阻。根因通常是父级页面的 Permission-Policy（权限策略） 未对 iframe 授权 serial。

正确嵌入方式 在父页面 HTML 中显式写： ``html <iframe src="https://www.serialpro.top/" allow="serial"></iframe> ` allow="serial" 表示父窗口信任该子页面，并把串口物理访问权向下传递。只有配置后，iframe 内调用 navigator.serial.requestPort()` 时，用户才能看到系统原生端口选择框。

常见踩坑 - 跨域 + 无 allow：navigator.serial 为 undefined 或 requestPort 直接拒绝。 - 沙箱属性冲突：若同时写了 sandbox 且未放行必要能力，仍可能失败；尽量避免过度 sandbox，或按规范组合权限。 - 非安全上下文：iframe 自身也必须是 HTTPS 或 localhost，否则 Secure Context 不满足。 - 移动端 / 非 Chromium：Web Serial 本身不可用，与 iframe 无关。 联调建议：先在顶层标签页验证工具可连串口，再嵌 iframe；浏览器开发者工具 Application / Permissions 可核对策略。完成授权后，工控大屏即可内嵌免安装串口助手，而无需另装桌面软件。