Electronic Signature Using The WebCrypto API
Join the DZone community and get the full member experience.Join For Free
Sometimes we need to let users sign something electronically. Often people understand that as placing your handwritten signature on the screen somehow. Depending on the jurisdiction, that may be fine, or it may not be sufficient to just store the image. In Europe, for example, there's the Regulation 910/2014 which defines what electronic signatures are. As can be expected from a legal text, the definition is rather vague:
'Electronic signature' means data in electronic form which is attached to or logically associated with other data in electronic form and which is used by the signatory to sign.
Yes, read it a few more times, say "what?" a few more times, and let's discuss what that means. And it can mean basically anything. It is technically acceptable to just attach an image of the drawn signature (e.g. using an HTML canvas) to the data and that may still count.
But when we get to the more specific types of electronic signature - the advanced and qualified electronic signatures - things get a little better:
An advanced electronic signature shall meet the following requirements:
(a) it is uniquely linked to the signatory;
(b) it is capable of identifying the signatory;
(c) it is created using electronic signature creation data that the signatory can, with a high level of confidence, use under his sole control; and
(d) it is linked to the data signed therewith in such a way that any subsequent change in the data is detectable.
That looks like a proper "digital signature" in the technical sense - e.g. using a private key to sign and a public key to verify the signature. The "qualified" signatures need to be issued by a qualified provider that is basically a trusted Certificate Authority. The keys for placing qualified signatures have to be issued on secure devices (smart cards and HSMs) so that nobody but the owner can have access to the private key.
But the legal distinction between advanced and qualified signatures isn't entirely clear - the Regulation explicitly states that non-qualified signatures also have legal value. Working with qualified signatures (with smartcards) in browsers is a horrifying user experience - in most cases, it goes through a Java Applet, which works basically just on Internet Explorer and a special build of Firefox nowadays. Alternatives include desktop software and local service JWS applications that handle the signing, but smartcards are a big issue and offtopic at the moment.
So, how do we allow users to "place" an electronic signature? I had an idea that this could be done entirely using the WebCrypto API that's more or less supported in browsers these days. The idea is as follows:
- Let the user type in a password for the purpose of signing.
- Derive a key from the password (e.g. using PBKDF2).
- Sign the contents of the form that the user is submitting with the derived key.
- Store the signature alongside the rest of the form data.
- Optionally, store the derived key for verification purposes.
Many of the pieces are taken from the very helpful webcrypto examples repo. The hex2buf, buf2hex, and str2ab functions are utilities (that sadly are not standard in JS).
What the code does is straightforward, even though it's a bit verbose. All the operations are chained using promises and "then," which, to be honest, is a bit tedious to write and read (but inevitable I guess):
- The password is loaded as a raw key (after transforming to an array buffer).
- A secret key is derived using PBKDF2 (with 100 iterations).
- The secret key is used to do an HMAC "signature" on the content filled in by the user.
- The signature and the key are stored (in the UI in this example).
- Then the signature can be verified using: the data, the signature, and the key.
You can test it here:
Having the signature stored should be enough to fulfill the definition of "electronic signature." The fact that it's a secret password known only to the user may even mean this is an "advanced electronic signature." Storing the derived secret key is questionable - if you store it, it means you can "forge" signatures on behalf of the user. But not storing it means you can't verify the signature - only the user can. Depending on the use-case, you can choose one or the other.
Now, I have to admit I tried deriving an asymmetric keypair from the password (both RSA and ECDSA). The WebCrypto API doesn't allow that out of the box. So I tried "generating" the keys using
deriveBits(), e.g. setting the "n" and "d" values for RSA, and the x, y, and d values for ECDSA (which can be found here, after a bit of searching). But I failed - you can't specify just any values as importKey parameters, and the constraints are not documented anywhere, except for the low-level algorithm details, and that was a bit out of the scope of my experiment.
The goal was that if we only derive the private key from the password, we can easily derive the public key from the private key (but not vice-versa) - then we store the public key for verification, and the private key remains really private so that we can't forge signatures.
I have to add a disclaimer here that I realize this isn't very secure. To begin with, deriving a key from a password is questionable in many contexts. However, in this context (placing a signature), it's fine.
As a side note - working with the WebCrypto API is tedious. Maybe because nobody has actually used it yet, so googling for errors basically gives you the source code of Chromium and nothing else. It feels like uncharted territory (although the documentation and examples are good enough to get you started).
Whether it will be useful to do electronic signatures in this way, I don't know. I implemented it for a use-case that it actually made sense (party membership declaration signature). Whether it's better than a hand-drawn signature on a canvas - I think it is (unless you derive the key from the image, in which case the handwritten one is better due to a higher entropy).
Published at DZone with permission of Bozhidar Bozhanov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
How To Use Pandas and Matplotlib To Perform EDA In Python
Operator Overloading in Java
Mastering Time Series Analysis: Techniques, Models, and Strategies
Exploratory Testing Tutorial: A Comprehensive Guide With Examples and Best Practices