webauthn.bin.coffee - site is not usable

[MarkBennett]

URL: https://webauthn.bin.coffee/

Browser / Version: Firefox 68.0 Operating System: Mac OS X 10.14 Tested Another Browser: Yes

Problem type: Site is not usable Description: Getting credendials from yubikey works if navigator.credentials.create called after YubiKey is inserted, but not after Steps to Reproduce: I'm doing a demo of the new WebAuth APIs. In Chrome I click the "Create Credential" or "Get Assertion" button and then insert my YukiKey and the credentials are read properly.

In Firefox, this only works if I first insert my YubiKey, give it a moment and then click "Create Credential" or "Get Assertion". If I insert the YubiKey after I've clicked "Create Credential" or "Get Assertion" then the YubiKey just outputs a bunch of keys as if it was a USB keyboard.

From a usability perspective, I would expect that calls to navigator.credentials API would work regardless of whether the YubiKey was inserted before or after the call to the navigator.credentials API was made.

I should also note that the interface in Chrome prompting the users to insert their key is much nicer and shows an animation of a user inserting their key into a USB port.

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190501042112
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: false
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: nightly

Console Messages:

[u'[JavaScript Error: "TypeError: setting getter-only property "u2f"" {file: "https://webauthn.bin.coffee/u2f-api.js" line: 17}]\n@https://webauthn.bin.coffee/u2f-api.js:17:11\n', u'[JavaScript Error: "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." {file: "https://webauthn.bin.coffee/" line: 0}]', u'[console.log(Credentials.Create response: , [object PublicKeyCredential]) https://webauthn.bin.coffee/driver.js:555:13]', u'[console.log(:: Attestation CBOR Object ::) https://webauthn.bin.coffee/driver.js:194:11]', u'[console.log(:: Attestation Object Data ::) https://webauthn.bin.coffee/driver.js:273:11]', u'[console.log(RP ID Hash: a642d21b7c6d55e1ce23c5399828d2c749bf6a6ef2fe03cc9e10cdf4ed53088b) https://webauthn.bin.coffee/driver.js:274:11]', u'[console.log(Counter: 00000000 Flags: 65) https://webauthn.bin.coffee/driver.js:275:11]', u'[console.log(:: Attestation Data ::) https://webauthn.bin.coffee/driver.js:295:11]', u'[console.log(AAGUID: 00000000000000000000000000000000) https://webauthn.bin.coffee/driver.js:296:11]', u'[console.log(:: CBOR Public Key Object Data ::) https://webauthn.bin.coffee/driver.js:315:11]', u'[console.log(kty: 2 (EC2)) https://webauthn.bin.coffee/driver.js:316:11]', u'[console.log(alg: -7 (ES256)) https://webauthn.bin.coffee/driver.js:317:11]', u'[console.log(crv: 1 (P256)) https://webauthn.bin.coffee/driver.js:318:11]', u'[console.log(X: 220,46,229,211,69,152,167,169,163,244,85,46,42,216,113,52,247,245,148,107,200,161,138,161,37,213,132,204,50,73,117,132) https://webauthn.bin.coffee/driver.js:319:11]', u'[console.log(Y: 107,244,200,29,74,147,145,7,203,34,80,133,235,150,93,54,184,157,180,173,67,0,29,3,19,59,72,212,234,99,108,14) https://webauthn.bin.coffee/driver.js:320:11]', u'[console.log(Uncompressed (hex): 04dc2ee5d34598a7a9a3f4552e2ad87134f7f5946bc8a18aa125d584cc324975846bf4c81d4a939107cb225085eb965d36b89db4ad43001d03133b48d4ea636c0e) https://webauthn.bin.coffee/driver.js:321:11]']

Submitted in the name of @MarkBennett

From webcompat.com with ❤️

[miketaylr]

Paging @jcjones -- is this a known issue?

[MarkBennett]

Let me know if you need more specific steps to reproduce. I'm just learning the JS WebAuth APIs right now, but noticed this was a big usability difference between Chrome and Firefox. I'm assuming that there could be some behind the scenes USB device monitoring and binding happening to make this work, so I'm assuming this won't be trivial to change but it would be great for improving the ergonomics of this awesome feature.

[softvision-sergiulogigan]

Reping @jcjones

[jcjones]

Thanks for the ping, I rarely see notifications at Github I'm afraid -- my noise level is very high here.

That the UX is not as nice as Chrome is well-known, and I'm trying to gather a coalition of the willing to improve ours.

The mechanics of how this order-of-operations issue works is a little mysterious to me off-hand. It sounds like perhaps our WebAuthn state machine in authenticator-rs isn't aggressive enough, since once the Yubikey gets the notification that it is being asked to sign, it won't do the TOTP "enter text like a keyboard" thing.

I'm going to open an issue over in that Github repo about this, configure my Yubikey to do this again (all of mine have the slots swapped so I don't accidentally insert junk into documents: ykpersonalize -x), and see if I can fix a repro by adjusting the speed the state machine runs. This issue should get linked to there when I mention it.

[MarkBennett]

@jcjones I realize that given the context in your last message, you might not see this, but I've got lots of experience with front-end web dev and a tiny bit with Rust (I've read the Rust book from O'Reilly and worked the example code, no prod apps). Anyway, if I can help in anyway please let me know! Thanks! :)

[miketaylr]

Thanks all -- let's close this issue as a duplicate and hopefully https://github.com/mozilla/authenticator-rs/issues/95 will resolve it.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.