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

Shreyash Pawar — Fri, 09 Oct 2026 13:32:00 +0000

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’.

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.

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)

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)

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)

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)

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.

How to Safely Store or Share a .env File (Without Slack or Email Leaks)

Shreyash Pawar — Sun, 04 Oct 2026 11:20:17 +0000

The .env file contains all the credentials used across your application. It can prove fatal if received by any unauthorised entity. So, don’t share the credentials, or share them safely.

Why .env and why should it be kept secure?

To avoid unauthorised access to your services
Keeping your code and credentials separate
To easily change the configuration and credentials

Best practices for the purpose:

Do not share; just use different credentials for different individuals
Share through a secure platform
Share by encrypting the credentials

Developers frequently paste .env snippets into Slack, Microsoft Teams, or email threads. Once pasted:

It remains permanently stored in chat logs
It gets indexed by third-parties.
It is exposed if any chat bot or integration is compromised.

You should choose a secure platform if you want to store or share credentials. We'll see how to use Ilusion Secure Vault for this purpose and why it provides overall security.

What does the Ilusion Vault provide for the storing and sharing of env files?

You can choose whether to share the file or store it. For just sharing, you just need to create a shareable link without needing to be authenticated.

One-Off Secure Sharing (No Account Required)

Ilusion Vault has a page that lets you securely share any file or text as a guest user. So, after the expiry of the link, no record will remain. You can either add the content of the file as a text payload or upload the file itself.

There are various configurations you can use when creating the link:

Expiry duration: The access link will be deactivated after the set duration.
Burn-On-Read: Access will be revoked if the content is read once.
Decryption Passphrase: The key that will be used to encrypt/decrypt the content.
Custom Link Slug: Custom readable link for access

Steps to generate a secret:

Add an .env file on the tools/encrypted-share page
Choose an expiry period & enable burn-on-read
Enter the decryption passphrase and generate link
Use the link to view the .env

The link will be generated for accessing the content and will require the decryption key. The link will be deactivated after the chosen time during creation.

Encrypted Vault Storage (Persistent Workspace)

As the name suggests, the platform is a secure vault of files with zero-knowledge architecture. The .env file is stored in the vault with encryption. The encryption takes place in the browser itself, so only the encrypted content is saved to the server.

You have a stored file that can be shared easily by generating a link in the vault itself.

You should use Vault if you are frequently going to share the file; otherwise, the one-off option is much better.

Conclusion:

The .env file contains the configuration and keys that should be kept secure. You should use secure platforms like Ilusion Vault to share them. It has a zero-knowledge architecture with easier access.

DEV Community: Shreyash Pawar

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

What is Encryption?

Types of Encryption

Client-Side Encryption

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

What can be done with SubtleCrypto?

Different Web Crypto API functions used in Ilusion Vault

* subtle.importKey() method

* subtle.encrypt() method

* subtle.decrypt() method

* subtle.digest() method

Benefits and challenges in client-side encryption

Benefits of client-side encryption:

Challenges of client-side encryption:

How to Safely Store or Share a .env File (Without Slack or Email Leaks)

Why .env and why should it be kept secure?

Best practices for the purpose:

What does the Ilusion Vault provide for the storing and sharing of env files?

One-Off Secure Sharing (No Account Required)

Steps to generate a secret:

Encrypted Vault Storage (Persistent Workspace)

Conclusion: