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 证书文件

cd path/to/devilbox
ls -l ca/

找到 devilbox-ca.crt 文件（在 Windows 上可能是 devilbox-ca.crt 或 devilbox-ca.pem）。

2. 安装 CA 证书到系统

Windows (推荐用于 Edge/Chrome)

双击 devilbox-ca.crt 文件
选择 “安装证书”
存储位置选择 “本地计算机” （需要管理员权限）
证书存储选择 “将所有的证书都放入下列存储” → “浏览” → “受信任的根证书颁发机构”
完成导入，重启浏览器

验证：访问你的项目域名（如 https://my-project.loc），地址栏应显示锁图标且无警告。

macOS (推荐用于 Chrome/Safari)

# 将证书添加到系统钥匙串
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)

# 复制 CA 证书到系统证书目录
sudo cp ca/devilbox-ca.crt /usr/local/share/ca-certificates/devilbox-ca.crt

# 更新证书存储
sudo update-ca-certificates

# 重启浏览器

Firefox 用户：Linux 上 Firefox 使用自己的证书存储，需手动导入：

Firefox → 设置 → 隐私与安全 → 证书 → 查看证书
“证书颁发机构” → 导入 → 选择 devilbox-ca.crt
勾选”信任由此证书颁发机构来标识网站” → 确定

3. 浏览器特定配置

Edge/Chrome (Windows/macOS/Linux)

完成系统证书安装后，重启浏览器即可。Devilbox 的 .loc 域名（或其他自定义域名）将自动通过 HTTPS 访问且无任何证书警告。

Firefox

Firefox 不使用系统证书存储，必须手动导入：

打开 Firefox → about:preferences#privacy
滚动到底部 → “查看证书”
“证书颁发机构”标签页 → “导入”
选择 devilbox-ca.crt
勾选所有信任选项 → 确定

验证配置

验证 HTTPS 访问

启动 Devilbox：docker-compose up
访问你的项目：https://my-project.loc（替换为你的实际域名）
检查：

地址栏显示锁图标 ✅
无证书错误警告 ✅
证书信息中”颁发者”显示为 Devilbox CA ✅

验证 WebAuthn 支持

在浏览器控制台执行：

// 必须返回 true
console.log('isSecureContext:', window.isSecureContext);

// 必须存在 PublicKeyCredential
console.log('PublicKeyCredential:', typeof PublicKeyCredential !== 'undefined');

如果两个条件都满足，WebAuthn 就可以正常工作。

WebAuthn 调试建议

方案一：使用 Devilbox 域名（推荐）

确保 Devilbox CA 已正确安装信任
使用 Devilbox 自动创建的域名访问，如 https://webauthn-project.loc
这是最接近生产环境的调试方式

方案二：使用 localhost

如果使用 localhost 访问，即使使用 HTTP 也被浏览器视为安全上下文：

# 在 Devilbox 中，可通过反向代理配置 localhost 访问
# 或在 docker-compose.override.yml 中添加端口映射

方案三：临时忽略证书（不推荐）

如果必须使用自签名证书且无法安装 CA，可临时启动 Edge 带参数：

"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 是否正确安装？✅

# 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 调试。