How do I exclude elements to protect my users' privacy in FullStory?

The privacy of your customer data is of utmost importance to FullStory and is a shared responsibility. FullStory ensures that your customer data is securely stored and accessible only to you. In addition, we provide you several tools to exclude sensitive customer information at scale throughout your site or app in perpetuity as it grows and changes. When data is excluded, it is never recorded and never leaves the user’s browser.

What follows are recommended best practices to ensure your company uses FullStory in compliance with our Acceptable Use Policy and with a privacy-first stance toward your end users.

There are two primary methods of excluding data from FullStory recording:

  1. Code-first with .fs-block [Recommended]
  2. Privacy Settings

In addition to our primary means of excluding certain data from FullStory recording, here are additional resources you may find valuable as you protect your end users' data.

  1. Record only with user consent
  2. Quick exclusion via Inspect Mode
  3. What do we exclude by default?
  4. Additional Details
  5. Technically, how do exclusions really work?

 

Code-first [recommended]

As a best practice solution to excluding data from recording, FullStory provides a simple CSS class name .fs-block that can be appended to any class in your element library ensuring as your site grows and changes, the correct data is always excluded moving forward. Elements containing the .fs-block class will be excluded from FullStory recordings.

Add the .fs-block class name to any element you want to exclude. 

<input class="ccnum fs-block">

Now, in FullStory playback, this element would appear like this:

direct_1552589997326-1552589997326.png

This means FullStory ignored the inner elements that appeared in this element at the time of recording and that data was never collected and never sent to FullStory. For a precise list of exactly which HTML attributes are excluded, see “A few details about Excluded Elements” below.

These exclusions include any child elements, so you can do things like this to block all data gathered by a group of form fields:

  <form class="fs-block" id="payment">
    <input class="ccnum">
    <!-- etc -->
  </form>

Privacy settings

While deploying .fs-block directly into your element libraries is preferable, we also provide an in-app approach to data exclusion.

Within Settings you’ll notice an area called Privacy. You can add CSS selectors to the Excluded Elements list to block any data from those HTML elements from ever being captured. Essentially FullStory dynamically blocks data whenever someone visits a page containing a blocked element in much the same way .fs-block is treated when FullStory encounters it on an element.

Click Add Element to create a new exclusion. Input the CSS selector and optionally leave yourself a note to remember why this block rule is important. 

direct_1552578524370-1552578524370.png

Your note will show up in the exclusions list:

direct_1552578524303-1552578524303.png

Supported formats:

#idselectors
.classselectors
parent>child
tagname
tagname[attribute]
tagname[attribute=foo]
tagname[attribute*=value]
tagname[attribute^=value]
tagname[attribute$=value]
tagname[attribute-=value]

 

You’ll also notice the “Record with user consent” checkbox. When used together with the FS.consent() API (discussed further below), this setting allows you to record this element only after a user has given explicit consent (these are known as “consent-required elements”).

Is there a subset of data that you wish to share with FullStory, but only upon receiving consent from the end user? If so, we give you the power to respect the consent of users when determining what data should be sent to FullStory.

 

Quick exclusion via inspect mode

If you ever see something that should have been excluded, quick remediation is a top priority. It may not be feasible to make a code change to your site or add the element to your exclusion list quickly. In that case, admins have the ability to use Inspect Mode to select the element in the playback and click Exclude to add the selected element to your Exclusion list in Settings. 

direct_1552584419742-exclude.gif

If you ever have a need to remove a session or all sessions in a FullStory segment, please follow our instructions here.

Important privacy note on Inspect Mode exclusions

FullStory targets elements for exclusion using their CSS selectors. If the elements you’ve selected do not have a static identifier such as a unique `id` attribute, any changes to your site could change these CSS selectors and cause them to no longer match your Exclusions list. Changes to your site could expose the data you’re trying to exclude. We strongly recommend using code-first approach after quickly excluding via Inspect Mode.

Important note

Element exclusions are not retroactive. If you are viewing this article after you started recording, there are several options available for deleting sessions from FullStory, if necessary. 

Default exclusions

We pre-populate the exclusions list with industry standard HTML. You'll want to double check how your company has coded these sensitive fields. If your input fields have different CSS naming conventions, you'll need to add them to the exclusions list.

If you're using the industry standards, we'll block the following default exclusions:

  • Passwords with input[type=password]
  • All credit card data with [autocomplete^=cc-]
    • Name
    • Credit card number
    • Expiration date
    • Security code
    • Card type
  • Hidden inputs with input[type=hidden]

You can find the exclusions list by clicking on Settings > Privacy.

Additional details about excluded content

  • When you encounter a field that’s been excluded while viewing a recording, you’ll see a gray box with cross-hatches over the field indicating it’s blocked, like in the image above.

  • Only the inner contents and some attributes (value, checked, src, data, alt) of excluded elements will be excluded. Any HTML attributes—except those listed above—of the excluded elements will still be recorded (though they won't be visible in the FullStory UI during playback). Take for example the following:

    <div class="fs-block" data-secret="abracadabra" value=”abra”>Your secret is abracadabra</div>

    In this example, the text Your secret is abracadabra will not be recorded. However, the text <div class="fs-block" data-secret="abracadabra"> will be recorded.

    If you are storing sensitive data within HTML element attributes, you'll need to exclude the parent of the element to be excluded. (Note that there is not a way in pure CSS to specify the parent node of a selector).

 

How does excluding elements work? What are the technical details?

FullStory records the user interface (UI). The only method FullStory uses for recording the UI is by tracking the DOM structure and any changes to it. This means the recording script sends changes to the DOM structure to FullStory's servers, along with raw input events and metadata.

Element exclusion, therefore, operates at the DOM level. This means:

  • Excluded elements never touch FullStory's servers. 

  • All excluded elements are processed locally in the user's browser. When changes to the DOM structure are sent to FullStory's servers, excluded elements are left out.

  • Relatedly, some raw input events (e.g., key and click events) are also redacted when they relate to an excluded element.

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us