Refactored WebAuthn with Windows Hello support

.appveyor.yml

@@ -44,7 +44,7 @@ install:
     - choco install composer
     - cd C:\projects\joomla-cms
     - refreshenv
-    - composer install --no-progress --profile
+    - composer install --no-progress --profile --ignore-platform-req=ext-sodium
 before_test:
 #  Database setup for MySQL via PowerShell tools
   - >

administrator/language/en-GB/plg_system_webauthn.ini

@@ -18,17 +18,21 @@ PLG_SYSTEM_WEBAUTHN_ERR_CREDENTIAL_ID_ALREADY_IN_USE="Cannot save credentials. T
 PLG_SYSTEM_WEBAUTHN_ERR_EMPTY_USERNAME="You need to enter your username (but NOT your password) before selecting the Web Authentication login button."
 PLG_SYSTEM_WEBAUTHN_ERR_INVALID_USERNAME="The specified username does not correspond to a user account that has enabled passwordless login on this site."
 PLG_SYSTEM_WEBAUTHN_ERR_LABEL_NOT_SAVED="Could not save the new label"
+PLG_SYSTEM_WEBAUTHN_ERR_NOT_DELETED="Could not remove the authenticator"
 PLG_SYSTEM_WEBAUTHN_ERR_NO_BROWSER_SUPPORT="Sorry, your browser does not support the W3C Web Authentication standard for passwordless logins or your site is not being served over HTTPS with a valid certificate, signed by a Certificate Authority your browser trusts. You will need to log into this site using your username and password."
 PLG_SYSTEM_WEBAUTHN_ERR_NO_STORED_CREDENTIAL="Cannot find the stored credentials for your login authenticator."
-PLG_SYSTEM_WEBAUTHN_ERR_NOT_DELETED="Could not remove the authenticator"
 PLG_SYSTEM_WEBAUTHN_ERR_USER_REMOVED="The user for this authenticator seems to no longer exist on this site."
+PLG_SYSTEM_WEBAUTHN_ERR_XHR_INITCREATE="Cannot get the authenticator registration information from your site."
+PLG_SYSTEM_WEBAUTHN_FIELD_ATTESTATION_SUPPORT_DESC="Only allow authenticators with verifiable cryptographic signatures to be used for WebAuthn logins. Strongly recommended for high security environments. Requires your site to be able to access <code>https://mds.fidoalliance.org/</code> directly, a writeable cache directory, the system temporary directory being writeable by PHP, and the OpenSSL extension. May prevent some cheaper, non-certified authenticators from working at all. Disabling it also prevents Joomla from identifying the make and model of the authenticator you are using (no icon will be displayed next to the Authenticator Name).<br/><strong>Pro tip:</strong> If you are behind a firewall you can place the data downloaded from <a href='https://mds.fidoalliance.org/' target='_blank'>the FIDO Alliance</a> into the file <code>administrator/cache/fido.jwt</code> for this feature to work properly."
+PLG_SYSTEM_WEBAUTHN_FIELD_ATTESTATION_SUPPORT_LABEL="Attestation Support"
 PLG_SYSTEM_WEBAUTHN_FIELD_DESC="Lets you manage passwordless login methods using the W3C Web Authentication standard. You need a supported browser and authenticator (eg Google Chrome or Firefox with a FIDO2 certified security key).<br><br><strong>MacOS/iOS/watchOS:</strong> Touch/Face ID.<br><strong>Windows:</strong> Hello (Fingerprint / Facial Recognition / PIN).<br><strong>Android:</strong> Biometric screen lock.<br><br>You can find more details in the <a href=\"https://docs.joomla.org/Special:MyLanguage/WebAuthn_Passwordless_Login\" target=\"_blank\" rel=\"noopener noreferrer\">WebAuthn Passwordless Login documentation</a>."
 PLG_SYSTEM_WEBAUTHN_FIELD_LABEL="W3C Web Authentication (WebAuthn) Login"
 PLG_SYSTEM_WEBAUTHN_FIELD_N_AUTHENTICATORS_REGISTERED="%d WebAuthn authenticators already set up: %s"
 PLG_SYSTEM_WEBAUTHN_FIELD_N_AUTHENTICATORS_REGISTERED_0="No WebAuthn authenticator has been set up yet"
 PLG_SYSTEM_WEBAUTHN_FIELD_N_AUTHENTICATORS_REGISTERED_1="One WebAuthn authenticator already set up: %2$s"
 PLG_SYSTEM_WEBAUTHN_HEADER="W3C Web Authentication (WebAuthn) Login"
-PLG_SYSTEM_WEBAUTHN_LBL_DEFAULT_AUTHENTICATOR_LABEL="Authenticator added on %s"
+PLG_SYSTEM_WEBAUTHN_LBL_DEFAULT_AUTHENTICATOR="Generic Authenticator"
+PLG_SYSTEM_WEBAUTHN_LBL_DEFAULT_AUTHENTICATOR_LABEL="%s added on %s"
 PLG_SYSTEM_WEBAUTHN_LOGIN_DESC="Login without a password using the W3C Web Authentication (WebAuthn) standard in compatible browsers. You need to have already set up WebAuthn authentication in your user profile."
 PLG_SYSTEM_WEBAUTHN_LOGIN_LABEL="Web Authentication"
 PLG_SYSTEM_WEBAUTHN_MANAGE_BTN_ADD_LABEL="Add New Authenticator"

build/media_source/plg_system_webauthn/js/login.es6.js

@@ -120,10 +120,8 @@ window.Joomla = window.Joomla || {};
    * internal page which handles the login server-side.
    *
    * @param {  Object}  publicKey     Public key request options, returned from the server
-   * @param   {String}  callbackUrl  The URL we will use to post back to the server. Must include
-   *   the anti-CSRF token.
    */
-  const handleLoginChallenge = (publicKey, callbackUrl) => {
+  const handleLoginChallenge = (publicKey) => {
     const arrayToBase64String = (a) => btoa(String.fromCharCode(...a));
 
     const base64url2base64 = (input) => {
@@ -172,7 +170,8 @@ window.Joomla = window.Joomla || {};
         };
 
         // Send the response to your server
-        window.location = `${callbackUrl}&option=com_ajax&group=system&plugin=webauthn&`
+        const paths = Joomla.getOptions('system.paths');
+        window.location = `${paths ? `${paths.base}/index.php` : window.location.pathname}?${Joomla.getOptions('csrf.token')}=1&option=com_ajax&group=system&plugin=webauthn&`
           + `format=raw&akaction=login&encoding=redirect&data=${
             btoa(JSON.stringify(publicKeyCredential))}`;
       })
@@ -187,13 +186,11 @@ window.Joomla = window.Joomla || {};
    * for the user.
    *
    * @param   {string}   formId       The login form's or login module's HTML ID
-   * @param   {string}   callbackUrl  The URL we will use to post back to the server. Must include
-   *   the anti-CSRF token.
    *
    * @returns {boolean}  Always FALSE to prevent BUTTON elements from reloading the page.
    */
   // eslint-disable-next-line no-unused-vars
-  Joomla.plgSystemWebauthnLogin = (formId, callbackUrl) => {
+  Joomla.plgSystemWebauthnLogin = (formId) => {
     // Get the username
     const elFormContainer = document.getElementById(formId);
     const elUsername = lookForField(elFormContainer, 'input[name=username]');
@@ -226,9 +223,14 @@ window.Joomla = window.Joomla || {};
       username,
       returnUrl,
     };
+    postBackData[Joomla.getOptions('csrf.token')] = 1;
+
+    const paths = Joomla.getOptions('system.paths');
 
     Joomla.request({
-      url: callbackUrl,
+      url: `${paths ? `${paths.base}/index.php` : window.location.pathname}?${Joomla.getOptions(
+        'csrf.token',
+      )}=1`,
       method: 'POST',
       data: interpolateParameters(postBackData),
       onSuccess(rawResponse) {
@@ -243,7 +245,7 @@ window.Joomla = window.Joomla || {};
            */
         }
 
-        handleLoginChallenge(jsonData, callbackUrl);
+        handleLoginChallenge(jsonData);
       },
       onError: (xhr) => {
         handleLoginError(`${xhr.status} ${xhr.statusText}`);
@@ -258,7 +260,7 @@ window.Joomla = window.Joomla || {};
   if (loginButtons.length) {
     loginButtons.forEach((button) => {
       button.addEventListener('click', ({ currentTarget }) => {
-        Joomla.plgSystemWebauthnLogin(currentTarget.getAttribute('data-webauthn-form'), currentTarget.getAttribute('data-webauthn-url'));
+        Joomla.plgSystemWebauthnLogin(currentTarget.getAttribute('data-webauthn-form'));
       });
     });
   }

build/media_source/plg_system_webauthn/js/management.es6.js

@@ -62,29 +62,52 @@ window.Joomla = window.Joomla || {};
    * Posts the credentials to the URL defined in post_url using AJAX.
    * That URL must re-render the management interface.
    * These contents will replace the element identified by the interface_selector CSS selector.
-   *
-   * @param   {String}  storeID            CSS ID for the element storing the configuration in its
-   *                                        data properties
-   * @param   {String}  interfaceSelector  CSS selector for the GUI container
    */
   // eslint-disable-next-line no-unused-vars
-  Joomla.plgSystemWebauthnCreateCredentials = (storeID, interfaceSelector) => {
+  Joomla.plgSystemWebauthnInitCreateCredentials = () => {
     // Make sure the browser supports Webauthn
     if (!('credentials' in navigator)) {
       Joomla.renderMessages({ error: [Joomla.Text._('PLG_SYSTEM_WEBAUTHN_ERR_NO_BROWSER_SUPPORT')] });
 
       return;
     }
 
-    // Extract the configuration from the store
-    const elStore = document.getElementById(storeID);
+    // Get the public key creation options through AJAX.
+    const paths = Joomla.getOptions('system.paths');
+    const postURL = `${paths ? `${paths.base}/index.php` : window.location.pathname}`;
 
-    if (!elStore) {
-      return;
-    }
+    const postBackData = {
+      option: 'com_ajax',
+      group: 'system',
+      plugin: 'webauthn',
+      format: 'json',
+      akaction: 'initcreate',
+      encoding: 'json',
+    };
+    postBackData[Joomla.getOptions('csrf.token')] = 1;
+
+    Joomla.request({
+      url: postURL,
+      method: 'POST',
+      data: interpolateParameters(postBackData),
+      onSuccess(response) {
+        try {
+          const publicKey = JSON.parse(response);
+
+          Joomla.plgSystemWebauthnCreateCredentials(publicKey);
+        } catch (exception) {
+          handleCreationError(Joomla.Text._('PLG_SYSTEM_WEBAUTHN_ERR_XHR_INITCREATE'));
+        }
+      },
+      onError: (xhr) => {
+        handleCreationError(`${xhr.status} ${xhr.statusText}`);
+      },
+    });
+  };
 
-    const publicKey = JSON.parse(atob(elStore.dataset.public_key));
-    const postURL = atob(elStore.dataset.postback_url);
+  Joomla.plgSystemWebauthnCreateCredentials = (publicKey) => {
+    const paths = Joomla.getOptions('system.paths');
+    const postURL = `${paths ? `${paths.base}/index.php` : window.location.pathname}`;
 
     const arrayToBase64String = (a) => btoa(String.fromCharCode(...a));
 
@@ -137,13 +160,14 @@ window.Joomla = window.Joomla || {};
           encoding: 'raw',
           data: btoa(JSON.stringify(publicKeyCredential)),
         };
+        postBackData[Joomla.getOptions('csrf.token')] = 1;
 
         Joomla.request({
           url: postURL,
           method: 'POST',
           data: interpolateParameters(postBackData),
           onSuccess(responseHTML) {
-            const elements = document.querySelectorAll(interfaceSelector);
+            const elements = document.querySelectorAll('#plg_system_webauthn-management-interface');
 
             if (!elements) {
               return;
@@ -154,6 +178,7 @@ window.Joomla = window.Joomla || {};
             elContainer.outerHTML = responseHTML;
 
             Joomla.plgSystemWebauthnInitialize();
+            Joomla.plgSystemWebauthnReactivateTooltips();
           },
           onError: (xhr) => {
             handleCreationError(`${xhr.status} ${xhr.statusText}`);
@@ -175,15 +200,9 @@ window.Joomla = window.Joomla || {};
    *                              properties
    */
   // eslint-disable-next-line no-unused-vars
-  Joomla.plgSystemWebauthnEditLabel = (that, storeID) => {
-    // Extract the configuration from the store
-    const elStore = document.getElementById(storeID);
-
-    if (!elStore) {
-      return false;
-    }
-
-    const postURL = atob(elStore.dataset.postback_url);
+  Joomla.plgSystemWebauthnEditLabel = (that) => {
+    const paths = Joomla.getOptions('system.paths');
+    const postURL = `${paths ? `${paths.base}/index.php` : window.location.pathname}`;
 
     // Find the UI elements
     const elTR = that.parentElement.parentElement;
@@ -198,10 +217,14 @@ window.Joomla = window.Joomla || {};
     // Show the editor
     const oldLabel = elLabelTD.innerText;
 
+    const elContainer = document.createElement('div');
+    elContainer.className = 'webauthnManagementEditorRow d-flex gap-2';
+
     const elInput = document.createElement('input');
     elInput.type = 'text';
     elInput.name = 'label';
     elInput.defaultValue = oldLabel;
+    elInput.className = 'form-control';
 
     const elSave = document.createElement('button');
     elSave.className = 'btn btn-success btn-sm';
@@ -220,6 +243,7 @@ window.Joomla = window.Joomla || {};
           credential_id: credentialId,
           new_label: elNewLabel,
         };
+        postBackData[Joomla.getOptions('csrf.token')] = 1;
 
         Joomla.request({
           url: postURL,
@@ -268,9 +292,10 @@ window.Joomla = window.Joomla || {};
     }, false);
 
     elLabelTD.innerHTML = '';
-    elLabelTD.appendChild(elInput);
-    elLabelTD.appendChild(elSave);
-    elLabelTD.appendChild(elCancel);
+    elContainer.appendChild(elInput);
+    elContainer.appendChild(elSave);
+    elContainer.appendChild(elCancel);
+    elLabelTD.appendChild(elContainer);
     elEdit.disabled = true;
     elDelete.disabled = true;
 
@@ -281,19 +306,15 @@ window.Joomla = window.Joomla || {};
    * Delete button
    *
    * @param   {Element} that      The button being clicked
-   * @param   {String}  storeID  CSS ID for the element storing the configuration in its data
-   *                              properties
    */
   // eslint-disable-next-line no-unused-vars
-  Joomla.plgSystemWebauthnDelete = (that, storeID) => {
-    // Extract the configuration from the store
-    const elStore = document.getElementById(storeID);
-
-    if (!elStore) {
+  Joomla.plgSystemWebauthnDelete = (that) => {
+    if (!window.confirm(Joomla.Text._('JGLOBAL_CONFIRM_DELETE'))) {
       return false;
     }
 
-    const postURL = atob(elStore.dataset.postback_url);
+    const paths = Joomla.getOptions('system.paths');
+    const postURL = `${paths ? `${paths.base}/index.php` : window.location.pathname}`;
 
     // Find the UI elements
     const elTR = that.parentElement.parentElement;
@@ -317,6 +338,7 @@ window.Joomla = window.Joomla || {};
       akaction: 'delete',
       credential_id: credentialId,
     };
+    postBackData[Joomla.getOptions('csrf.token')] = 1;
 
     Joomla.request({
       url: postURL,
@@ -354,6 +376,45 @@ window.Joomla = window.Joomla || {};
     return false;
   };
 
+  Joomla.plgSystemWebauthnReactivateTooltips = () => {
+    const tooltips = Joomla.getOptions('bootstrap.tooltip');
+    if (typeof tooltips === 'object' && tooltips !== null) {
+      Object.keys(tooltips).forEach((tooltip) => {
+        const opt = tooltips[tooltip];
+        const options = {
+          animation: opt.animation ? opt.animation : true,
+          container: opt.container ? opt.container : false,
+          delay: opt.delay ? opt.delay : 0,
+          html: opt.html ? opt.html : false,
+          selector: opt.selector ? opt.selector : false,
+          trigger: opt.trigger ? opt.trigger : 'hover focus',
+          fallbackPlacement: opt.fallbackPlacement ? opt.fallbackPlacement : null,
+          boundary: opt.boundary ? opt.boundary : 'clippingParents',
+          title: opt.title ? opt.title : '',
+          customClass: opt.customClass ? opt.customClass : '',
+          sanitize: opt.sanitize ? opt.sanitize : true,
+          sanitizeFn: opt.sanitizeFn ? opt.sanitizeFn : null,
+          popperConfig: opt.popperConfig ? opt.popperConfig : null,
+        };
+
+        if (opt.placement) {
+          options.placement = opt.placement;
+        }
+        if (opt.template) {
+          options.template = opt.template;
+        }
+        if (opt.allowList) {
+          options.allowList = opt.allowList;
+        }
+
+        const elements = Array.from(document.querySelectorAll(tooltip));
+        if (elements.length) {
+          elements.map((el) => new window.bootstrap.Tooltip(el, options));
+        }
+      });
+    }
+  };
+
   /**
    * Add New Authenticator button click handler
    *
@@ -364,7 +425,7 @@ window.Joomla = window.Joomla || {};
   Joomla.plgSystemWebauthnAddOnClick = (event) => {
     event.preventDefault();
 
-    Joomla.plgSystemWebauthnCreateCredentials(event.currentTarget.getAttribute('data-random-id'), '#plg_system_webauthn-management-interface');
+    Joomla.plgSystemWebauthnInitCreateCredentials();
 
     return false;
   };
@@ -379,7 +440,7 @@ window.Joomla = window.Joomla || {};
   Joomla.plgSystemWebauthnEditOnClick = (event) => {
     event.preventDefault();
 
-    Joomla.plgSystemWebauthnEditLabel(event.currentTarget, event.currentTarget.getAttribute('data-random-id'));
+    Joomla.plgSystemWebauthnEditLabel(event.currentTarget);
 
     return false;
   };
@@ -394,7 +455,7 @@ window.Joomla = window.Joomla || {};
   Joomla.plgSystemWebauthnDeleteOnClick = (event) => {
     event.preventDefault();
 
-    Joomla.plgSystemWebauthnDelete(event.currentTarget, event.currentTarget.getAttribute('data-random-id'));
+    Joomla.plgSystemWebauthnDelete(event.currentTarget);
 
     return false;
   };

composer.json

@@ -94,7 +94,9 @@
         "web-auth/webauthn-lib": "2.1.*",
         "composer/ca-bundle": "^1.2",
         "dragonmantank/cron-expression": "^3.1",
-        "enshrined/svg-sanitize": "^0.15.4"
+        "enshrined/svg-sanitize": "^0.15.4",
+        "lcobucci/jwt": "^3.4.6",
+        "web-token/signature-pack": "^2.2.11"
     },
     "require-dev": {
         "phpunit/phpunit": "^8.5",