WebAuthn凭证创建能否用IPv4作rp_id？局域网部署报错求助

出现DOMException: The operation is insecure.的核心原因是WebAuthn对运行环境的安全要求：除了localhost是豁免的安全上下文，其他所有部署环境（包括局域网IP）都必须运行在HTTPS协议下，同时rp_id的配置要符合规则。

下面是具体的解决步骤：

• 强制启用HTTPS
  WebAuthn规范要求必须在安全上下文（Secure Context）中运行，而局域网IP默认使用HTTP协议，不属于安全上下文。你需要为Angular应用配置HTTPS：

  1. 生成自签名SSL证书（用于局域网测试）：

     openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
     

  2. 启动Angular应用时指定SSL证书：

     ng serve --host 0.0.0.0 --ssl --ssl-cert ./cert.pem --ssl-key ./key.pem --port 4200
     

  3. 访问应用时使用https://192.168.99.99:4200，首次访问浏览器会提示证书不安全，手动添加信任例外即可。

• 正确配置rp_id
  rp_id必须严格匹配当前访问地址的主机部分（不能带端口号）：

  • 如果你的访问地址是https://192.168.99.99:4200，那么rp_id设置为'192.168.99.99'
  • 确保rp_id不是IP的子集，也不能包含端口或协议前缀

• 验证安全上下文
  在浏览器控制台执行window.isSecureContext，如果返回true，说明环境符合WebAuthn的安全要求；如果返回false，检查HTTPS配置是否生效。

另外需要注意：部分浏览器对自签名证书的兼容性不同，如果遇到信任问题，可以在浏览器的证书管理中手动导入生成的cert.pem并设置为信任。

内容的提问来源于stack exchange，提问作者Frederik Heller