Secure Ninja Forms in Wordpress

Chad Sigler
Jan 29 · 6 min read

Secure WordPress Ninja Form Submissions using the Virtru SDK

Photo by Webaroo.com.au on Unsplash

Welcome back to the Virtru Technology Blog! Today I will be sharing an idea that came from our digital marketer, Osman Sheikh (Medium) and created by Olesksii Veprev (Github). For our 2nd Annual Virtru Hackathon, he suggested using the Virtru Developer Platform to encrypt content on Ninja Forms, a popular WordPress plugin. In Osman’s 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

User Features

  • Virtru Encrypted Form submissions

Admin Features

  • Admin Authentication

Installation

Installing NinjaForms & Virtru for NinjaForms.

Install

  • Log in to WordPress as the Admin

Secure Form

  • Create a Ninja Form

End-User Experience

End-user form submission & policy management.

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

Admin Management

Admin access to protected submission data.

Authenticate

  • Navigate to the NF Virtru Plugin tab

View Submissions

  • Navigate to the Ninja Forms Tab

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

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

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

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

Virtru Technology Blog

Building developer tools in the interest of data protection and sharing.

Chad Sigler

Written by

Platform Team — Virtru

Virtru Technology Blog

Building developer tools in the interest of data protection and sharing.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade