DevilBox环境消除浏览器的“不安全”网站告警

对于 Devilbox 环境，你**不需要手动配置 TLS 证书**。Devilbox 已经内置了自动化 HTTPS 支持，会自动为每个项目生成有效的 SSL 证书。关键是要让操作系统和浏览器信任 Devilbox 的 Certificate Authority (CA)。 ## Devilbox 的 HTTPS 机制 根据 Devilbox 官方文档，Devilbox 在首次启动时会自动生成一个 CA 证书，保存在 `./ca/` 目录下： ``` path/to/devilbox/ca/ ├── devilbox-ca.crt (CA 公钥证书) ├── devilbox-ca.key (CA 私钥) └── devilbox-ca.srl ``` 每个项目的虚拟主机都会自动获得一个 SSL 证书，并由 Devilbox CA 签名。只需**将 Devilbox CA 证书导入系统或浏览器信任库**，之后所有项目（包括现有和未来创建的）都会自动拥有受信任的 HTTPS 访问。 --- ## 配置步骤 ### 1. 定位 CA 证书文件 ```bash cd path/to/devilbox ls -l ca/ ``` 找到 `devilbox-ca.crt` 文件（在 Windows 上可能是 `devilbox-ca.crt` 或 `devilbox-ca.pem`）。 ### 2. 安装 CA 证书到系统 #### **Windows (推荐用于 Edge/Chrome)** 1. **双击 `devilbox-ca.crt` 文件** 2. 选择 **"安装证书"** 3. 存储位置选择 **"本地计算机"** （需要管理员权限） 4. 证书存储选择 **"将所有的证书都放入下列存储"** → **"浏览"** → **"受信任的根证书颁发机构"** 5. 完成导入，重启浏览器 **验证**：访问你的项目域名（如 `https://my-project.loc`），地址栏应显示锁图标且无警告。 #### **macOS (推荐用于 Chrome/Safari)** ```bash # 将证书添加到系统钥匙串 sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ca/devilbox-ca.crt # 或手动拖拽到"钥匙串访问"的"系统"分类中，然后设置信任 ``` **macOS Big Sur 及以上**： - 打开"钥匙串访问" → "系统" → 拖拽 `devilbox-ca.crt` 到列表 - 右键证书 → "显示简介" → 展开"信任" → 设置为"始终信任" #### **Linux (Ubuntu/Debian)** ```bash # 复制 CA 证书到系统证书目录 sudo cp ca/devilbox-ca.crt /usr/local/share/ca-certificates/devilbox-ca.crt # 更新证书存储 sudo update-ca-certificates # 重启浏览器 ``` **Firefox 用户**：Linux 上 Firefox 使用自己的证书存储，需手动导入： 1. Firefox → 设置 → 隐私与安全 → 证书 → 查看证书 2. "证书颁发机构" → 导入 → 选择 `devilbox-ca.crt` 3. 勾选"信任由此证书颁发机构来标识网站" → 确定 --- ### 3. 浏览器特定配置 #### **Edge/Chrome (Windows/macOS/Linux)** 完成系统证书安装后，重启浏览器即可。Devilbox 的 `.loc` 域名（或其他自定义域名）将自动通过 HTTPS 访问且无任何证书警告。 #### **Firefox** Firefox 不使用系统证书存储，必须手动导入： 1. 打开 Firefox → `about:preferences#privacy` 2. 滚动到底部 → "查看证书" 3. "证书颁发机构"标签页 → "导入" 4. 选择 `devilbox-ca.crt` 5. 勾选所有信任选项 → 确定 --- ## 验证配置 ### 验证 HTTPS 访问 1. 启动 Devilbox：`docker-compose up` 2. 访问你的项目：`https://my-project.loc`（替换为你的实际域名） 3. 检查： - 地址栏显示锁图标 ✅ - 无证书错误警告 ✅ - 证书信息中"颁发者"显示为 Devilbox CA ✅ ### 验证 WebAuthn 支持 在浏览器控制台执行： ```javascript // 必须返回 true console.log('isSecureContext:', window.isSecureContext); // 必须存在 PublicKeyCredential console.log('PublicKeyCredential:', typeof PublicKeyCredential !== 'undefined'); ``` 如果两个条件都满足，WebAuthn 就可以正常工作。 --- ## WebAuthn 调试建议 ### 方案一：使用 Devilbox 域名（推荐） 1. 确保 Devilbox CA 已正确安装信任 2. 使用 Devilbox 自动创建的域名访问，如 `https://webauthn-project.loc` 3. 这是最接近生产环境的调试方式 ### 方案二：使用 localhost 如果使用 `localhost` 访问，即使使用 HTTP 也被浏览器视为安全上下文： ```bash # 在 Devilbox 中，可通过反向代理配置 localhost 访问 # 或在 docker-compose.override.yml 中添加端口映射 ``` ### 方案三：临时忽略证书（不推荐） 如果必须使用自签名证书且无法安装 CA，可临时启动 Edge 带参数： ```bash "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --ignore-certificate-errors --user-data-dir=C:\temp\edge_dev ``` **注意**：WebAuthn 可能仍无法工作，因为 `isSecureContext` 可能仍为 false。 --- ## 常见问题 ### Q: 导入 CA 后浏览器仍显示证书错误？ - **检查**：是否重启了浏览器？ - **检查**：访问的域名是否匹配 Devilbox 配置的域名（默认 `.loc`）？ - **验证**：在地址栏点击锁图标 → 证书 → 查看路径，确认根证书是 Devilbox CA ### Q: Firefox 正常但 Edge/Chrome 仍报错？ - **原因**：Edge/Chrome 可能未正确读取系统证书存储 - **解决**：在 Windows 上，确保证书导入到"本地计算机"而非"当前用户"的存储中 ### Q: 如何验证 CA 是否正确安装？ ```bash # macOS security find-certificate -c "Devilbox CA" # Linux ls /etc/ssl/certs/ | grep devilbox # Windows certmgr.msc → 受信任的根证书颁发机构 → 证书 → 查找 "Devilbox CA" ``` --- ## 总结 Devilbox 已经为你完成了 90% 的工作。你只需**将 `devilbox-ca.crt` 安装到操作系统或浏览器的信任根证书存储**，然后所有项目都会自动拥有受信任的 HTTPS 访问。这是比手动生成自签名证书更优雅、更安全的解决方案，特别适合 WebAuthn 这类对安全上下文要求严格的 API 调试。