We will be building a Chrome Extension that emulates a Hardware Authentication Device (HAD).

While exploring the Webauthn protocol I was trying to add it to a personal project of mine. Although I own a HAD, during development I wanted to be able to play around with the protocol without worrying too much about polluting the device's memory with rubbish key material, among other things. After searching for some sort of emulator or SDK, I couldn't find any, which brings us here... why not create an emulator that a developer or tester can use to interact with a page, without requiring immediate access to a HAD?

This is the first of a three-post series, the ultimate goal is for us to be able to register and authenticate with web applications that support Webauthn without requiring an actual device (except for your browser of course).

On this post we will be tackling the skeleton of a Chrome Extension that is capable of detecting Webauthn requests, both for registering and logging in, how different pieces of the extension communicate with each other, and lay the foundation for implementing an authenticator.

Disclaimer

I cannot emphasize enough that this project by no means replaces a Hardware Authentication Device. The use of this extension is aimed exclusively at development, testing and debugging. If you use it in a production environment, do so at your own risk. We will elaborate on the guarantees (and lack of) that this project provides on the last post of the series.


Architecture

As any good project, we should begin by identifying the problem we are trying to solve and design a solution for it.

Upon receiving a request from a web page for Webauthn credential creation or verification, the browser will request all eligible devices for a response. The extension will detect this request provide a way for the user to answer the web page request with it.

Because the extension emulates a HAD, it should require the user to pro-actively interact with it. Once that happens it will generate or fetch the necessary key material, produce a valid protocol response and return it to the web page that performed the request in the first place.

Most extensions have three main building blocks:

Communication

The components described above are executed with varying sets of restrictions, and for a good reason.