fido2: use JSON encoding

Author: xi

README.md

@@ -29,7 +29,7 @@ pip install django-mfa3
     `settings.py` for a full list of settings.
 4.  Register URLs: `path('mfa/', include('mfa.urls', namespace='mfa')`
 5.  The included templates are just examples, so you should [replace them](https://docs.djangoproject.com/en/stable/howto/overriding-templates/) with your own
-6.  FIDO2 requires client side code. You can either implement it yourself or use the included fido2.js (in which case you will have to provide the third party library [cbor-js](https://www.npmjs.com/package/cbor-js)).
+6.  FIDO2 requires client side code. You can either implement it yourself or use the included fido2.js (in which case you will have to provide the third party library [@github/webauthn-json](https://www.npmjs.com/package/@github/webauthn-json)).
 7.  Somewhere in your app, add a link to `'mfa:list'`
 
 ## Enforce MFA

mfa/methods/fido2.py

@@ -1,55 +1,44 @@
-from fido2 import cbor
+import json
+
+from fido2.features import webauthn_json_mapping
 from fido2.server import Fido2Server
 from fido2.utils import websafe_decode
 from fido2.utils import websafe_encode
-from fido2.webauthn import AttestationObject
 from fido2.webauthn import AttestedCredentialData
-from fido2.webauthn import AuthenticatorData
-from fido2.webauthn import CollectedClientData
 from fido2.webauthn import PublicKeyCredentialRpEntity
+from fido2.webauthn import PublicKeyCredentialUserEntity
 
 from .. import settings
 
 name = 'FIDO2'
 
+webauthn_json_mapping.enabled = True
+
 fido2 = Fido2Server(
     PublicKeyCredentialRpEntity(id=settings.DOMAIN, name=settings.SITE_TITLE),
 )
 
 
-def encode(data):
-    return cbor.encode(data).hex()
-
-
-def decode(s):
-    return cbor.decode(bytes.fromhex(s))
-
-
 def get_credentials(user):
     keys = user.mfakey_set.filter(method=name)
     return [AttestedCredentialData(websafe_decode(key.secret)) for key in keys]
 
 
 def register_begin(user):
     registration_data, state = fido2.register_begin(
-        {
-            'id': str(user.id).encode('utf-8'),
-            'name': user.get_username(),
-            'displayName': user.get_full_name(),
-        },
+        PublicKeyCredentialUserEntity(
+            id=str(user.id).encode('utf-8'),
+            name=user.get_username(),
+            display_name=user.get_full_name(),
+        ),
         get_credentials(user),
         user_verification=settings.FIDO2_USER_VERIFICATION,
     )
-    return encode(registration_data), state
+    return json.dumps(dict(registration_data)), state
 
 
 def register_complete(state, request_data):
-    data = decode(request_data)
-    auth_data = fido2.register_complete(
-        state,
-        CollectedClientData(data['clientData']),
-        AttestationObject(data['attestationObject']),
-    )
+    auth_data = fido2.register_complete(state, json.loads(request_data))
     return websafe_encode(auth_data.credential_data)
 
 
@@ -59,16 +48,12 @@ def authenticate_begin(user):
         credentials,
         user_verification=settings.FIDO2_USER_VERIFICATION,
     )
-    return encode(auth_data), state
+    return json.dumps(dict(auth_data)), state
 
 
 def authenticate_complete(state, user, request_data):
-    data = decode(request_data)
     fido2.authenticate_complete(
         state,
         get_credentials(user),
-        data['credentialId'],
-        CollectedClientData(data['clientData']),
-        AuthenticatorData(data['authenticatorData']),
-        data['signature'],
+        json.loads(request_data),
     )

mfa/static/mfa/fido2.js

@@ -1,30 +1,13 @@
 (function() {
-    var encode = function(data) {
-        var buffer = CBOR.encode(data);
-        var arr = new Uint8Array(buffer);
-        return arr.reduce((s, b) => s + b.toString(16).padStart(2, '0'), '');
-    };
-
-    var decode = function(hex) {
-        var arr = new Uint8Array(hex.length / 2);
-        for (var i = 0; i < arr.length; i += 1) {
-            arr[i] = parseInt(hex.substring(i * 2, i * 2 + 2), 16);
-        }
-        return CBOR.decode(arr.buffer);
-    };
-
     var initCreate = function() {
         var form = document.querySelector('form[data-fido2-create]');
         if (form) {
-            var options = decode(form.dataset.fido2Create);
+            var options = webauthnJSON.parseCreationOptionsFromJSON(form.dataset.fido2Create);
             form.addEventListener('submit', function(event) {
                 event.preventDefault();
 
-                navigator.credentials.create(options).then(attestation => {
-                    this.code.value = encode({
-                        'attestationObject': new Uint8Array(attestation.response.attestationObject),
-                        'clientData': new Uint8Array(attestation.response.clientDataJSON),
-                    });
+                webauthnJSON.create(options).then(attestation => {
+                    this.code.value = JSON.stringify(attestation);
                     form.submit();
                 }).catch(alert);
             });
@@ -34,17 +17,12 @@
     var initAuth = function() {
         var form = document.querySelector('form[data-fido2-auth]');
         if (form) {
-            var options = decode(form.dataset.fido2Auth);
+            var options = webauthnJSON.parseRequestOptionsFromJSON(form.dataset.fido2Auth);
             form.addEventListener('submit', function(event) {
                 event.preventDefault();
 
-                navigator.credentials.get(options).then(assertion => {
-                    this.code.value = encode({
-                        'credentialId': new Uint8Array(assertion.rawId),
-                        'authenticatorData': new Uint8Array(assertion.response.authenticatorData),
-                        'clientData': new Uint8Array(assertion.response.clientDataJSON),
-                        'signature': new Uint8Array(assertion.response.signature),
-                    });
+                webauthnJSON.get(options).then(assertion => {
+                    this.code.value = JSON.stringify(assertion);
                     form.submit();
                 }).catch(alert);
             });

mfa/templates/mfa/auth_FIDO2.html

@@ -14,5 +14,5 @@ <h1>Two-factor authentication</h1>
     <a href="{% url 'mfa:auth' 'recovery' %}">Use recovery code instead</a>
 </form>
 
-<script src="{% static 'cbor-js/cbor.js' %}"></script>
+<script src="{% static '@github/webauthn-json/dist/browser-global/webauthn-json.browser-global.js' %}"></script>
 <script src="{% static 'mfa/fido2.js' %}"></script>

mfa/templates/mfa/create_FIDO2.html

@@ -15,5 +15,5 @@
     <button>Create</button>
 </form>
 
-<script src="{% static 'cbor-js/cbor.js' %}"></script>
+<script src="{% static '@github/webauthn-json/dist/browser-global/webauthn-json.browser-global.js' %}"></script>
 <script src="{% static 'mfa/fido2.js' %}"></script>

tests/tests.py

@@ -187,12 +187,6 @@ def test_create(self):
         res = self.client.get('/mfa/create/FIDO2/')
         self.assertEqual(res.status_code, 200)
 
-    def test_encode(self):
-        self.assertEqual(fido2.encode({'foo': [1, 2]}), 'a163666f6f820102')
-
-    def test_decode(self):
-        self.assertEqual(fido2.decode('a163666f6f820102'), {'foo': [1, 2]})
-
     def test_origin_https(self):
         for domain, value, expected in [
             ('example.com', 'https://example.com', True),