WebAuthn in real life

What is WebAuthn and why is it needed

• if the password is simple - you can pick it up;
• if the same password is used in several services, then breaking one of them the attacker gets access to all the others;
• passwords are vulnerable to phishing attacks;
• strong and unique passwords are difficult to remember, so the user is forced to write down the password on the sticker and stick it on the monitor, from where it can be easily spied, stolen or lost.

How WebAuthn Works

• Client (WebAuthn Client) - a browser that supports WebAuthn API;
• Web application - an application running on the client using the WebAuthn API to interact with credentials;
• credentials (Public Key Credential) - a pair of public and private cryptographic keys that are associated with a user account;
• Authenticator - a device or program - creates user credentials and signs requests from the relying party with these credentials (another name is an electronic key);
• the relying party (WebAuthn Relying Party) - the web server - stores the public key associated with the user account, verifies the validity of the signing of their requests with the private key stored in the authenticator.

Creation of credentials ( MakeCredential )

const credential = await navigator.credentials.create({
    publicKey: publicKeyMakeCredentialOptions
});

Signing a request with credentials already created ( GetAssertion )

const assertion = await navigator.credentials.get({
    publicKey: publicKeyGetAssertionOptions
});

Electronic keys

• platform-independent keys (roaming authenticators);
• Platform Authenticators

const credential = await navigator.credentials.create({
    publicKey: {
        authenticatorSelection: {
            authenticatorAttachment: 'cross-platform',
        },
        ...,
    },
});

WebAuthn Benefits

• The user does not need to remember and enter any passwords, and the server does not store user passwords, respectively, all the shortcomings that the passwords had are gone. Stealing a physical authenticator from a user is much more difficult than intercepting a password transmitted electronically over an insecure connection, and a leak of public keys on the site will not open the private key hidden in the device.
• origin , . origin . , (thesslstore.com, yubico.com) .
• WebAuthn - . - web- , .
• WebAuthn itself, as an API, provides developers with an abstraction over the implementation of authenticators and allows you to write code once, which then will work with all types and types of electronic keys. Thus WebAuthn is a scalable solution for user authentication.

WebAuthn Support

Windows

Linux

Android

iOS

macOS

Authenticator Registration

const credential = await navigator.credentials.create({
    publicKey: {
        attestation: 'direct',
         ...,
    },
});

WebAuthn work on different subdomains

const credential = await navigator.credentials.create({
    publicKey: {
        rp: {
            name: 'Mail.ru Group',
            id: 'mail.ru',
        },
        ...,
    },
});

WebAuthn work in iframe

1. in the authorization application when using WebAuthn, we determine whether we are now open inside the iframe or not;
2. if we are open inside the iframe, then instead of calling the browser API WebAuthn, we serialize the call parameters and send them through the postMessageparent window;
3. in the parent window we deserialize these parameters and call the WebAuthn methods;
4. when we receive an answer, we serialize it in the same way and send it through the postMessageinside of an iframe, where we accept this answer and perform further processing.

WebAuthn Test Automation

//    WebAuthn   
navigator.credentials.create = (options) => {
    window.credentialsCreateArgs = options;

    return new Promise((resolve, reject) => {
        window.credentialsCreateSuccess = resolve;
        window.credentialsCreateFail = reject;
    });
};

// -    
const credentialsCreateResponse = { /* constant object */ };

window.credentialsCreateSuccess(credentialsCreateResponse);

• check whether the client correctly forms and rolls parameters into WebAuthn functions;
• check the correctness of backend changes when rolling backend releases.

// -    
const credentialsCreateResponse =
    calcCredentialsCreateResponse(window.credentialsCreateArgs);
 
window.credentialsCreateSuccess(credentialsCreateResponse);

1. get the arguments that the WebAuthn methods were called with;
2. we run these arguments through a function that implements the same algorithms as inside real authenticators;
3. we get the result, and return it from our replaced functions;
4. all the rest of the code in our service processes these responses in the usual mode and as a result, all the behavior of the service does not differ from its behavior for real users.

The Present and Future of WebAuthn

How else can you use WebAuthn?

Popular questions and answers

Where can I buy an electronic key?

• Dataway Security
• Softline

What if I lose my electronic key?

What should I do if someone else gets access to my electronic key?

Now my biometric data will be stored on Mail.ru/Google/Microsoft servers?

Conclusion

• when using WebAuthn it is not required to remember and enter passwords;
• WebAuthn - , ;
• WebAuthn ;
• WebAuthn — .

Additional materials

• Web Authentication: An API for accessing Public Key Credentials Level 1
• herrjemand/awesome-webauthn: A curated list of awesome WebAuthn/FIDO2 resources
• artifact-project/webauthn: A set of tools for building an API and interacts with WebAuthn
• Getting started with security keys
• 4 Password Authentication Risk & How to Avoid Them
• WebAuthn ,
• Getting Started with WebAuthn with Nick Steele
• Key generation in Yubico U2F Keys