VGS Add-On for Netlify

The Very Good Security (VGS) add-on for Netlify lets anyone build secure forms to collect sensitive data (payment cards, PII, health information, etc.) without having sensitive data reside within your (or Netlify’s) servers. Your systems are protected from the liability, breach risk and compliance burden linked to holding such data.

With this simple add-on, you can build secure forms that ensure no sensitive data ever actually touches your servers. Instead, the data is aliased in real-time and stored in secure vaults until needed. You are still able to use and exchange the data as needed, but your systems do not need to hold the data itself. This removes all or most of your data liability, while drastically reducing your risk exposure. It also lets you achieve things like PCI compliance instantly by inheriting VGS’ security posture.

Some examples of what you can do with the VGS add-on include:

  • Collect credit card data in a PCI-compliant manner
  • Fast-track PCI, SOC2 and other compliance certifications
  • Take in personally identifiable information (PII) and healthcare data securely
  • Collect & store banking (ACH), and/or billing details securely

You can use this add-on to collect any kind of data that you don’t want to store yourself, but that you might still need to use for some business purpose.

How to use the VGS Netlify Add-On

If you don’t already have a site on Netlify, you’ll need to create and deploy your site to Netlify. Visit our example repo with sample code and instructions: https://github.com/verygoodsecurity/netlify-addon-example

Once your Netlify site is up and running, follow these steps to install the VGS Add-On:

  • Install netlify-cli. Netlify docs https://www.netlify.com/docs/cli/
  • Run netlify addons:create vgs from your site’s directory.
  • Run netlify addons:auth vgs, to authenticate and give the add-on access to your VGS account
    • You will need to create an account with VGS if you do not already have one.
  • From there, follow interactive guide to configure the add-on.

Secure Form Example

To secure a form with VGS, make sure the <form> element contains both netlify and secure attributes. Individual input fields that you want to redact and vault securely must have the data-secure-field attribute added as well.

Note the following requirements for securing fields using this add-on:

  • name & netlify form attributes are required by Netlify Forms
  • secure attribute enables VGS Collect to secure your form.
  • data-secure-field attribute identifies which input field(s) should be secured
<form name="contact" method="post" autocomplete="off" netlify secure>
  <p>
    <label for="name">Basic Field</label>
    <input type="text" name="name" id="name" />
  </p>
    
  <p>
    <label for="ssn">Secure Field</label>
    <input type="text" name="secure" id="ssn" data-secure-field />
  </p>
  <p>
    <button type="submit" id="submit">Send</button>
  </p>
</form>

How does it work?

VGS addon includes a JS snippet with the configuration of VGS Collect for your site. VGS Collect lets you fully control the user experience for form data collection while keeping your systems out of compliance scope.

CLI commands

netlify addons:create vgs

This command just enables you add-on for netlify site. To make it actually redact your form data you need to run addons:config

netlify addons:auth vgs

Authenticates you on VGS addon side and allows you to configure addon for ~15 minutes.

netlify addons:config vgs

Configures addon according to your site. It does a couple if actions:

  • creates organization and vault in you VGS account (only in first run)
  • parses your site and gets form & field names which should be secured.
  • configures inbound route in VGS, to redact you form fields

Whenever you change field names on you site, you need to re-run this command to re-configure route.

netlify addons:delete vgs

Deletes addon.

Where does my data go?

When sensitive data is submitted via a form that’s secured by the VGS add-on, the form fields that you have specified are intercepted by VGS. The sensitive data is transformed in real-time, and you receive a non-sensitive “alias” (aka “token”) that you can use just like the real data. Your alias maps to the original, sensitive data which gets vaulted in our highly secure environment. VGS platform is certified for PCI Level 1, SOC2 Type 2, EI3PA, HIPAA and more. You can read VGS’ Security Statement for more details.

Styling

To style input you need to add some CSS to iframe, here is an example:

[data-secure-field] iframe {
  border: 1px solid #dfdfdf;
}

Known issues

  • If you don’t see you submissions, check spam folder - they might be marked as a spam. If it blocks your integration, please contact VGS support, we will help to find a solution.
  • Please keep in mind, you need to run netlify addons:auth vgs if you were inactive for some time: our auth session is short living