A Simple Approach to Securing Web Forms
Securing JS Web Forms with client-side encryption using the Virtru SDK
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
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.