I am writing a webauthn demonstrator following https://webauthn.guide, and it works well when I host my frontend on https://localhost:4200
.’
However, if I host the angular frontend to my local network, and replace rp_id='localhost'
with the ip address I can open the frontend with, say, rp_id='198.168.99.99'
, navigator.credentials.create
always gives DOMException: The operation is insecure.
.
I expected the credential creation to succeed since the ip is part of the URL I open the website with. How can I successfully create the credentials on a website served on my local network?
2
Answers
(Posting as an answer because I can’t comment yet.)
It sounds like you’re running into a security issue. Browsers often treat local IP addresses differently due to security policies. To tackle this, try serving your site using HTTPS on your local network, and make sure the rp_id matches the SSL certificate. Also, double-check that the IP address is listed in your WebAuthn server’s allowed origins. This should help you get past the "operation is insecure" hiccup.
IP addresses cannot be RP IDs. Note the following from the WebAuthn spec: