Merge pull request #20 from sebadob/catch-browser-native-webauthn-tim…

…eout catch browsers native webauthn timeout
sebadob · Aug 14, 2023 · 7683133 · 7683133
2 parents 2fa49c2 + 5433249
commit 7683133
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 37 deletions.
diff --git a/frontend/src/components/account/AccMFA.svelte b/frontend/src/components/account/AccMFA.svelte
@@ -9,6 +9,7 @@
         webauthnRegFinish,
         webauthnRegStart
     } from "../../utils/dataFetching.js";
+    import {sleepAwait} from "$lib/utils/helpers.js";
 
     export let t;
     export let sessionInfo;
@@ -146,8 +147,6 @@
         {t.mfa.p2}
         <br><br>
         {t.mfa.p3}
-        <br><br>
-        {t.mfa.p4}
     </p>
 
     <div class="keyContainer">

diff --git a/frontend/src/components/webauthn/WebauthnRequest.svelte b/frontend/src/components/webauthn/WebauthnRequest.svelte
@@ -3,8 +3,14 @@
     import {tweened} from "svelte/motion";
     import Loading from "$lib/Loading.svelte";
     import {webauthnAuth} from "../../utils/webauthn.js";
+    import {promiseTimeout} from "../../utils/helpers.js";
 
-    export let t;
+    export let t = {
+        invalidKeyUsed: 'Invalid Key',
+        mfaAck: 'Acknowledged',
+        provideMfa: 'Please login with your MFA device',
+        requestExpires: 'Request expires',
+    };
     export let data;
     export let purpose = 'Login';
     export let onError = () => {
@@ -33,12 +39,24 @@
         let p;
         if (purpose === 'Login') {
             p = {purpose: {Login: data.code}};
-            // p = { Login: data.code };
         } else {
             p = {purpose: 'PasswordReset'};
-            // p = { PasswordReset: undefined };
         }
-        let res = await webauthnAuth(data.user_id, p);
+
+        let res = {};
+        try {
+            res = await promiseTimeout(
+                webauthnAuth(data.user_id, p, t.invalidKeyUsed),
+                // we need to cancel 1 sec before the expiry to not get into a browser exception,
+                // because we would not be able to "go back" again
+                data.exp * 1000 - 1000
+            );
+        } catch (err) {
+            console.error(err);
+            res.err = true;
+            res.msg = 'Timeout';
+            onError();
+        }
 
         err = res.err;
         success = !res.err;
@@ -68,7 +86,7 @@
 
             <div class="contentRow">
                 <div class="contentHeader">
-                    {t.requestRxpires}
+                    {t.requestExpires}
                     :
                 </div>
                 <div>
@@ -153,7 +171,7 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        background: rgba(0, 0, 0, .95);
+        background: rgba(0, 0, 0, .85);
         z-index: 20;
     }
 </style>
diff --git a/frontend/src/lib/LangSelector.svelte b/frontend/src/lib/LangSelector.svelte
@@ -18,7 +18,6 @@
 
     function readLang() {
         let l = document.documentElement.lang.toUpperCase();
-        console.log('lang from document: ' + l);
         lang = l;
         langSelected = l;
     }

diff --git a/frontend/src/routes/oidc/authorize/+page.svelte b/frontend/src/routes/oidc/authorize/+page.svelte
@@ -48,11 +48,7 @@
     let formValues = {email: '', password: ''};
     let formErrors = {};
 
-    // const schema = yup.object().shape({
-    //     email: yup.string().required('E-Mail is required').email("Bad E-Mail format"),
-    // });
     let schema = {};
-
     $: if (t) {
         schema = yup.object().shape({
             email: yup.string().required(t.emailRequired).email(t.emailBadFormat),
@@ -248,7 +244,12 @@
             {/if}
 
             {#if webauthnData}
-                <WebauthnRequest bind:t bind:data={webauthnData} onSuccess={onWebauthnSuccess} onError={onWebauthnError}/>
+                <WebauthnRequest
+                        bind:t
+                        bind:data={webauthnData}
+                        onSuccess={onWebauthnSuccess}
+                        onError={onWebauthnError}
+                />
             {/if}
 
             <Input

diff --git a/frontend/src/utils/helpers.js b/frontend/src/utils/helpers.js
@@ -246,5 +246,16 @@ export const getQueryParams = () => {
 	});
 }
 
+// races a promise against a given timeout and throws an exception if exceeded
+export const promiseTimeout = (prom, time) => {
+	let timer;
+	return Promise.race([
+		prom,
+		new Promise(
+			(_r, rej) => timer = setTimeout(rej, time, 'timeout')
+		)
+	]).finally(() => clearTimeout(timer));
+}
+
 // async sleep in ms
 export const sleepAwait = async (ms) => await new Promise(x => setTimeout(x, ms));
diff --git a/frontend/src/utils/webauthn.js b/frontend/src/utils/webauthn.js
@@ -1,7 +1,7 @@
 import { webauthnAuthFinish, webauthnAuthStart } from "./dataFetching.js";
-import { arrBufToBase64UrlSafe, base64UrlSafeToArrBuf } from "./helpers.js";
+import {arrBufToBase64UrlSafe, base64UrlSafeToArrBuf} from "./helpers.js";
 
-export async function webauthnAuth(uid, data) {
+export async function webauthnAuth(uid, data, errorMsg) {
 	let res = await webauthnAuthStart(uid, data);
 	if (res.status === 200) {
 		let resp = await res.json();
@@ -18,9 +18,10 @@ export async function webauthnAuth(uid, data) {
 		try {
 			challengePk = await navigator.credentials.get(challenge);
 		} catch (e) {
+			console.error(e);
 			return {
 				err: true,
-				msg: 'Invalid Key used'
+				msg: errorMsg || 'Invalid Key',
 			};
 		}
 

diff --git a/rauthy-models/src/i18n/account.rs b/rauthy-models/src/i18n/account.rs
@@ -141,7 +141,6 @@ pub struct I18nAccountMfa<'a> {
     p_1: &'a str,
     p_2: &'a str,
     p_3: &'a str,
-    p_4: &'a str,
 
     delete: &'a str,
     error_reg: &'a str,
@@ -170,15 +169,12 @@ impl SsrJson for I18nAccountMfa<'_> {
 impl I18nAccountMfa<'_> {
     fn build_en() -> Self {
         Self {
-            p_1: "If you plan on using your MFA key with multiple Browsers like Firefox and a \
-            Chrome based Browsers, you should do the registration with Firefox only.",
-            p_2: "Firefox does sometimes not ask for an additional PIN, if the device supports this \
-            method for compatibility reasons. Chrome bases variants on the other hand do always try \
-            to use an additional PIN confirmation, if it exists. ",
-            p_3: "If a device, that supports a PIN, was registered with a Chrome based browser, it \
-            will not work in Firefox at the time of writing. If it was registered with Firefox \
-            though, it will work with Chrome too. ",
-            p_4: "You can register two Keys for your account.",
+            p_1: "If you plan on using your MFA key with multiple systems like Windows and \
+            Android, you should do the registration with Android.",
+            p_2: "Android is the platform with the least supported features for the passwordless \
+            technology. Keys you register with Android work elsewhere too. However, this does not \
+            apply the other way around.",
+            p_3: "You can register two Keys for your account.",
 
             delete: "Delete",
             error_reg: "Error starting the Registration process",
@@ -194,15 +190,12 @@ impl I18nAccountMfa<'_> {
 
     fn build_de() -> Self {
         Self {
-            p_1: "Wenn Sie mehrere Browser parallel nutzen möchten, wie z.B. Chrome und Firefox, \
-            sollten Sie die Registrierung mit Firefox durchführen.",
-            p_2: "Unter bestimmten Bedingungen (z.B. Mac OS) verlangt Firefox (und Andere) derzeit \
-            aus Kompatibilitätsgründen nicht die Sicherheits-PIN von Geräten, die diese Technologie \
-            unterstützen, während Chrome-basierte Browser diese immer auf jedem System abfragen.",
-            p_3: "Sollten Sie ein Gerät haben, was diese Technologie unterstützt, so wird es unter \
-            Umständen nicht im Firefox (Mac OS) funktionieren, sollte die Registrierung mit Chrome \
-            durchgeführt worden sein. Andersherum funktioniert es allerdings in jedem Fall.",
-            p_4: "Sie können pro Account zwei Schlüssel registrieren.",
+            p_1: "Wenn Sie mehrere Systeme parallel nutzen möchten, wie z.B. Windows und Android, \
+            sollten Sie die Registrierung mit Android durchführen.",
+            p_2: "Android ist diejenige Plattform, die derzeit die wenigsten Features der \
+            passwortlosen Technologie unterstützt. Schlüssel, die dort registriert werden, \
+            funktionieren auf anderen Geräten gleichermaßen. Dies gilt jedoch nicht andersherum.",
+            p_3: "Sie können pro Account zwei Schlüssel registrieren.",
 
             delete: "Löschen",
             error_reg: "Fehler beim Starten der Registrierung",

diff --git a/rauthy-models/src/i18n/authorize.rs b/rauthy-models/src/i18n/authorize.rs
@@ -10,6 +10,7 @@ pub struct I18nAuthorize<'a> {
     email_required: &'a str,
     email_sent_msg: &'a str,
     invalid_credentials: &'a str,
+    invalid_key_used: &'a str,
     login: &'a str,
     mfa_ack: &'a str,
     password: &'a str,
@@ -41,6 +42,7 @@ impl I18nAuthorize<'_> {
             email_required: "E-Mail is required",
             email_sent_msg: "If your E-Mail exists, a request has been sent",
             invalid_credentials: "Invalid credentials",
+            invalid_key_used: "Invalid Key",
             login: "Login",
             mfa_ack: "Acknowledged",
             password: "Password",
@@ -59,14 +61,15 @@ impl I18nAuthorize<'_> {
             email_required: "E-Mail ist notwendig",
             email_sent_msg: "Sollte Ihre Adresse registriert sein, wurde eine Nachricht versandt",
             invalid_credentials: "Ungültige Zugangsdaten",
+            invalid_key_used: "Ungültiger Sicherheitsschlüssel",
             login: "Login",
             mfa_ack: "Bestätigt",
             password: "Password",
             password_forgotten: "Password vergessen?",
             password_request: "Anfordern",
             password_required: "Password ist notwendig",
             provide_mfa: "Bitte stellen Sie Ihr MFA Gerät zur Verfügung",
-            request_expires: "Anfrage abgelaufen",
+            request_expires: "Anfrage läuft ab",
         }
     }
 }