DEV Community

Cover image for A Complete Guide to Client-Side Encryption and Implementation Using the Web Crypto API (SubtleCrypto)
Shreyash Pawar
Shreyash Pawar

Posted on Originally published at ilusion.io

A Complete Guide to Client-Side Encryption and Implementation Using the Web Crypto API (SubtleCrypto)

Client-side encryption can protect data confidentiality. It can be achieved in the browser using the Web Crypto API. We have used Client-side encryption using the Web Crypto API in Ilusion Vault to protect the data and achieved a zero-knowledge architecture for Ilusion File Storage.

What is Encryption?

Encryption is the method of encoding data into an unreadable format using a mathematical model so that only the authorised individual with the decryption key can decipher it.

The mathematical algorithms used in software are complex and difficult for beginners. It is better to look at a simple example to understand encryption.

Imagine a developer X wants to send an API key to another developer through an open channel. He can develop his own encryption algorithm. Suppose a developer encodes it by shifting every letter of the alphabet by a fixed amount, like encrypting the letter ‘a’ by shifting it by 2, resulting in the letter ‘c’.

Simple character shifting encryption example

Types of Encryption

We can divide encryption based on where encryption takes place or how the security is achieved.

Symmetric and Asymmetric encryption are the types of Encryption based on how many keys are involved in the process.

But the following are the encryption methods based on the level of security:

  • Client-Side Encryption
  • Server-Side Encryption
  • End-to-End Encryption

Here, we are going to discuss client-side encryption.

Client-Side Encryption

The title itself describes the concept: encryption done on the client side.
In this type of encryption, data is encrypted before sending to a server. So, even the server owner or administrator cannot read the data that is sent or uploaded.

An analogy I read that explains the concept well: Person X have to deliver a valuable item through a delivery service. Before handing it over, X first put it into a small passcode-protected safe. Now, the delivery guy does not know what is inside the safe or how to open it. But the recipient has the passcode to open the safe after receiving the delivery of the item. Here, person X is the client preserving the confidentiality of a certain object.

We are using client-side encryption to store data in Ilusion Vault to enhance the security of users’ data and their files. Before sending the uploaded file to the server, the file and its metadata are encrypted with the vault's key using AES-256-GCM encryption in the browser, and then only the encrypted ciphertext is sent to the server. Users' data/files will be secure on any cloud storage because the files are encrypted and can’t be decrypted without the decryption key.

Client-Side Encryption in Ilusion Vault

Implementing Client-Side encryption using the Web Crypto API (SubtleCrypto)

Web Crypto API makes it easier to implement cryptographic features in browsers, like encryption, without third-party libraries. Earlier, this was done using plain JavaScript, but it had some fallbacks. SubtleCrypto provides a high-quality solution by providing different cryptographic functions.

What can be done with SubtleCrypto?

  • Encryption and Decryption
  • Signing and verifying signatures
  • Generating hash values
  • Creating high-quality random values

It also minimises the effort for developers to implement cryptography in an application.

Different Web Crypto API functions used in Ilusion Vault

* subtle.importKey() method

We can’t use the key directly in the Web Crypto API. It has to be converted into an internal cryptoKey object. The importKey() method provided by SubtleCrypto can be used for this purpose.

Syntax:

importKey(format, keyData, algorithm, extractable, keyUsages)
Enter fullscreen mode Exit fullscreen mode

where:

  • format: the data format of the key
  • key: object containing the key
  • algorithm: object defining the type of key to import
  • extractable: to avoid exporting using SubtleCrypto.exportKey() or SubtleCrypto.wrapKey()
  • keyUsages: what can be done with the key?

* subtle.encrypt() method

The encrypt () method provided by SubtleCrypto encrypts the provided data.

Syntax:

encrypt(algorithm, key, data)
Enter fullscreen mode Exit fullscreen mode

where:

  • algorithm: object specifying the encryption algorithm,
  • key: containing the key to be used for encryption,
  • data: data to be encrypted

* subtle.decrypt() method

The decrypt() method provided by SubtleCrypto decrypts the encrypted data if the provided key matches the required key.

Syntax:

decrypt(algorithm, key, data)
Enter fullscreen mode Exit fullscreen mode

where:

  • algorithm: object specifying the algorithm to be used,
  • key: key to decrypt
  • data: data to be decrypted

* subtle.digest() method

The digest() method by SubtleCrypto generates a digest of the data using a hash function.

Syntax:

digest(algorithm, data)
Enter fullscreen mode Exit fullscreen mode

where:

  • algorithm: name of the algorithm
  • data: data to convert into a digest

Benefits and challenges in client-side encryption

Benefits of client-side encryption:

  • Mitigate the risk of Data breaches: Even if a data breach occurs on the server, your data might not be read.
  • Enhanced security: By implementing encryption on the client side, we are enhancing the confidentiality of the data.
  • Accessible to users: Only the user has the keys to decrypt the data. So, it greatly enhances the trust by users.

Challenges of client-side encryption:

  • Managing the keys: Users are in full control of their encryption keys. So, losing the key means losing the data.
  • Limitations of the client’s device: There might be a larger piece of data that needs to be encrypted with higher iterations. The client’s device needs to be powerful to complete it in the minimum time.
  • Limited control by the server: Encryption is done on the client side, so there is limited control for the server. The server cannot read or alter the data, even if doing so is essential.

It is best practice for applications to implement client-side encryption for better security and to gain users' trust. Using functions provided by the Web Crypto API, it is easier to implement cryptographic functions in an application.

Top comments (0)