Merge pull request #451 from MasterKale/fix/446-enforce-conditional-ui-autocomplete-token-order

fix/446-enforce-conditional-ui-autocomplete-token-order

2 files changed, 37 insertions, 2 deletions

diff --git a/packages/browser/src/methods/startAuthentication.test.ts b/packages/browser/src/methods/startAuthentication.test.ts
index fb31dcc..3aaf33d 100644
--- a/packages/browser/src/methods/startAuthentication.test.ts
+++ b/packages/browser/src/methods/startAuthentication.test.ts
@@ -297,6 +297,22 @@ test('should set up autofill a.k.a. Conditional UI', async () => {
     .toEqual(0);
 });
 
+test('should set up conditional UI if "webauthn" is the only autocomplete token', async () => {
+  /**
+   * According to WHATWG "webauthn" can be the only token in the autocomplete attribute:
+   * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens
+   */
+  document.body.innerHTML = `
+    <form>
+      <label for="username">Username</label>
+      <input type="text" name="username" autocomplete="webauthn" />
+      <button type="submit">Submit</button>
+    </form>
+  `;
+
+  await expect(startAuthentication(goodOpts1, true)).resolves;
+});
+
 test('should throw error if autofill not supported', async () => {
   mockSupportsAutofill.mockResolvedValue(false);
 
@@ -320,6 +336,25 @@ test('should throw error if no acceptable <input> is found', async () => {
   rejected.toThrow(/no <input>/i);
 });
 
+test('should throw error if "webauthn" is not final autocomplete token', async () => {
+  /**
+   * According to WHATWG "webauthn" must be the final token in the autocomplete attribute when
+   * multiple tokens are present:
+   * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens
+   */
+  document.body.innerHTML = `
+    <form>
+      <label for="username">Username</label>
+      <input type="text" name="username" autocomplete="webauthn username" />
+      <button type="submit">Submit</button>
+    </form>
+  `;
+
+  const rejected = await expect(startAuthentication(goodOpts1, true)).rejects;
+  rejected.toThrow(Error);
+  rejected.toThrow(/no <input>/i);
+});
+
 test('should return authenticatorAttachment if present', async () => {
   // Mock extension return values from authenticator
   mockNavigatorGet.mockImplementation((): Promise<unknown> => {
diff --git a/packages/browser/src/methods/startAuthentication.ts b/packages/browser/src/methods/startAuthentication.ts
index 6e3940d..fdf14bf 100644
--- a/packages/browser/src/methods/startAuthentication.ts
+++ b/packages/browser/src/methods/startAuthentication.ts
@@ -59,13 +59,13 @@ export async function startAuthentication(
 
     // Check for an <input> with "webauthn" in its `autocomplete` attribute
     const eligibleInputs = document.querySelectorAll(
-      'input[autocomplete*=\'webauthn\']',
+      'input[autocomplete$=\'webauthn\']',
     );
 
     // WebAuthn autofill requires at least one valid input
     if (eligibleInputs.length < 1) {
       throw Error(
-        'No <input> with `"webauthn"` in its `autocomplete` attribute was detected',
+        'No <input> with "webauthn" as the only or last value in its `autocomplete` attribute was detected',
       );
     }