Strac (Y Combinator backed) offers No-Code solutions and APIs to businesses so that they don't have to worry about handling PII (Personally Identifiable Information), PHI (Protected Health Information) and PCI (Payments Card Industry) data like SSN, Drivers License, Address, Date of Birth, Employment History, Credit Card, Patient Data, Bank Accounts, API Keys, and more.

Strac offers detection and redaction APIs where developers can detect or redact sensitive data in text or documents.

Configure Strac in any of your SaaS or Cloud (AWS, Azure, GCP) app and automatically detect and redact sensitive data. Define Custom Policies on what data elements to redact, when to redact, who should access, get audit reports and more.

Here are the list of all integrations: https://strac.io/integrations

This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with the W3C spec. It allows cross-domain communication from the browser.

Strac uses API keys to authenticate requests. Pass an API Key in passed in HTTP Header as X-Api-Key. API Key is prefixed with sk_ Please do not share your secret API key in publicly accessible areas such as GitHub, client-side code, and so forth. Securely Keep it on the server side. All API requests must be made over HTTPS. Calls made over plain HTTP will fail. API requests without authentication will also fail.

Under test mode, API keys will have the prefix sk_test_ and requests will use endpoint https://api.test.tokenidvault.com.

Under live mode, API keys will have the prefix sk_live_ and requests will use endpoint https://api.live.tokenidvault.com.

Sensitive document that you can upload, redact, or download. Examples include an identity document like a driver's licenses or passport, tax documents, medical records, and employment verification documents.

Sensitive data elements that you can create, search or detokenize. Examples include credentials like api keys or passwords, social security numbers, national ids, credit card numbers, name and phone numbers.

Detect sensitive data elements from text and documents. Sensitive data elements include credentials like api keys or passwords, social security numbers, national ids, credit card numbers, name and phone numbers.

Redact (a.k.a Mask) sensitive data elements from text and documents. Sensitive data elements include credentials like api keys or passwords, social security numbers, national ids, credit card numbers, name and phone numbers.

Anonymize sensitive data elements from text and documents. Sensitive data elements include credentials like api keys or passwords, social security numbers, national ids, credit card numbers, name and phone numbers.

Securely offload movement of sensitive data to third-party (outbound), end-users (inbound) or your servers (webhook).

The widget component framework allows you to securely collect and display customer data. A widget orchestrates one or more components, where each corresponds to one data element and one inline frame ('iframe') hosted on Strac's domain.

The same-origin policy protects the sensitive data within the component's iframe from your page that initializes the components. The widget supports a series of events to allow the client to interact with each component; e.g. to perform form validation or know when creation of a token has finished.

Page requirements

• The widget requires jQuery 3.6.0 or higher. You can host on your own CDN or leverage a trusted CDN like CloudFlare; e.g. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js.

• The page will have to reference the Strac widget JavaScript at https://api.live.tokenidvault.com/widgets/component-1.0.0.js.

Widget API

To initialize a widget, you supply your Strac API key as the first argument to a global StracWidget:

const stracWidget = new StracWidget('<your API key>');

The widget allows registration of events which return back a widget reference to allow chaining. The following are supported:

• EVENT_READY: fires when the widget has been initialized.

const stracWidget = new StracWidget('<your API key>')
    .on(window.StracWidget.events.EVENT_READY, () => console.log('Widget ready'));

To create a component: stracWidget.createComponent(componentType, componentOptions). See below for component API.

To collect tokens from components (creating or updating a value): stracWidget.getTokenizedValues(options) where options requires a tokens structure referencing each token's type and corresponding component. For example, in a form that collects a first, middle, and last name:

  const tokens = await stracWidget.getTokenizedValues({
      tokens: [{
          type: 'FIRST_NAME',
          data: firstNameComponent
      }, {
          type: 'MIDDLE_NAME',
          data: middleNameComponent
      }, {
          type: 'LAST_NAME',
          data: lastNameComponent      
      }]
  });

Component API

You can configure a component to view data (do not collect data from a customer), create data (a form input with no initial value), or edit data (provide an existing value that the customer can change). A widget creates a component using stracWidget.createComponent(componentType, componentOptions).

Valid component types:

• label: a view-only display where the element within the iframe corresponds to a <div>.
• text: a one-line text input with a corresponding <input> element within the iframe.
• textarea: a multi-line text input with a corresponding <textarea> within the iframe.

Component options:

• token: allows the viewing of an existing value. Required for a view-only display and an edit display.
• placeholder: a placeholder value to display within the form element.
• style: allows injection of CSS properties for a variety of contexts which include base (the default), empty (when an input element is empty), and complete (when an input element is valid).

The following styles are allowed: backgroundColor, color, fontFamily, fontSize, border, textAlign, fontStyle, margin, fontWeight, lineHeight, letterSpacing, borderRadius, verticalAlign, padding, textDecoration, textShadow, textTransform, height, minHeight

Component events

• EVENT_READY: the component HTML is ready.
• EVENT_FOCUS: the component has the user's focus (focus event).
• EVENT_BLUR: the component has lost focus (blur event).
• EVENT_KEYDOWN: the user has entered text within the input (keydown event).
• EVENT_CHANGE: change to the event value; event.complete indicates if the value is valid.

Component actions

• mount(elementName): install the component HTML within the element on your page.
• unmount(): remove the component HTML.

Example of an edit component:

const firstNameComponent = stracWidget.createComponent('text', {
    'token': '<your token value>',
    'placeholder': 'Your first name',
    'style': {
        'base': {

            'border': '0px solid rgb(0, 0, 0)',
            'backgroundColor': '#302c3f',

        },
        'empty': {
            'backgroundColor': '#ff7586',
        }
    }
}).on(window.StracWidget.events.EVENT_READY, () => console.log('textComponent ready'))
    .on(window.StracWidget.events.EVENT_FOCUS, () => console.log('textComponent focus'))
    .on(window.StracWidget.events.EVENT_BLUR, () => console.log('textComponent blur'))
    .on(window.StracWidget.events.EVENT_KEYDOWN, () => console.log('textComponent keydown'))
    .on(window.StracWidget.events.EVENT_CHANGE, (event) => {
        console.log('textComponent change');
        componentsValid['textComponent'] = event.complete;
        updateForm();
    })
    .mount('#firstName');

Complete integration example

This example features one editable component for a first name, complete with a spinner on a submit button and error messages.

<html>
    <head>
        <title>Strac Component Demo</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="https://api.live.tokenidvault.com/widgets/component-1.0.0.js"></script>
        <script type="text/javascript">
            const API_KEY = '<your API key>';
            const FIRST_NAME = 'firstName';
    
            $(document).ready(async () => {
                const stracWidget = new StracWidget(API_KEY)
                    .on(window.StracWidget.events.EVENT_READY, () => console.log('Widget ready'));
    
                const componentsValid = {
                    'firstNameComponent': false,
                }
    
                const updateForm = (buttonOnly) => {
                    if (!buttonOnly) {
                        $('#text_error').css('display', componentsValid['firstNameComponent'] ? 'none' : '');
                    }
                    $('#saveButton').prop('disabled', Object.values(componentsValid).some(valid => !valid));
                }
    
                // Sample token: tkn_IHpILSUk015BNHqvlAJ8W4tN
                const firstNameComponent = stracWidget.createComponent('text', {
                    'token': window.sessionStorage.getItem(FIRST_NAME),
                    'placeholder': 'Your first name',
                    'style': {
                        'base': {
                            'boxSizing': 'border-box',
                            'minHeight': '53px',
                            'width': '200px',
                            'border': '0px solid rgb(0, 0, 0)',
                            'backgroundColor': '#302c3f',
                            'borderRadius': '30px',
                            'fontSize': '18px',
                            'fontWeight': '500',
                            'color': 'rgb(255, 255, 255)',
                            'padding': '0px 24px',
                            'fontFamily': 'Thicccboi, sans-serif'
                        },
                        'empty': {
                            'backgroundColor': '#ff7586',
                        }
                    }
                }).on(window.StracWidget.events.EVENT_READY, () => console.log('firstNameComponent ready'))
                    .on(window.StracWidget.events.EVENT_FOCUS, () => console.log('firstNameComponent focus'))
                    .on(window.StracWidget.events.EVENT_BLUR, () => console.log('firstNameComponent blur'))
                    .on(window.StracWidget.events.EVENT_KEYDOWN, () => console.log('firstNameComponent keydown'))
                    .on(window.StracWidget.events.EVENT_CHANGE, (event) => {
                        console.log('firstNameComponent change');
                        componentsValid['firstNameComponent'] = event.complete;
                        updateForm();
                    })
                    .mount('#text');
    
                $('#saveButton').on('click', async () => {
                    // Start Spinner
                    const saveButton = $('#saveButton');
                    saveButton.addClass('button-loading');
    
                    const tokens = await stracWidget.getTokenizedValues({
                        tokens: [
                            {
                                type: FIRST_NAME,
                                data: firstNameComponent
                            }
                        ]
                    });
    
                    // End Spinner
                    saveButton.removeClass('button-loading')
    
                    console.log(tokens);
                    tokens.forEach(({ type, data }) => window.sessionStorage.setItem(type, data));
                });
    
                updateForm(true);
            });
        </script>
        <style type="text/css">
            body {
                background-color: #13111a;
                font-family: Thicccboi, sans-serif;
                color: #b7b4c7;
                font-size: 18px;
                line-height: 1.667em;
                font-weight: 500;
                margin: 15px;
            }
    
            div.title {
                margin-bottom: 16px;
            }
    
            div.gradient-background {
                display: inline-block;
                border-radius:30px;
                padding: 2px;
                background-image: linear-gradient(270deg, #6f86ff, #ff7586);
            }
    
            button[type='button']#saveButton {
                padding: 15px 16px;
                font-size: 16px;
                line-height: 1.125em;
                border-style: solid;
                border-width: 1px;
                border-color: #d9d7e6;
                border-radius: 30px;
                background-color: #302c3f;
                color: #fff;
                line-height: 1.111em;
                font-weight: 700;
                text-align: center;
                letter-spacing: 0.01em;
                width: 100px;
    
                position: relative;
            }
    
            button[type='button']#saveButton:disabled {
                color: #676467;
            }
    
            .button-loading .button-text {
                visibility: hidden;
                opacity: 0;
            }
    
            .button-loading::after {
                content: "";
                position: absolute;
                width: 16px;
                height: 16px;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                border: 4px solid transparent;
                border-top-color: #ffffff;
                border-radius: 50%;
                animation: button-loading-spinner 1s ease infinite;
            }
    
            @keyframes button-loading-spinner {
                from {
                    transform: rotate(0turn);
                }
    
                to {
                    transform: rotate(1turn);
                }
            }
        </style>
    </head>
    <body>
        <div class="title">Enter your first name below.</div>
        <div id="text" width='200' height='20'></div>
        <div id="text_error" style="color: #fff; display: none; font-weight: 700;">Please enter your first name.</div>

        <div style="margin-top: 12px">
            <div class="gradient-background">
                <button type="button" id="saveButton">
                    <span class="button-text">Save</span>
                </button>
            </div>
        </div>
    </body>
</html>

The Credit Card Widget allows you to display values stored by Strac tokens, with special behavior for a credit card: it will display the value in the form ****-tail and provide a clipboard which will copy the full value.

The display of this sensitive data occurs within an iFrame on a Strac-owned domain, which prevents the page referencing the iFrame from accessing it due to the same-origin policy.

Page requirements

The widget requires a modern version of jQuery.

Widget inputs

To load the widget, you must provide:

1. A Strac API key.

2. A declaration of type 'credit-card' which indicates the type of display within the iFrame. This is currently the only supported variant.

3. A Strac token ID which stores the credit card value.

4. Authorization header(s) which Strac will proxy to your authorization endpoint to allow safe detokenization. This endpoint is associated with your API key and not exposed when invoking the widget component.

Widget view and styling Widget views are represented by "components". You can instantiate one widget with as many components as you need based on your page's display requirements

Providing styles to the widget is optional, but you must provide basic styling to achieve a similar look-and-feel with your page as the widget's iFrame won't have context of the outer page's fonts. The widget will install the iFrame into a container on your page; you must style this container to control the iFrame's size. By default, the iFrame will expand to fit any area given to it and not provide any margin of its own.

The credit card widget includes an icon that lets the user copy the whole card value to the clipboard when clicked. Within display, you must specify a copyImageUrl if not using the default.

Complete integration example

The following produces this card:

<html>
    <head>
        <title>Card detokenize demo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="text/javascript" src="https://api.live.tokenidvault.com/widgets/card-detokenize-1.0.0.js"></script>
        <style>
            body {
                font-family: Verdana,serif;
            }

        </style>
        <script type="text/javascript">
            $(document).ready(() => {
                const component = {
                    display: {
                        copyImageUrl: '<your URL, if not using the default image>',
                        styles: {
                            'body': {
                                'color': '#fff',
                                'font-family': 'Verdana,serif'
                            },
                            'button': {
                                'background-color': 'transparent',
                                'border': 'none',
                                'vertical-align' : 'middle'
                            },
                            'img': {
                                'width': '25px'
                            }
                        }
                    },
                    elementId: 'strac_viewer1',
                    headers: {
                        'Authorization': '<your authorization token>>'
                    },
                    tokens: [{
                        id: "<your token ID>>"
                    }],
                    type: 'credit-card'
                }

                const widget = new StracWidget({
                    apiKey: '<your API key>',
                    apiEndpoint: 'https://api.test.tokenidvault.com'
                });

                widget.createComponent(component);
                widget.mountComponent(component);
            });
        </script>
    </head>

    <body>
        <div style="background-image: linear-gradient(90deg, #ff3868, #714dff); width:415px; padding:4px; border-radius: 10px;">
            <div style="background-color:#302c3f; padding:10px; color: #fff; border-radius: 10px;border-color:rgba(255, 255, 255, 0.21)">
                Credit Card Number: <div id="strac_viewer1" style="height:25px; width: 220px; background-color:#302c3f; display:inline-block; vertical-align: middle;"></div>
            </div>
        </div>
    </body>
</html>

Strac vends a widget that supports upload and download of an end-to-end encrypted document. The sender can limit the number of views and period of time for which the shareable link is valid. Strac hosts a sample integration here.

Requirements

The widget leverages Strac's APIs to upload and download documents, so you will need a publicly-viewable Strac API key.

The hosting page must inject jQuery 3.6.

Widget assets

Inject the widget CSS, JavaScript, and jQuery dependency into the head of your page:

<link href="https://api.live.tokenidvault.com/strac-doc-share/strac-widget-1.0.0.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://api.live.tokenidvault.com/strac-doc-share/strac-widget-1.0.0.js"></script>

Widget initialization

The widget assets expose StracWidget and StracWidgetConstants globals used to instantiate new widget instances. You can place multiple widgets on a single page.

• StracWidget.createDefault(apiProviderOptions, widgetId, widgetOptions) returns a widget instance.
• widget.on(eventName, callback) registers a widget event and returns the instance to allow chaining of events.
• widget.inject() installs the widget HTML into the DOM and sets up JavaScript event listeners.

Widget options for createDefault:

const apiProviderOptions = {
    apiKey: '<your API key>'
};

const widgetId = '<ID of an HTML element in which the widget is installed>';

const widgetOptions = {
    fileId: '<document ID if this is a download use case; undefined for an upload case>'
    isInline: { false | true } // 'true' if the user will write a text secret instead of uploading a file
    viewMode: { "DOWNLOAD_ONLY" | "UPLOAD_ONLY" } // One widget instance cannot perform both upload and download simultaneously        
};

Widget event reference

Function callbacks will all have one argument representing an object of keys and values.

StracWidgetConstants.EVENT_FILE_DOWNLOAD_FAILED: the document decryption failed
  No context returned; can be used to display a generic error message for an expired document link

StracWidgetConstants.EVENT_FILE_DOWNLOADED: the document is ready for viewing by the user
  contentType: <str> content type of the downloaded document
  document: <array buffer> with the decrypted document bytes
  documentText: <str> returned only if this is an 'inline' widget to allow the decrypted secret to be displayed
  fileName: <str> file name of the document

StracWidgetConstants.EVENT_FILE_GET: the user requested the document
  fileId: <str> ID of the downloaded file to retrieve

StracWidgetConstants.EVENT_FILE_UPLOADED: the upload of the document completed
  fileId: <str> ID of the encrypted document; this is viewable to the server.
  passphrase: <str> secret that is vended in a sharable link. This value isn't sent to the server.

Example

The following example uses query parameters to distinguish the upload vs. download context as well as the widget behavior.

<!DOCTYPE html>
<html>
    <head>
        <link href="https://api.live.tokenidvault.com/strac-doc-share/strac-widget-1.0.0.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://api.live.tokenidvault.com/strac-doc-share/strac-widget-1.0.0.js"></script>

        <script type="text/javascript">
            const urlParams = new URLSearchParams(window.location.search);

            const isDownload = urlParams.has('id');
            const isInline = urlParams.get('inline') === 'true';
            const fileId = urlParams.get('id');

            const apiProviderOptions = {
                apiKey: '<your API key>'
            };
            
            const widgetId = 'strac_share';
            
            const widgetOptions = {
                viewMode: isDownload ? "DOWNLOAD_ONLY" : "UPLOAD_ONLY",
                isInline: isInline,
                fileId: fileId
            };

            const widget = StracWidget.createDefault(apiProviderOptions, widgetId, widgetOptions)
                .on(StracWidgetConstants.EVENT_FILE_UPLOADED, function(args) {
                    const { fileId, passphrase } = args;

                    const decryptUrl = window.location.href + "?id=" + fileId + '&inline=' + isInline + '#' + passphrase;
                    $('#strac_download_link').html(
                        `Send this link to your friends: <a href="${decryptUrl}">${decryptUrl}</a>`);
                    $('#strac_download_link').off('click');
                })
                .on(StracWidgetConstants.EVENT_FILE_DOWNLOADED, function(args) {
                    const { document, documentText, fileName, contentType } = args;

                    if (documentText) {
                        $('#strac_download_link').text(documentText);
                    }
                    else {
                        $('#strac_download_link').html(`View file: <a href='#' id='strac_link' download>${fileName}</a>`);
                        $('#strac_download_link').on('click', function(evt) {
                            const url = window.URL.createObjectURL(new Blob([document], {type: contentType}));

                            $('#strac_link').prop('href', url);
                            $('#strac_link').prop('download', fileName);
                        });
                    }
                })
                .on(StracWidgetConstants.EVENT_FILE_DOWNLOAD_FAILED, function(args) {
                    $('#strac_download_error').show();
                })
                .inject();

            // Download immediately on page load
            if (fileId && isDownload) {
                $(document).ready(() =>   {
                    widget.trigger(StracWidgetConstants.EVENT_FILE_GET, { fileId: fileId });
                });                
            }
        </script>
    </head>
    <body>
        <p id="strac_share"></p>
        <p id="strac_download_link"></p>
        <p id="strac_download_error" style="display: none;">Error downloading file!</p>
    </body>
</html>