A Simple Approach to Securing Web Forms

Securing JS Web Forms with client-side encryption using the Virtru SDK

Photo by Tobias Tullius on Unsplash

Web forms are a standard and ubiquitous way for companies to collect data online. This blog dives into how developers can ensure the security of HTML/JS forms using client-side encryption. The data owner will be the form submitter and the form owner will be granted access to the encryption policy. Web forms come in many flavors, but for this post, I will be focusing on HTML forms with Vanilla JavaScript to handle and post the text input and files to S3.

Requirements:

• Encryption in transit
• Encryption at rest
• S3 for form text fields as JSON
• S3 for form files
• Form Submitter (client) controls data
• Form Owner has access to encrypted data

Technologies Used

• AWS S3 Storage
• Virtru JavaScript SDK
• vanilla JavaScript
• HTML

Github Project

Data Flow Diagram

Watch it in Action

What are Web Forms?

Web forms are from the beginnings of the Internet as we know it and allow web pages to take data from a user and submit it.

There are many input types. For example:

• Text Field
• Radio Button
• Drop Down List
• List
• Files

Example Webform

Security Issues with Collecting PII in Web Forms

Transport Security

In the long, long ago, in the before time, there was only HTTP. Now, most sites that handle sensitive data use HTTPS (TLS). Forms are filled in on the web client and sent to the server. Many forms are secured via Transport Level Security (TLS).

Issue:

• Data is not encrypted client-side
• Data is sent in the clear over the encrypted channel
• Data is unencrypted once the server receives the data

At Rest Encryption
At rest encryption is great, but the technology is usually tied to the storage infrastructure. Each technology implements encryption differently.

Example:

• Database Encryption — Transparent Database Encryption (TDE)
• Disk Encryption — Encrypted File System (EFS)
• Disk Encryption — Bitlocker
• Disk Encryption — eCryptfs

Secure My Form!

The easiest way to add data security to your form is through a client-side encryption SDK and SaaS key management. When choosing a solution for this make sure it offers;

• Client-side encryption — all data is encrypted prior to submission
• The client can revoke access at any time
• In-transit encryption
• At-rest encryption
• Split knowledge (keys and data remain separate)

Let’s Talk about the Code

UI Elements

HTML controls include:

• Text Box — First Name
• Text Box — Last Name
• Text Box — Email
• File Input — File to Upload

Form Owner

A small but very important variable that controls access to the encrypted files once they are submitted. This user will be granted rights to access the TDF and decrypt the files contained.

Control UI Elements

Various functions to consistently control the display and hiding of UI elements.

Submit Button Click

Fires triggerSubmit function when the submit button is clicked.

Call triggerSubmit

Displays the Virtru Authentication mounted in the authModal div.

Call afterAuth

Once a form user has successfully authenticated, the afterAuth function is called. The Virtru Authentication div is hidden and call submitFormData.

Call submitFormData

This function performs the heavy lifting of the form.

Steps:

• Display a spinner to show the form is processing something
• Creates JSON string from form text data
• Generates a UUID to prepend to the file name on S3
• Encrypt and Upload JSON file to S3
• Encrypt and Upload File to S3

Encrypt and Upload Form JSON Data

Encrypt and Upload Form File

Conclusion

Believe it or not, insecure web forms containing sensitive data are pretty common, especially in small businesses. By way of example, a healthcare provider that’s ready to throw out their fax machine may want to collect customer data on their website. Virtru SDK offers developers a quick path to secure data collection without a heavy database implementation.

Every layer added to reinforce security for client data can build trust and ensure the security of the data throughout its lifecycle; including inputs to web-based forms. Developers and compliance teams can feel confident that their customer data is secure at rest and in transit while adding minimal friction. Patients can feel confident that their data is safe and always revokable.