ID: WEB-SERIAL-02
Web Serial API 浏览器接口与配置 (Browser API)
Web Serial 必须 HTTPS:Secure Context 报错与局域网调试解决
打开在线串口调试工具
需 Chrome / Edge 桌面浏览器 · 串口数据仅在本地处理
在 http://192.168.x.x 或纯 HTTP 域名打开串口网页时,navigator.serial 常为 undefined,控制台提示必须在 Secure Context。这是浏览器对硬件 API 的硬性安全策略,不是你代码写错一行那么简单。
为什么强制安全上下文
串口可直达 PLC、工控仪、下载口。若明文 HTTP 可被中间人注入脚本,攻击者可能静默刷固件或搅乱产线。因此 Web Serial 仅允许:
1. https:// 合法证书站点
2. http://localhost / http://127.0.0.1(本地豁免)
开发期临时方案
局域网 HTTP 调试可在 Chrome 打开:
chrome://flags/#unsafely-treat-insecure-origin-as-secure
填入如 http://192.168.1.20:3001,Enable 后重启浏览器。仅限开发,不要当生产方案。
生产部署
- 全站 HTTPS(Let’s Encrypt / 云厂商证书)。
- 避免混合内容:页面 https 内嵌 http 资源。
- iframe 嵌入还需 allow="serial" 与权限策略。
对照检查 | 环境 | 预期 | |---|---| | https://www.serialpro.top | 可用 | | http://localhost:3001 | 可用 | | http://局域网IP | 默认不可用 | | 非 Chromium | 无 API | 遇到 Secure Context 报错:先换 HTTPS 或 localhost,再查代码。这是 Web 串口调试上线的第一道门禁。
打开在线串口调试工具
在本页完成排查后,用网页串口直接验证收发