Add connector for mobile webauthn (#1154)

Adds a dedicated connector for handling WebAuthN for our mobile application. Which uses redirects instead of postMessage.
4 years ago · ccdf05a635
3 changed files with 44 additions and 4 deletions
--- a/src/connectors/webauthn-mobile.html
+++ b/src/connectors/webauthn-mobile.html
@ -0,0 +1,19 @@
				@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="HandheldFriendly" content="true">
+    <title>Bitwarden Mobile WebAuthn Connector</title>
+</head>
+
+<body style="background: transparent;">
+    <img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3">
+    <div class="text-center">
+        <button id="webauthn-button" class="btn btn-primary"></button>
+    </div>
+</body>
+
+</html>
--- a/src/connectors/webauthn.ts
+++ b/src/connectors/webauthn.ts
@ -9,6 +9,7 @@ let webauthnJson: any;
				@@ -9,6 +9,7 @@ let webauthnJson: any;
 let btnText: string = null;
 let parentUrl: string = null;
 let parentOrigin: string = null;
+let callbackUri: string = null;
 let stopWebAuthn = false;
 let sentSuccess = false;
 let obj: any = null;
@ -66,7 +67,7 @@ function parseParametersV1() {
				@@ -66,7 +67,7 @@ function parseParametersV1() {
 }

 function parseParametersV2() {
-    let dataObj: { data: any, btnText: string; } = null;
+    let dataObj: { data: any, btnText: string; callbackUri?: string } = null;
    try {
        dataObj = JSON.parse(b64Decode(getQsParam('data')));
    }
@ -75,6 +76,7 @@ function parseParametersV2() {
				@@ -75,6 +76,7 @@ function parseParametersV2() {
        return;
    }

+    callbackUri = dataObj.callbackUri;
    webauthnJson = dataObj.data;
    btnText = dataObj.btnText;
 }
@ -104,7 +106,7 @@ function start() {
				@@ -104,7 +106,7 @@ function start() {
    stopWebAuthn = false;

    if (navigator.userAgent.indexOf(' Safari/') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
-        // TODO: Hide image, show button
+        // Safari blocks non-user initiated WebAuthn requests.
    } else {
        executeWebAuthn();
    }
@ -136,7 +138,11 @@ function onMessage() {
				@@ -136,7 +138,11 @@ function onMessage() {
 }

 function error(message: string) {
-    parent.postMessage('error|' + message, parentUrl);
+    if (callbackUri) {
+        document.location.replace(callbackUri + '?error=' + encodeURIComponent(message));
+    } else {
+        parent.postMessage('error|' + message, parentUrl);
+    }
 }

 function success(assertedCredential: PublicKeyCredential) {
@ -145,11 +151,21 @@ function success(assertedCredential: PublicKeyCredential) {
				@@ -145,11 +151,21 @@ function success(assertedCredential: PublicKeyCredential) {
    }

    const dataString = buildDataString(assertedCredential);
-    parent.postMessage('success|' + dataString, parentUrl);
+
+    if (callbackUri) {
+        document.location.replace(callbackUri + '?data=' + encodeURIComponent(dataString));
+    } else {
+        parent.postMessage('success|' + dataString, parentUrl);
+    }
+
    sentSuccess = true;
 }

 function info(message: string) {
+    if (callbackUri) {
+        return;
+    }
+
    parent.postMessage('info|' + message, parentUrl);
 }

--- a/webpack.config.js
+++ b/webpack.config.js
@ -97,6 +97,11 @@ const plugins = [
				@@ -97,6 +97,11 @@ const plugins = [
        filename: 'webauthn-connector.html',
        chunks: ['connectors/webauthn'],
    }),
+    new HtmlWebpackPlugin({
+        template: './src/connectors/webauthn-mobile.html',
+        filename: 'webauthn-mobile-connector.html',
+        chunks: ['connectors/webauthn'],
+    }),
    new HtmlWebpackPlugin({
        template: './src/connectors/webauthn-fallback.html',
        filename: 'webauthn-fallback-connector.html',