clarion 0.3.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9dc196ee5f2c8ed0672cd8ac94a7da79df64610526ba0590ee49a6a06e8a11f
-  data.tar.gz: c4c9253becb0aa8825b3f5c3e40826f0dba345d87f97fc5625b0b46b095ab625
+  metadata.gz: 1be5cccde62a2aa7db2fc08a6f55f872779c0745da3daff77a04d8ae2f28e77d
+  data.tar.gz: 4cbd2bd4368caf6487a79a79977eb0f82b3c19cb1c10741237e27132774eeb7b
 SHA512:
-  metadata.gz: 599032ddf520cd979702ed6abb808c1340e7dc123d38754abdecda59c97f6508bbdcb88bcdc55a9899d7f4e41ae635fecf9e591ce1dcf55ea8e6b5d31302c3d2
-  data.tar.gz: 02a673769db0de5f84f51806c5ad130cbc278240c620bc8f35c3719b117819b63ec32fb10d9e2266809a4af51e07607e9440a1a4821185c31c0c1b459f6bb4e8
+  metadata.gz: 7bf00fbb11b976a954b09bb26fe950dcfccb40eed66b6a2dda726d83ef7e27400913f31058fa68f8e8328a746be06157223ef520507aa490e109d46c5d2db234
+  data.tar.gz: 5a0956255f6f737367476f3294d944b5761beaf8ade31524c4b3f46278c8ac3bdc6d554c3c43630cf962ef8e1fcfdce17c00ebc9c224a1956854b3d6163e364d

data/.gitattributes

@@ -0,0 +1 @@
+u2f-api.js linguist-generated=true

data/README.md

@@ -1,5 +1,7 @@
 # Clarion: Web-based FIDO U2F helper for CLI operations (e.g. SSH Log in)
 
+![](https://img.sorah.jp/s/ssh-u2f.gif)
+
 Clarion is a web-based frontend to allow remote,non-browser operations (CLI) to perform 2FA on their users.
 
 ## How it works
@@ -34,13 +36,13 @@ See [config.ru](./config.ru) for detailed configuration. The following environme
 
 ### Real world example: SSH log in
 
-TBD
+See [./examples/pam-u2f](./examples/pam-u2f)
 
 ### Test implementation
 
 Visit `/test` exists in your application. This endpoint doesn't work for multi-process/multi-threaded deployment.
 
-See [app/public/test.erb](./app/public/test.erb), [app/public/test_callback.erb](./app/public/test_callback.erb), [app/public/test.js](./app/public/test.erb) for implementation.
+See [app/views/test.erb](./app/views/test.erb), [app/views/test_callback.erb](./app/views/test_callback.erb), [app/public/test.js](./app/public/test.js) for implementation.
 
 ### API
 

data/app/public/register.js

@@ -1,104 +1,109 @@
 "use strict";
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", async function() {
   let processionElem = document.getElementById("procession");
 
   let handleUnsupported = () => {
     processionElem.className = 'procession_unsupported';
   };
-  let unsupportedTimer = setTimeout(handleUnsupported, 3000);
-
-  window.u2f.getApiVersion((ver) => {
-    console.log(ver);
-    clearTimeout(unsupportedTimer);
-    let appId = processionElem.attributes['data-app-id'].value;
-    let regId = processionElem.attributes['data-reg-id'].value;
-    let requests = JSON.parse(processionElem.attributes['data-requests'].value);
-    let state = processionElem.attributes['data-state'].value;
-    let callbackUrl = processionElem.attributes['data-callback'].value;
-
-    var u2fResponse;
-
-    let processCallback = (json) => {
-      processionElem.className = 'procession_ok';
-
-      if (callbackUrl.match(/^js:/)) {
-        if (!window.opener) {
-          console.log("window.opener is not truthy")
-          processionElem.className = 'procession_error';
-          return;
-        }
-        window.opener.postMessage({clarion_key: {state: state, name: json.name, data: json.encrypted_key}}, callbackUrl.slice(3));
-        window.close();
-      } else {
-        let form = document.getElementById("callback_form");
-        form.action = callbackUrl;
-        form.querySelector('[name=data]').value = json.encrypted_key;
-        form.submit();
-      }
-    }
+  if (!navigator.credentials) return handleUnsupported();
 
-    let submitKey = () => {
-      processionElem.className = 'procession_contact';
+  const regId = processionElem.attributes['data-reg-id'].value;
+  const state = processionElem.attributes['data-state'].value;
+  const callbackUrl = processionElem.attributes['data-callback'].value;
 
-      let payload = JSON.stringify({
-        reg_id: regId,
-        response: JSON.stringify(u2fResponse),
-        name: document.getElementById("key_name").value,
-      });
+  const creationOptions = JSON.parse(processionElem.attributes['data-webauthn-creation'].value);
+  creationOptions.publicKey.challenge = new Uint8Array(creationOptions.publicKey.challenge).buffer;
+  creationOptions.publicKey.user.id = new Uint8Array(creationOptions.publicKey.user.id).buffer;
+  console.log(creationOptions);
 
-      let handleError = (err) => {
-        console.log(err);
-        processionElem.className = 'procession_error';
-      };
+  let attestation;
+
+  const startCreationRequest = async function() {
+    processionElem.className = 'procession_wait';
+
+    try {
+      attestation = await navigator.credentials.create(creationOptions);
+      console.log(attestation);
+    } catch (e) {
+      document.getElementById("error_message").innerHTML = `WebAuthn (${e.toString()})`;
+      processionElem.className = 'procession_error';
+      console.log(e);
 
-      fetch(`/ui/register`, {credentials: 'include', method: 'POST', body: payload}).then((resp) => {
-        console.log(resp);
-        if (!resp.ok) {
-          processionElem.className = 'procession_error';
+      if (e instanceof DOMException) {
+        if (e.name == 'NotAllowedError' || e.name == 'AbortError') {
+          processionElem.className = 'procession_timeout';
           return;
         }
-        return resp.json().then((json) => {
-          console.log(json);
-          if (json.ok) {
-            processCallback(json);
-          } else {
-            processionElem.className = 'procession_error';
-          }
-        });
-      }).catch(handleError);
-    };
-    document.getElementById("key_name_form").addEventListener("submit", (e) => {
-      e.preventDefault();
-      if (u2fResponse) submitKey();
-    });
+        if (e.name == 'NotSupportedError') {
+          handleUnsupported();
+          return;
+        }
+      }
+      return;
+    }
 
-    let u2fCallback = (response) => {
-      console.log(response);
+    processionElem.className = 'procession_edit';
+    document.getElementById("key_name").focus();
+  };
 
-      if (response.errorCode == window.u2f.ErrorCodes.TIMEOUT) {
-        processionElem.className = 'procession_timeout';
-        return;
-      } else if (response.errorCode) {
+  const submitAttestation = async function() {
+    processionElem.className = 'procession_contact';
+
+    const b64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
+    const payload = JSON.stringify({
+      reg_id: regId,
+      name: document.getElementById("key_name").value,
+      attestation_object: b64(attestation.response.attestationObject),
+      client_data_json: b64(attestation.response.clientDataJSON),
+    });
+    try {
+      const resp = await fetch(`/ui/register`, {credentials: 'include', method: 'POST', body: payload});
+      console.log(resp);
+      if (!resp.ok) {
         processionElem.className = 'procession_error';
         return;
       }
-      u2fResponse = response;
-      processionElem.className = 'procession_edit';
-      document.getElementById("key_name").focus();
-    };
 
-    let startRequest = () => {
-      processionElem.className = 'procession_wait';
-      window.u2f.register(appId, requests, [], u2fCallback);
+      const json = await resp.json();
+      console.log(json);
+      if (json.ok) {
+        processCallback(json);
+      } else {
+        processionElem.className = 'procession_error';
+      }
+    } catch (e) {
+      console.log(e);
+      processionElem.className = 'procession_error';
     };
+  };
 
-    document.getElementById("retry_button").addEventListener("click", (e) => {
-      startRequest();
-    });
-
-    startRequest();
+  document.getElementById("key_name_form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (attestation) submitAttestation();
   });
 
+  const processCallback = function (json) {
+    processionElem.className = 'procession_ok';
+
+    if (callbackUrl.match(/^js:/)) {
+      if (!window.opener) {
+        console.log("window.opener is not truthy")
+        processionElem.className = 'procession_error';
+        return;
+      }
+      window.opener.postMessage({clarion_key: {state: state, name: json.name, data: json.encrypted_key}}, callbackUrl.slice(3));
+      window.close();
+    } else {
+      let form = document.getElementById("callback_form");
+      form.action = callbackUrl;
+      form.querySelector('[name=data]').value = json.encrypted_key;
+      form.submit();
+    }
+  };
 
+  document.getElementById("retry_button").addEventListener("click", (e) => {
+    startCreationRequest();
+  });
+  return startCreationRequest();
 });

data/app/public/sign.js

@@ -1,105 +1,125 @@
 "use strict";
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", async function() {
   let processionElem = document.getElementById("procession");
 
   let handleUnsupported = () => {
     processionElem.className = 'procession_unsupported';
   };
-  let unsupportedTimer = setTimeout(handleUnsupported, 3000);
-
-  window.u2f.getApiVersion((ver) => {
-    console.log(ver);
-    clearTimeout(unsupportedTimer);
-
-    let authnId = processionElem.attributes['data-authn-id'].value;
-    let appId = processionElem.attributes['data-app-id'].value;
-    let reqId = processionElem.attributes['data-req-id'].value;
-    let requests = JSON.parse(processionElem.attributes['data-requests'].value);
-    let challenge = JSON.parse(processionElem.attributes['data-challenge'].value);
-
-    let requestCancel  = (e) => {
-      if (e) e.preventDefault();
-      let payload = JSON.stringify({
-        req_id: reqId,
-      });
+  if (!navigator.credentials) return handleUnsupported();
+
+  const requestOptions = JSON.parse(processionElem.attributes['data-webauthn-request'].value);
+  requestOptions.publicKey.challenge = new Uint8Array(requestOptions.publicKey.challenge).buffer;
+  requestOptions.publicKey.allowCredentials = requestOptions.publicKey.allowCredentials.map((v) => ({type: v.type, id: new Uint8Array(v.id).buffer}));
+  console.log(requestOptions);
+  const authnId = processionElem.attributes['data-authn-id'].value;
+  const reqId = processionElem.attributes['data-req-id'].value;
+
+  const cancelRequest = async function (e) {
+    if (e) e.preventDefault();
+    const payload = JSON.stringify({
+      req_id: reqId,
+    });
 
-      let handleError = (err) => {
-        console.log(err);
+    try {
+      const resp = await fetch(`/ui/cancel/${authnId}`, {credentials: 'include', method: 'POST', body: payload});
+      console.log(resp);
+      if (!resp.ok) {
         processionElem.className = 'procession_error';
-      };
-
-      fetch(`/ui/cancel/${authnId}`, {credentials: 'include', method: 'POST', body: payload}).then((resp) => {
-        console.log(resp);
-        if (!resp.ok) {
-          processionElem.className = 'procession_error';
-          return;
-        }
-        return resp.json().then((json) => {
-          console.log(json);
-          if (json.ok) {
-            processionElem.className = 'procession_cancel';
-          } else {
-            processionElem.className = 'procession_error';
-          }
-        });
-      }).catch(handleError);
-    };
-    document.getElementById("cancel_link").addEventListener("click", requestCancel);
-
-    let processCallback = (json) => {
-      processionElem.className = 'procession_ok';
-      if (window.opener) window.close();
-    }
-
-    let cb = (response) => {
-      console.log(response);
-
-      if (response.errorCode == window.u2f.ErrorCodes.TIMEOUT) {
-        processionElem.className = 'procession_timeout';
         return;
-      } else if (response.errorCode) {
+      }
+      const json = await resp.json();
+      console.log(json);
+      if (json.ok) {
+        processionElem.className = 'procession_cancel';
+      } else {
         processionElem.className = 'procession_error';
-        return;
       }
-      processionElem.className = 'procession_contact';
+    } catch (e) {
+      console.log(err);
+      processionElem.className = 'procession_error';
+    }
+  };
+  document.getElementById("cancel_link").addEventListener("click", cancelRequest);
 
-      let payload = JSON.stringify({
-        req_id: reqId,
-        response: JSON.stringify(response),
-      });
+  const startAssertionRequest = async function() {
+    processionElem.className = 'procession_wait';
 
-      let handleError = (err) => {
-        console.log(err);
-        processionElem.className = 'procession_error';
-      };
-
-      fetch(`/ui/verify/${authnId}`, {credentials: 'include', method: 'POST', body: payload}).then((resp) => {
-        console.log(resp);
-        if (!resp.ok) {
-          processionElem.className = 'procession_error';
+    let assertion;
+    try {
+      assertion = await navigator.credentials.get(requestOptions);
+      console.log(assertion);
+      if (!assertion) {
+        processionElem.className = 'procession_unambigious';
+        return;
+      }
+    } catch (e) {
+      document.getElementById("error_message").innerHTML = `WebAuthn (${e.toString()})`;
+      processionElem.className = 'procession_error';
+      console.log(e);
+
+      if (e instanceof DOMException) {
+        if (e.name == 'NotAllowedError') {
+          processionElem.className = 'procession_timeout';
           return;
         }
-        return resp.json().then((json) => {
-          console.log(json);
-          if (json.ok) {
-            processCallback(json);
-          } else {
-            processionElem.className = 'procession_error';
-          }
-        });
-      }).catch(handleError);
-    };
+        if (e.name == 'NotSupportedError') {
+          handleUnsupported();
+          return;
+        }
+        if (e.name == 'InvalidStateError') {
+        processionElem.className = 'procession_invalid';
+          return;
+        }
+      }
+      return;
+    }
 
-    let startRequest = () => {
-      processionElem.className = 'procession_wait';
-      window.u2f.sign(appId, challenge, requests, cb);
-    };
-    document.getElementById("retry_button").addEventListener("click", (e) => {
-      startRequest();
+    processionElem.className = 'procession_contact';
+
+    const b64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
+    const payload = JSON.stringify({
+      req_id: reqId,
+      credential_id: assertion.id,
+      authenticator_data: b64(assertion.response.authenticatorData),
+      client_data_json: b64(assertion.response.clientDataJSON),
+      signature: b64(assertion.response.signature),
+      user_handle: b64(assertion.response.userHandle),
+      extension_results: assertion.getClientExtensionResults(),
     });
-    startRequest();
-  });
 
+    try {
+      const resp = await fetch(`/ui/verify/${authnId}`, {credentials: 'include', method: 'POST', body: payload});
+      const json = await resp.json();
+      console.log(json);
+      if (resp.ok) {
+        if (json.ok) {
+          processionElem.className = 'procession_ok';
+          if (window.opener) {
+            window.close();
+          } else {
+            setTimeout(() => window.close(), 2000);
+          }
+        } else {
+          processionElem.className = 'procession_error';
+        }
+      } else {
+        if (resp.status == 401) {
+          processionElem.className = 'procession_invalid';
+        } else {
+          processionElem.className = 'procession_error';
+        }
+      }
+    } catch (e) {
+      document.getElementById("error_message").innerHTML = `Contact Error`;
+      console.log(e);
+      processionElem.className = 'procession_error';
+      return;
+    }
+  }
 
+  document.getElementById("retry_button").addEventListener("click", (e) => {
+    startAssertionRequest();
+  });
+  return startAssertionRequest();
 });

data/app/views/authn.erb

@@ -23,6 +23,12 @@
   #procession.procession_error > div.procession_error {
     display: block;
   }
+  #procession.procession_invalid > div.procession_invalid {
+    display: block;
+  }
+  #procession.procession_unambiguous > div.procession_invalid {
+    display: block;
+  }
   #procession.procession_cancel > div.procession_cancel {
     display: block;
   }
@@ -37,7 +43,7 @@
 <small><%= @authn.comment %></small></p>
 <%- end -%>
 </p>
-<div id="procession" class="procession_init" data-authn-id="<%= @authn.id %>" data-app-id="<%= @app_id %>" data-requests='<%= @requests.to_json %>' data-challenge='<%= @challenge.to_json %>' data-req-id='<%= @req_id %>'>
+<div id="procession" class="procession_init" data-authn-id="<%= @authn.id %>" data-req-id='<%= @req_id %>' data-webauthn-request='<%= @credential_request_options.to_json %>'>
   <div class="procession_init">
     <p>Initializing...</p>
   </div>
@@ -54,13 +60,23 @@
     <p>OK: You may now close this page.</p>
   </div>
   <div class="procession_error">
-    <p>Error: Reload and try again?</p>
+    <p>Unexpected Error: Reload and try again?</p>
+    <p class='text-muted'><small id='error_message'></small></p>
   </div>
+  <div class="procession_invalid">
+    <p>Error: An unregistered key presented</p>
+  </div>
+  <div class="procession_unambiguous">
+    <p>Error: Key Selection was unambigious<p>
+  </div>
+
   <div class="procession_cancel">
     <p>Cancelled: You may now close this page.</p>
   </div>
   <div class="procession_timeout">
-    <p>Timed out...</p>
+    <p>Error: The operation interrupted or timed out<p>
+  </div>
+  <div class="procession_timeout procession_invalid procession_error">
     <p><button id="retry_button">Try again</button></p>
   </div>
   <div class="procession_unsupported procession_error procession_wait procession_timeout">