mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-25 04:32:57 -04:00
e2cf3e2c70
This adds Yubico's FIDO2 library and two APIs for working with the "navigator.credentials.create()" function in JavaScript. The GET API uses the library to generate options for the "create()" function, and the POST API decodes and verifies the resulting credential. While the options and response are dict-like, CBOR is necessary to encode some of the byte-level values, which can't be represented in JSON. Much of the code here is based on the Yubico library example [1][2]. Implementation notes: - There are definitely better ways to alert the user about failure, but window.alert() will do for the time being. Using location.reload() is also a bit jarring if the page scrolls, but not a major issue. - Ideally we would use window.fetch() to do AJAX calls, but we don't have a polyfill for this, and we use $.ajax() elsewhere [3]. We need to do a few weird tricks [6] to stop jQuery trashing the data. - The FIDO2 server doesn't serve web requests; it's just a "server" in the sense of WebAuthn terminology. It lives in its own module, since it needs to be initialised with the app / config. - $.ajax returns a promise-like object. Although we've used ".fail()" elsewhere [3], I couldn't find a stub object that supports it, so I've gone for ".catch()", and used a Promise stub object in tests. - WebAuthn only works over HTTPS, but there's an exception for "localhost" [4]. However, the library is a bit too strict [5], so we have to disable origin verification to avoid needing HTTPS for dev work. [1]:c42d9628a4/examples/server/server.py[2]:c42d9628a4/examples/server/static/register.html[3]:91453d3639/app/assets/javascripts/updateContent.js (L33)[4]: https://stackoverflow.com/questions/55971593/navigator-credentials-is-null-on-local-server [5]:c42d9628a4/fido2/rpid.py (L69)[6]: https://stackoverflow.com/questions/12394622/does-jquery-ajax-or-load-allow-for-responsetype-arraybuffer
70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
(function(window) {
|
|
"use strict";
|
|
|
|
window.GOVUK.Modules.RegisterSecurityKey = function() {
|
|
this.start = function(component) {
|
|
$(component)
|
|
.on('click', function(event) {
|
|
event.preventDefault();
|
|
|
|
fetchWebAuthnCreateOptions()
|
|
.then((data) => {
|
|
var options = window.CBOR.decode(data);
|
|
// triggers browser dialogue to select authenticator
|
|
return window.navigator.credentials.create(options);
|
|
})
|
|
.then((credential) => {
|
|
return postWebAuthnCreateResponse(
|
|
credential.response, component.data('csrfToken')
|
|
);
|
|
})
|
|
.then(() => {
|
|
window.location.reload();
|
|
})
|
|
.catch((error) => {
|
|
// there may be other kinds of error we should catch here
|
|
// https://github.com/w3c/webauthn/issues/876
|
|
if (error instanceof DOMException) {
|
|
console.error(error);
|
|
// not all browsers show an error dialogue, so to be safe
|
|
// we manually pop one open here (to be improved in future!)
|
|
alert('Error communicating with device.\n\n' + error.message);
|
|
} else {
|
|
// for web requests we need to manually alert the user
|
|
// $.ajax seems to log by itself, but that's not visible
|
|
alert('Error during registration. Please try again.');
|
|
}
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
function fetchWebAuthnCreateOptions() {
|
|
var xhrOverride = new XMLHttpRequest();
|
|
xhrOverride.responseType = 'arraybuffer';
|
|
|
|
return $.ajax({
|
|
url: '/webauthn/register',
|
|
xhr: () => xhrOverride,
|
|
dataType: 'x-binary',
|
|
converters: { '* x-binary': (value) => value }
|
|
});
|
|
}
|
|
|
|
function postWebAuthnCreateResponse(response, csrf_token) {
|
|
return $.ajax({
|
|
url: '/webauthn/register',
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': csrf_token
|
|
},
|
|
processData: false,
|
|
contentType: 'application/cbor',
|
|
data: window.CBOR.encode({
|
|
attestationObject: new Uint8Array(response.attestationObject),
|
|
clientDataJSON: new Uint8Array(response.clientDataJSON),
|
|
})
|
|
});
|
|
}
|
|
})(window);
|