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.

Integration video:

img
Netlify Addon Integration
Watch video img
progress

Secure Form Example

To secure a form with VGS, make sure the <form> element contains both data-netlify and data-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 & data-netlify form attributes are required by Netlify Forms
  • data-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" data-netlify data-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>
This is a sample VGS echo server.
This is a HTTP port number to access.
This is an example of your API endpoint.
This is an example of your Credit reporting API endpoint.
This is an example of your Issuing platform API endpoint.
This is alias which you receive on redact step from your payload value. Please observe the code snippet of redact step.
More about the aliases available formats you can read at nomenclature page.
This is alias which you receive on redact step from your payload value. Please have a look on code snippet of redact step.
More about the available formats of alias you can read here.
This is a sample vault id.
Sign in to see your personalized example.
This is a vault id.
Sign in to see your personalized example.
This is a vault id.
Sign in to see your personalized example.
This is your vault id.
This is a vault environment.
These are an access credentials for a sample test vault.
These are an access credentials for a sample test vault.
This is a placeholder for your access credentials.
This is a sample vault url.
Sign in to see your personalized example.
This is a sample proxy vault url.
This is your vault url.
This is your proxy vault url.
This is a sample vault host.
This is your vault host.
This is your current Organization ID.
A pre-generated JS script placeholder for your current organization.
Sign in to see your personalized example.
A pre-generated JS script placeholder for your current organization.
Please talk to support in order to enable it for this organization.
This is your pre-generated JS script for your current organization.
The unique name that identifies a specific iframe.
Unique client ID used for VGS CLI authentication.
Please contact VGS Support in order to enable it for your organization.
Client secret used for VGS CLI authentication.
Please contact VGS Support in order to enable it for your organization.
Version of the CLI published on quay.io.
Command on the VGS CLI.
This is a full path to the certificate file.
This option allows curl to proceed without providing a TLS certificate. If you'd like to include your certificate, use --cacert [FILE].

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, 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;
}
This is a sample VGS echo server.
This is a HTTP port number to access.
This is an example of your API endpoint.
This is an example of your Credit reporting API endpoint.
This is an example of your Issuing platform API endpoint.
This is alias which you receive on redact step from your payload value. Please observe the code snippet of redact step.
More about the aliases available formats you can read at nomenclature page.
This is alias which you receive on redact step from your payload value. Please have a look on code snippet of redact step.
More about the available formats of alias you can read here.
This is a sample vault id.
Sign in to see your personalized example.
This is a vault id.
Sign in to see your personalized example.
This is a vault id.
Sign in to see your personalized example.
This is your vault id.
This is a vault environment.
These are an access credentials for a sample test vault.
These are an access credentials for a sample test vault.
This is a placeholder for your access credentials.
This is a sample vault url.
Sign in to see your personalized example.
This is a sample proxy vault url.
This is your vault url.
This is your proxy vault url.
This is a sample vault host.
This is your vault host.
This is your current Organization ID.
A pre-generated JS script placeholder for your current organization.
Sign in to see your personalized example.
A pre-generated JS script placeholder for your current organization.
Please talk to support in order to enable it for this organization.
This is your pre-generated JS script for your current organization.
The unique name that identifies a specific iframe.
Unique client ID used for VGS CLI authentication.
Please contact VGS Support in order to enable it for your organization.
Client secret used for VGS CLI authentication.
Please contact VGS Support in order to enable it for your organization.
Version of the CLI published on quay.io.
Command on the VGS CLI.
This is a full path to the certificate file.
This option allows curl to proceed without providing a TLS certificate. If you'd like to include your certificate, use --cacert [FILE].

Example use cases

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
Have any questions, suggestions, problems?
Contact us:
Email:
support@verygoodsecurity.com
Online:
https://support.verygoodsecurity.com
VGSCareersBlogTermsPrivacy© 2021 VERY GOOD SECURITY, Inc.