Encrypt Data Collected in the Browser

As developers, we often need to encrypt our end-users’ data, and that data often originates in the browser. Evervault offers two methods to encrypt data that’s collected in the browser: using a client-side SDK, or using Inbound Relay.

Evervault offers client-side SDKs in JavaScript and React.js, each of which expose an encrypt() function which can be used to easily encrypt data directly in the browser.

Inbound Relay is a network proxy that can be configured to encrypt data that’s sent from your client to your server.

We’re going to cover both methods in the guide below.

Encrypt using an SDK

To encrypt data using React.js, you first need to install our React.js SDK.

1
# Using npm
2
npm install @evervault/react
3
4
# Using yarn
5
yarn add @evervault/react

You can initialize the React.js SDK by passing your TeamID and App ID to the <EvervaultProvider/> . Both IDs can be found in the Evervault Dashboard.

1
import { EvervaultProvider } from '@evervault/react'
2
import ChildComponent from '../ChildComponent'
3
export default function App() {
4
return (
5
<EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
6
<ChildComponent />
7
</EvervaultProvider>
8
)
9
}

Once you've added the <EvervaultProvider>, you can access the useEvervault() hook in its children. The useEvervault() hook returns an object which includes an encrypt() function. The encrypt() function can can be used to encrypt plaintext data in your application.

1
import { useState } from 'react'
2
import { useEvervault } from '@evervault/react'
3
4
export default function ChildComponent() {
5
const evervault = useEvervault()
6
const [message, setMessage] = useState('')
7
8
const handleSubmit = async (e) => {
9
e.preventDefault()
10
const encryptedMessage = await evervault.encrypt(message)
11
console.log(encryptedMessage)
12
}
13
return (
14
<form onSubmit={handleSubmit}>
15
<input value={message} onChange={(e) => setMessage(e.target.value)} />
16
<button>Submit</button>
17
</form>
18
)
19
}

Encrypt using Inbound Relay

An isometric drawing portraying Inbound Relay. Data is sent from the browser to the server, and it's encrypted by Inbound Relay during the request.

Create an Inbound Relay

Inbound Relay is a proxy that can be configured to encrypt or decrypt data during a network request. In this example, we want to encrypt data that’s collected in the browser and sent to the server.

We’ll use a RequestBin endpoint as our Inbound Relay destination. In practice, this would be the base URL of your API. We can create a RequestBin by navigating to requestbin.com/r, where we will be given a temporary endpoint that we can send requests to.

To create an Inbound Relay, navigate to the Inbound Relay tab in the Evervault Dashboard and click Create Inbound Relay. Add the RequestBin endpoint to the destination field.

A screenshot of the Evervault Dashboard showing an Inbound Relay being created with a RequestBin endpoint as its destination

Integrate the Proxy

When you create an Inbound Relay, Evervault provisions a Relay Domain that you can send requests to. This domain is available in the Inbound Relay dashboard, and takes the following form: [DESTINATION_URL].relay.evervault.com. Any requests that are sent to this domain will be proxied via Inbound Relay before being forwarded to the RequestBin endpoint that we created. To test the proxy, let’s send a POST request to our Relay Domain using cURL. We’ve included some dummy sensitive data (email and password) in the body of the request:

1
curl [DESTINATION_URL].relay.evervault.com \
2
--request POST \
3
--header 'Content-Type: application/json' \
4
--data '{"email":"claude@shannon.com", "password":"12345678"}'

If you run the snippet, you’ll notice that the request appears in your RequestBin logs, but the values for email and password are still in plaintext. To encrypt these values during the request, we need to configure these fields to be encrypted in the Inbound Relay dashboard. Let’s do that next.

Configure the Proxy

In order to encrypt values during the proxied request, we’ll need to tell Relay which fields we want to encrypt. In the Evervault dashboard, navigate to the Inbound Relay you created, and click the Secured Fields tab. Click Add Fields, include the fields email and password under Encrypted Fields, then hit Save.

A screenshot of the Evervault Dashboard showing a form that configures two fields to be encrypted: email and password

If you send the cURL request again, you’ll notice that the values for email and password have been encrypted by Inbound Relay during the request.

1
curl [DESTINATION_URL].relay.evervault.com \
2
--request POST \
3
--header 'Content-Type: application/json' \
4
--data '{"email":"claude@shannon.com", "password":"12345678"}'

Although we’re using a cURL request here, Inbound Relay can be called anywhere that you have access to a network request.

Summary

Using an SDK or Inbound Relay to encrypt data in browser is a particularly secure pattern, as it means that your server never handles sensitive data in plaintext. To secure sensitive data across your stack, you may need to decrypt, process or share encrypted data. We’ve outline some other common patterns below.