WebAuthN fails on localhost because it expects an HTTPS origin

[allezxandre]

Steps To Reproduce

1. Go to a localhost website with WebAuthN (using unencrypted http protocol)
2. Use WebAuthN authentication

Expected Result

WebAuthN UI opens, mimicking browser behavior on localhost

Actual Result

WebAuthN fails silently on the UI but an error is logged to the console:

Error: 'origin' is not a valid https origin

The error is correct, http://localhost is indeed not https, but I expected localhost to still be a valid origin.

Screenshots or Videos

No response

Additional Context

No response

Operating System

macOS

Operating System Version

No response

Web Browser

Chrome, Safari

Browser Version

Safari 17.0 and Arc 1.15.2

Build Version

Chromium Engine Version 119.0.6045.123 (arm64)

Issue Tracking Info

• I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[gregorvand]

+1

since BitWarden jumps in ahead of native browser (why?) it stops all localhost development using WebAuthn being workable, unless in a browser where the BitWarden chrome extension has been disabled

[SDAChess]

This also made me go insane debugging today to find out this was Bitwarden related and not my own WebAuthn code. Please at least update the error message so that it's easy to know that it is related to Bitwarden ;)

[Jhoscy]

+1

since BitWarden jumps in ahead of native browser (why?) it stops all localhost development using WebAuthn being workable, unless in a browser where the BitWarden chrome extension has been disabled

I agree, after disabling BitWarden webauthn works as expected

[barryp]

I just ran into this too. Seems like it's coming from

clients/libs/common/src/vault/services/fido2/fido2-client.service.ts

Lines 95 to 98 in a141890

	if (parsedOrigin.hostname == undefined || !params.origin.startsWith("https://")) {
	this.logService?.warning(`[Fido2Client] Invalid https origin: ${params.origin}`);
	throw new DOMException("'origin' is not a valid https origin", "SecurityError");
	}

There's a simple window.isSecureContext it could check, but maybe it doesn't have access to the window

At the very least, maybe something like

if (parsedOrigin.hostname == undefined 
    || !(
        params.origin.startsWith("https://") 
        || (params.origin === 'localhost') 
        || params.origin.endsWith('.localhost')
    )
) ...

[taylorjdawson]

If @barryp's solution is acceptable could we put this into a PR or is further consideration necessary? I have to enable & disable bitwarden when developing locally

[SDAChess]

I might need some tweaking such as adding 127.0.0.1 and .local domains maybe? Either way there some to be little to no interest from the Bitwarden team on this issue.

[abergs]

Hey, while I mostly work on Bitwarden passwordless.dev I'm just updating that we're looking to fix this in a way that aligns with the WebAuthn specification.

[acewings27]

This started being an issue for me today.

[carlos-menezes]

Hey, while I mostly work on Bitwarden passwordless.dev I'm just updating that we're looking to fix this in a way that aligns with the WebAuthn specification.

Awesome. Any news on this?

[Aeases]

+1 this sucks ass

[coroiu]

@carlos-menezes See w3c/webauthn#2018

[abergs]

@carlos-menezes and others: Since w3c/webauthn#2018 was merged in the spec we will move forward and allow http://localhost:* for passkeys in bitwarden. I don't have a date, but my guess is that it won't be long.

Thanks for reporting this.

[carlos-menezes]

Awesome, great to hear!

[shahradelahi]

Hey there!

Thanks to @coroiu, this issue will be resolved pretty soon, but I have a workaround and I hope this becomes useful for some.

I'm working on a project with Next.js and WebAuthn, and to bypass this limitation, I've created an HTTPS proxy for the development environment.

If you want to try this workaround, first install dependencies by following command:

npm i -D concurrently http-proxy

And then create https-server.js file in root of the project:

import fs from 'node:fs';
import path from 'node:path';
import proxy from 'http-proxy';

proxy
  .createServer({
    // openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    ssl: {
      key: fs.readFileSync(path.resolve('localhost.key')),
      cert: fs.readFileSync(path.resolve('localhost.crt')),
    },
    target: {
      host: 'localhost',
      port: 3000,
    },
    ws: true,
  })
  .listen(3001);

Now run the dev server by following command:

concurrently --raw --kill-others "next dev" "node https-server.js"

Also, make sure that localhost is not excluded in extension settings.

[coroiu]

@shahradelahi I haven't used Next.js in a while but it seems like they added experimental HTTPS support https://vercel.com/guides/access-nextjs-localhost-https-certificate-self-signed, could that also be a viable workaround while we wait for #9236 to get released?