DOMException: Public-key credentials for localhost with no-cors Chrome

Question

I'm developing a website with passkey registration. Because I'm getting the challenge from external server with not allowed cors policy, I set up --disable-web-security --disable-gpu. Now I'm trying to create credentials using navigator.credentials.create, but I get the error:

Uncaught (in promise) DOMException: Public-key credentials are only available to HTTPS origins with valid certificates, HTTP origins that fall under 'localhost', or pages served from an extension. See https://chromium.googlesource.com/chromium/src/+/main/content/browser/webauth/origins.md for details

My current script for this is:

function sendChallenge(){
        navigator.credentials.create({
      publicKey: {
        challenge: stringToArrayBuffer( registrationResponse.callbacks[0].output[0].value.challenge),
        rp: { id: "localhost", name: registrationResponse.callbacks[0].output[0].value.relyingPartyName },
        user: {
          id: stringToArrayBuffer(  registrationResponse.callbacks[0].output[0].value.userId),
          name:registrationResponse.callbacks[0].output[0].value.userName,
          displayName: "Carina P. Anand"
        },
        pubKeyCredParams: registrationResponse.callbacks[0].output[0].value._pubKeyCredParams
      }
    });

I've got attached ubikey and my laptop has Windows Hello and fingerprint scanner and it's discovered by my browser. What could I do to solve my problem? Can it be connected with my no-cors browser?

Answer 1

What's the value of window.location.origin in your context? Note that http://localhost is different from http://127.0.0.1 and you'll want the former.