Unlocking the Web Cryptography API
The Web Crypto API is a powerful tool in securing your web applications—and staying proactive about security.
Security on the web has become a focal point in recent years as more and more services go digital, and for good reason. After hundreds of data leaks and large-scale hacks over the last decade, users look to applications and platforms that care about the safety and integrity of their data. Browsers are a common pain point for exposing all kinds of sensitive data and their lack of security is well known.
There are a lot of browser vulnerabilities to consider when developing a web application, from authentication patterns to Cross Site Scripting (XSS) attacks to insufficient CORS configurations. To solve for most of these scenarios, developers would first look to an NPM module and avoid reinventing the wheel.
Fortunately, modern browsers do, in fact, provide some powerful tools to help secure your application.
Enter the Web Crypto API! (And no, it’s not an API for cryptocurrency.)
Web Crypto API
The Web Crypto API is an interface that exposes a set of methods called “cryptographic primitives” to aid in implementing secure patterns. While it was originally recommended by W3C in 2017, market-wide adoption takes time when attempting to apply standards to all the major browsers. Today, most modern browsers support Web Crypto on both desktop and mobile application versions.
What is a “cryptographic primitive” anyway?
A “cryptographic primitive” is any one of the core operations that are used to build cryptographic systems. This group includes actions such as encryption, signing, random value generation, and hashing. Implementing one or more of these practices properly can provide important and often necessary security and integrity to a system.
WARNING! This article should not be regarded as a full length guide to cryptographic processes. Serious care should be taken when implementing cryptographic functionality. Always do your research! (Please see references at the end for a starting point.)
Benefits of using the API
Like any set of tools, there are right and wrong ways to use these operations. Implementing cryptographically secure solutions is difficult. There is large margin for error depending on the developer’s contextual security knowledge. While this is important to remember, learning how to use a tool is always a good place to start.
Let’s discuss some of the upsides of Web Crypto being readily available in major browsers.
Standardization
Being able to leverage the same out-of-the-box tools across environments minimizes application complexity and improves the developer experience. Uniform browser features means developers can share a mutual understanding of not only features as a whole, but the APIs that control those features. If you are using third-party tools, it adds another dependency and layer of complexity to keep track of.
The same could be said when working on the server-side, as Node.js does have its own native crypto module you should consider as well and, as of Node v15, the crypto module also exports a mirror interface of the Web Crypto API (v17.4.0 for SubtleCrypto). This means you could use the same implementation in both the browser and the server!
Webpage & bundle sizes
When using tools already available in the browser, there is no need to load additional libraries to solve your cryptographic needs. Load times for website and web applications are of high priority in a world where users expect a full render within a few seconds of clicking “Go.” If your project utilizes client-side encryption and you’re currently implementing an external library, there are one (or more) modules that need to be loaded into the browser. These external dependencies increase bundle size and thus load time.
For instance, one of the most popular crypto libraries on NPM (crypto-js) receives over 4 million weekly downloads. It also clocks in at 444 kB in size when unpacked. When you can accomplish the same functionality with native APIs (browser or server), one should reconsider reaching for yet another external dependency.
Encourage prioritizing security
The increasingly high availability of the Web Crypto API will (hopefully) push more and more developers to care about security across the stack. While this is not a drop-in solution for web security, it is important developers leverage the tools available to them. Many how-to guides and commonly used framework examples encourage insecure practices such as storing plaintext authentication credentials in a browser’s LocalStorage (do not do this).
Considerations
Security toolkits are not without their downfalls. When considering whether or not to implement a new tool, it is important to consider the pitfalls and obstacles ahead of you.
Potential misuse
The operations exposed by the Web Crypto API can easily be misused if someone is not careful or does not understand the purposes of the available algorithms. Lost or poorly stored keys can result in loss of data for users or the exposing of sensitive data in public forums. Incorrect algorithm configurations can expose vulnerabilities and increase the attack surface of your application. Safe key storage and algorithm implementation are essential and, when not handled correctly, can render a security implementation ineffective, or worse, a hazard.
Browser inconsistencies
While standardizations have come a long way in pushing adoption, maintaining and extending across a multitude of browsers is difficult to do altogether and some browsers often lag behind in feature support. While the Web Crypto API is readily available across most browsers, the onus falls on the developer to ensure that their implementations work across consumer devices. Using tools such as caniuse can aid in this effort. Always make sure that the operation, algorithm, and configuration options are supported by as many browser engines as possible and consider a polyfill when absolutely necessary.
Next steps
Security today is often advertised as a feature, but it’s really a core principle of systems architecture. When developing an application, particularly for the web, it’s important to consider security early and as often as possible. Even with more and more “batteries included” web frameworks emerging and becoming more popular, security implementations often require extra libraries or configuration to sufficiently lock down a system.
When you stop to consider CSRF tokens, XSS attack protection, and the like, think about whether your application could benefit from a more direct cryptographic implementation. The Web Crypto API is a powerful tool to aid in this effort and will hopefully teach more web developers about cryptography and its uses along the way.
To learn more about the basics of implementing some of these tools, check out the follow-up, The Web Cryptography API in Action!
