Secure Client-Side Encryption with Ephemeral RSA Key Pairs: A Modern Approach

Photo by Markus Spiske on Unsplash

While working on a financial application, I encountered an interesting challenge: all data sent between services had to be encrypted. Each backend service was using its own public-private key pair to perform asymmetric encryption. However, while working on the frontend, I realised that request payloads and response data were displayed in plaintext in the browser’s network tab.

Initially, we considered implementing similar symmetric or asymmetric encryption to secure this data, but this would necessitate keeping private keys on the client-side, either in the code or in environment variables, either of which are not secure. After delving deeper into the issue, I found a solution: generate the asymmetric key pair during runtime, ensuring that the keys reside only in the browser’s memory and are never kept permanently.

This solution, using ephemeral RSA key pairs, allowed us to provide strong encryption without compromising security. In this article, I’ll walk you through the problem, the solution, and show how you can implement this approach in a sample React frontend and Node.js backend.

Why Client-Side Encryption Matters

When dealing with sensitive data such as login passwords, personal information, or payment information, it is vital to maintain secrecy while in transit. Although the HTTPS protocol already handles data encryption and decryption, the data remains in plaintext in the browser’s network tab, which poses a danger for MITM attacks.
By encrypting the data on the client side, we ensure that sensitive information is never displayed in readable form, even if obtained by an attacker.

Ephemeral RSA Key Pairs: What Are They?

RSA encryption is a widely used public-key encryption technique. In the context of client-side encryption, ephemeral RSA key pairs mean that the keys are generated for a short period, are stored only in memory, and are discarded once they are no longer needed.

Ephemeral keys provide the following benefits:

1. No Persistent Key Storage: The keys are never saved to disk or any persistent storage, reducing the risk of key theft.
2. Enhanced Privacy: Even if the client device is compromised, the temporary keys are useless once discarded.
3. Seamless Encryption: The data remains encrypted from the frontend to the backend and back to the frontend, ensuring confidentiality in transit.

Using Ephemeral RSA Key Pairs in a React Frontend and Node.js Backend

Let’s walk through an example of how to implement client-side encryption with ephemeral RSA keys in a React frontend and a Node.js backend. In this example, the React frontend will:

• Generate an ephemeral RSA key pair.
• Encrypt payload (sensitive data + client’s public key) using the server’s public key.
• Send the encrypted data to the backend.
• Decrypt the response from the server using the ephemeral private key.

On the backend, the Node.js server will:

• Receive the encrypted data.
• Decrypt it using the server’s private key.
• Process the decrypted data (e.g., verifying credentials or handling a request).
• Store client’s public key with other session details.
• Encrypt the response with client’s public key and send it back to the client.

For convenience, I have packaged the client-side ephemeral key generation, encryption and decryption functions in an NPM package (ephy-rsa) that I’m going to utilise in this demo.

Let’s get started.

Frontend (React)

Boot up a new React application (or implement in your existing application) and install ephy-rsa for ephemeral key generation and handing encryption and decryption.

npm install ephy-rsa

or

yarn add ephy-rsa

Replace your App.js content with the following code.

In the above component, we are initialising the RSAKeyService and using it to generate an ephemeral RSA key pair. Private key from this key pair is stored in-memory only and public key is shared with the backend. Backend will use this public key to encrypt all the responses.

We are also fetching server’s public key and using it to encrypt payload for all the API requests. Backend will decrypt this payload using its private key.

Backend (Node.js)

For backend, we are creating a simple Express server where we are generating a similar RSA key pair. Private key from this key pair is kept securely on the backend only, whereas public key is shared with the frontend. Frontend will use this public key to encrypt the payload for all the requests. Backend will be able to decrypt the payload using the corresponding private key.

As stated earlier, backend will also encrypt all the responses using client’s public key which client will be able to decrypt using its ephemeral private key. This will result in a secure communication and no plaintext data will be visible in the browser’s network tab or anywhere else during the transmission.

Here’s a self-explanatory sequence diagram for better understanding.

Conclusion

By using client-side encryption with ephemeral RSA key pairs, sensitive data can be protected before it ever leaves the user’s device, ensuring that only the server has access to the decrypted data. This approach adds a critical layer of security to modern web applications, helping to mitigate risks such as data interception and key theft.

In this article, we’ve demonstrated how to implement this encryption scheme with a React frontend and Node.js backend. The approach ensures that sensitive data remains encrypted during transit, giving users confidence in the security of their personal information.

Important Links

• Encryption Library: ephy-rsa
• GitHub Repository: ephy-rsa GitHub
• Example Implementation: ephy-rsa Example