Signing content with USB token Digital Signature from Front-end Javascript

Introduction

If you are working on decentralized-ids, then the chances are you would need to work with signing and encryption in your applications.

Next generation blockchain applications are centered around decentralized identities and one of the ways of improving the market adaption of such technologies is bootstrapping your application to start using the existing Digital Signature Certificates (DSC) that are commonly available as FIPS-compliant USB tokens these days.

However, if your blockchain application is a web application needs access to the digital identity from the front-end, i.e. accessing the USB token from front-end javascript, then it is a challening task, since majority of the existing front-end applications rely heavily on JAVA to access the digital signatures from the USB device. The reason being, browsers have limited direct access to USB token and javascript inside browser have very limited access to the host machine.

HWCrypto

hwcrypto.js is a small javascript library that allows working with hardware tokens easy for browser based applications.

However due to limitations of the currently browser API, it needs support from browser-extentions and native application (running directly on the host machine) to make this possible. The overall architecture, as presented by the hwcrypto documentation, is as below:

As shown in the above architectural diagram, the system involves three different pieces to work correctly.

Your javascript code that uses hwcrypto.js, running in the browser
A browser-extension that listens to your javascript requests and forwards them to the native application running on your host machine (where the browser is running)
A native application that runs on your host machine, which interacts with the USB token and resolves the requests made by your code (received through the browser-extension)

The code to access the certificate is pretty straightforward and easy with hwcrypto.js. The API looks as below:

  Promise window.hwcrypto.getCertificate(object options)

This above method allows the user to choose a certificate from the list of available smart card certificates present on the host machine.

However, for this to work correctly, you must install the browser-extension and native application, and they must be running. To do this, visit the link of Web eID and

Download and run the executable
Install the Browser Extension

If the setup is correct, then the above API call should result in certificate selection prompt, similar to below:

After selecting the certificate, it can be used to sign the content with the below API:

Promise window.hwcrypto.sign(object certificate, object hash, object options)

To verify everything is working fine, you can use these tests as a quick playground to validate the setup.

Note: Do NOT forget to plugin the USB token before running the tests. If no certificates are found on the host machine, one would see prompt similar to below:

If the Web eID application is running on your machine, then you should see its icon in the task notification bar. Right-clicking the notification icon allows you to see the list of websites currently using the digital certificate.

Checkout the demo code here to get started with accessing the USB digital certificates from the browser javascript code.

Conclusions

With HWCrypto and WebEID it becomes easy to access the digital signature certificates directly from the browser code. The setup currently may require multiple components interacting with each other, such as Browser Extension, native application etc, but as the web standards start to improve, things may become more easy. Digital and Decentralized Identities are the key for Distributed applications and allowing existing PKI digital certificates to be used from your code directly from web applications is a major step forward.

GK Palem, Nov 2018

Homepage Other Articles