Secure WordPress Ninja Form Submissions using the Virtru SDK

Welcome back to the Virtru Technology Blog! Today I will be sharing an idea that came from our digital marketer, Osman Sheikh (Twitter| Medium). For our 2nd Annual Virtru Hackathon, he suggested using the Virtru Developer Platform to encrypt content on Ninja Forms, a popular WordPress plugin. In his own words:

As a digital marketer for Virtru, I have a love-hate relationship with Wordpress. I have fond memories of building my first website on Wordpress.com, then moving to a self-hosted version after I managed to convince my parents that this whole internet thing wasn’t a fad. Since then I’ve built everything from personal websites to blogs to eCommerce sites for employers. I’ve also built plugins to enhance WordPress functionality.

The reason I love Wordpress is the same reason I hate it. It’s an easy-to-use platform where marketers and developers alike can build simple websites in no time at all. It’s simplicity also means that plugins are required for any advanced functionality. While Wordpress is pretty secure out of the box, plugins can be created and published by anyone rendering your site and the data you collect insecure. Additionally, plugin overload can result in a bloated, slow and insecure site.

We should build a simple solution in JavaScript that encrypts data collected by Ninja Form’s Wordpress plugin before it is exposed to insecure plugins or multi-tenant servers.

Protect Form Data at Creation

One of the most common WordPress attack vectors is form plugins. Most of them leave you exposed because they all have the same level of access, resulting in open season on the data collected by your site and its forms. Healthcare companies or nonprofits (with minimal IT resources) that want to collect customer data online without risking data loss, compliance violations, or site performance are limited in their options today.

The goal of this project is to extend the Ninja Forms extension using the Virtru JavaScript SDK to encrypt the form data. The data should be encrypted client-side and the submitter should be the owner. This ensures the data is never exposed server-side to insecure plugins or multi-tenant servers.

Quick Links

• Requirements
• Features
• Installation
• End-User Experience
• Admin Management
• Authentication and Authorization
• Code
• Conclusion

Requirements

• The latest version of WordPress
• Ninja Forms Plugin
• Virtru Ninja Forms Plugin Extension
• Email assigned to “WordPress Site Administrator”

Features

User Features

• Virtru Encrypted Form submissions
• Site admin added to encryption policies
• Virtru Policy Manage Page

Admin Features

• Admin Authentication
• View Virtru Encrypted Data
• View Virtru Encryption Policy
• View Encryption Policy Admin
• Encrypted Export

Installation

Install

• Log in to WordPress as the Admin
• Install and Activate Ninja Forms
• Install and Activate Virtru for Ninja Forms

Secure Form

• Create a Ninja Form
• Add Ninja Form to a Post

End-User Experience

Form Usage

The user experience of Virtru + Ninja Forms is unchanged until the user clicks the submit button. When the user clicks submit, the data is caught by the Virtru extension. Virtru requires the data owner (form submitter) to authenticate the first time a user submits data. Once the data is encrypted, it is passed back to Ninja Forms for final processing and storage. The data is never left unencrypted on a server. When the submission is complete, the user is notified and offered a link to the policy management area.

Policy Management

The Policy Management area of the Virtru extension allows a user to:

• Add Users to a policy
• Remove Users from a policy
• Revoke policy

Admin Management

Authenticate

• Navigate to the NF Virtru Plugin tab
• Follow steps to activate
• The admin can view Virtru Encrypted submitted data

View Submissions

• Navigate to the Ninja Forms Tab
• Navigate to the Submissions Area
• Select the appropriate form
• Click Edit on the appropriate record
• Click Decrypt to view the unencrypted submissions

Authentication and Authorization

Why Authenticate?

The Virtru encryption policy controls who has access to the keys and policy ownership requires authentication. All policies are owned by the policy creator, the submitter. This means the submitter alone has access to add and remove people from the policy. To be active in the Virtru system, a user must be authenticated to ensure they are who they say they are.

Who Owns the Data?

For this implementation, the form submitter owns the data. This means that the submitter can always revoke their data via the policy management page. The data owner can also add and remove people from the policy.

Who Can Access the Data?

To ensure the data submitted can be used by the site, the site “Administration Email Address” is added to the security policy. The Administration Email Address is the email address located under Settings -> General. The Administration Email Address can only view the data and cannot modify the policy. In the extension’s current state, the exported data stays encrypted. The only time the Site Admin can view the unencrypted data is from the record edit area of Ninja Forms.

Who Accessed the Data?

The Virtru Audit Log tracks all access and modifications to the Virtru Policy giving the data owner complete visibility. This information enables the data owner to take action by adding or removing users and revoking access to the policy.

To the Code

Form Submission Hook

To encrypt the form data, we must intercept the request prior to Ninja Forms storing the form data.

$.ajaxSetup({
        beforeSend: ajaxBeforeSend
});

Once caught, the settings object is inspected for:

• nf_ajax_submit
• isEncrypted: false

If the settings match, then the data object is encrypted and passed back to Ninja Forms for storage. The encryption flow operates as follows:

1. Authenticate against Virtru
2. Create Virtru client
3. Create encrypt options
4. Encrypt

Authentication

I decided to leverage the Virtru Auth Widget to ensure authentication against the Virtru SaaS worked as expected and with minimal effort. Using the Virtru Auth Widget was as easy as adding a couple of lines.

wp\_enqueue\_script(‘auth-widget’, ‘https://sdk.virtru.com/js/latest/auth-widget/index.js', array(), false, true);

Now, we can use the Auth widget. We need to create an element in the DOM where we will mount the widget.

<div id=”[UNIQUE\_ID]”></div>

And then run code for the widget mounting

Virtru.AuthWidget(‘[UNIQUE\_ID]’, {OPTIONS});

In the second parameter, we can pass the options object. We pass in the afterAuth method. This method will be triggered after the user successfully authenticates with Virtru.

Decrypt Form Data

When an admin opens a submission we can detect encrypted parts by the custom span we added during encryption. We use a similar flow for encryption:

1. Authenticate against Virtru
2. Create Virtru client
3. Create decrypt options
4. Decrypt

Ninja Forms plugin initializes Backbone during the work. So we can use Backbone listeners to detect rendering forms view.

jQuery(document).ready(($) => {
    const nfRadio = Backbone.Radio;
    const radioChannel = nfRadio.channel( 'file\_upload' );
    const uploadController = Marionette.Object.extend({
        initialize: function () {
            this.listenTo(radioChannel, 'render:view',
                this.updateFileUpload);
        },
        updateFileUpload: function (view) {
            const $file = $( view.el ).find( '.nf-element' );
            $file.fileupload({
                submit: function(e, data) {
                    if (!data.isEncrypted) {
                        e.preventDefault();
                        [MOUNT\_ENCRYPT\_APP]
                    }
                }
            });
        }
    });
    new uploadController();
});

Encrypt Form Data

Encryption looks very similar to decryption except that we return an HTML file. Why HTML? It’s simple to share across different platforms and easy for anyone to open in the Virtru Secure Reader.

const encryptedBuffer = await encryptedData.toBuffer();
const blobFile = new Blob([encryptedBuffer], {type: ‘text/html’});
const File = new File([blobFile], `${file.name}.tdf.html`, {type: “text/html”});

Manage Policy

To make this extension useful for users and admins alike, we created a policy management page for both parties. We used React to build the policy management page. It includes the following functionality:

1. Encrypting data
2. Decrypting data
3. Adding/removing users
4. Downloading files
5. Revoking policy
6. Audit log

const policy = await client.fetchPolicy(policyId);
const updatedPolicy = policy.builder()
    .addUsersWithAccess(recipientEmail)
    .build();
await client.updatePolicy(newPolicy);
await client.revokePolicy(policyId);

Conclusion

Integrations always look easy from the outside, until you dig in. Starting with a fantastic Extension, Ninja Forms was the way to go. Leveraging their great documentation and large active community made the integration as painless as possible. The encryption portion was super easy as the widgets and encrypt/decrypt calls are very straight forward. By using this Virtru project, WordPress Administrators can secure their client’s most sensitive data with confidence.