How do I protect my users' privacy in FullStory?

This article discusses private recording via FullStory's element blocklist approach. For information on leveraging our newer allowlist approach to managing recording rules please reference this document on Private by Default.

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 ensure sensitive customer information 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-exclude or .fs-mask [Recommended]
  2. Privacy Settings

In addition to our primary means of excluding certain data from FullStory recording, this document also covers the following topics related to element exclusion: 

Exclude vs Mask vs Unmask

FullStory has three different ways to treat elements when it comes to recording a site or app. These (in order from most private to least private) are Exclude, Mask, and Unmask. Unless you are using FullStory Private by Default, unmask is the default state for recording. Let’s explore each of these types of recording rules in more detail.

image6.png

Exclude (.fs-exclude)

FullStory’s most private element recording rule is an Exclusion. For excluded elements, the element itself (as well as any child elements) will be ignored by recording. All excluded elements are replaced in playback by rectangles containing diagonal grey and white stripes. This allows a FullStory user to differentiate between excluded elements and intentional white-space when viewing recreated sessions in Session Replay. Because exclusions apply to all child elements, it is not possible to Mask or Unmask the child of an excluded element.

Events that target excluded elements (click or change, for example) are ignored entirely. If understanding end-user interaction with an element is important, then using Mask is preferable to Exclude.

The CSS class .fs-exclude is a replacement for the deprecated (yet still currently supported) class .fs-block. 

NOTE: The fact that click events are ignored on excluded elements is new. Prior to the existence of Masking, clicks on excluded elements were recorded on FS Web.

Mask (.fs-mask)

Masking is FullStory’s “happy medium” privacy setting (and is the default setting for Private by Default customers). Masking is functional enough that even in a fully masked state, it is still possible to understand user experience using search, segmentation and session replay.

For masked elements containing text, all text will be replaced by irreversibly-transformed placeholder text, meant to resemble a wireframe of the original content. This placeholder text blob will retain the size, color and character length of the original text. Additional information on how collection / rendering of masked text is managed is included in the technical section below.

As with excluded elements, Masking applies to the children of masked elements. However, unlike with excluded elements, specific children of a masked element can be Unmasked. This allows for a more granular level of privacy control for complex elements like forms.

Interaction events targeting masked elements (such as click or change events) are recorded. Because actual text is not collected for masked elements, you will need to leverage CSS selectors in search where you might have searched using text had the element been fully Unmasked.

Unmask (.fs-unmask)

Default, unless using Private by Default

Unmask is FullStory’s “record everything” setting. When elements are unmasked, FullStory will record all text, images and user interactions. It is likely that for digital products that contain little to no sensitive data, the vast majority of the site or app can be unmasked. On an e-commerce site for example, the number of places that will need to be masked or excluded are likely limited to parts of the payment flow and/or the end-users profile or settings. The remaining bulk of the site could safely be unmasked.

Managing recording rules

FullStory offers two different approaches to managing your element recording rules. The first is to implement the appropriate CSS classes into your element libraries, an approach we refer to as “code-first.” The second method for managing element recording rules is through the FullStory Element Recording Rules UI located in Settings > Privacy.

Code-first rule management

The code-first approach to managing element recording rules is FullStory’s recommended approach. Adding CSS classes to your libraries is simply a less brittle and more future-proof approach than handling these rules through the UI using CSS selectors. FullStory has three classes for managing basic element recording rules and three additional classes that interact with our fs.consent API:

Element Recording CSS Classes

Consent Related Recording Classes

.fs-exclude

.fs-mask

.fs-unmask

.fs-exclude-without-consent

.fs-mask-without-consent

.fs-unmask-with-consent

 

NOTE: .fs-exclude is replacing the now deprecated (but still currently supported) CSS class .fs-block. Similarly, .fs-exclude-without-consent is replacing the now deprecated (but still currently supported) CSS class .fs-record-with-consent. Only users with FullStory Private by Default will need to use .fs-unmask to completely unmask elements.

In-app rule management via Settings

In the event that no engineering resources are available and/or there are circumstances that make managing recording rules in a code-first manner untenable, it is possible for Admin users to manage these rules via the Element Recording Rules UI located in app at Settings > Privacy.

image7.png

From here you can create or modify recording rules based on CSS selector. Additionally you can set a rule “Scope.” The scope is related to preview mode and will be discussed below.

Clicking the “Create Rule” button will open this Add Element Recording Rule widget, where the CSS selector is added, the rule type is selected, and the rule is scoped (a similar widget exists for editing rules):

image1.png

A similar widget is also available for adding element recording rules directly from Inspect Mode:

Modify_Recording_Rules.png

CSS Supported by Element Recording Rules

CSS selectors are the main mechanism for managing Exclude, Mask and Unmask through the FullStory UI. It is important to properly make use of broad selectors, especially when Unmasking, in order to keep the list of items in your Recording Rules as manageable as possible. For managing recording rules, FullStory supports nearly all types of CSS selectors. The complete list can be seen here:

Direct descendent: a > b

Attribute word selector contains: [a~=b]

Arbitrary attributes

Attribute hyphen contains: [a|=b]

Attribute equals: [a=b]

Attribute exists: [a]

Attribute starts with: [a^=b]

Id selectors: #a

Attribute ends with: [a$=b]

Class selectors: .a

Attribute contains: [a*=b]

Type (element) selectors: a

Any descendant: a b

 

 

For reference, Element Recording Rules DO NOT support the following CSS selectors:

Any sibling: a ~ b

:not()

Direct sibling: a + b

:is() (formerly :matches())

Universal selector: *

:nth-child /nth-of-type /etc

Grouping (OR): a, b

 

Here are some examples of some broad CSS selectors that have been used for unmasking larger sets of things:

Example CSS Selector

Description

[class*="search"]

All selectors where the class contained “search” making all search bars visible

[class^="hz-secondary-menu container"]

All selectors where the class starts with “hz-secondary-menu container”

div[class*="carousel"]

All divs where the class contains “carousel”

.btn

All buttons

 

Please note: These examples worked in the case of a specific test site and may not apply to all sites.


To Mask or to Exclude: recommended best practices

A common question related to element recording rules normally goes something like “How do I know if I should upgrade the rule for an element from Mask to Exclude?” This is a great question, and while the answer isn’t particularly complicated, it does require some careful thought.

First, if the element in question is meant to contain or could possibly contain information of a regulated nature (meaning the information is governed by regulations like HIPAA, FERPA, GLBA, etc) then you should seriously consider upgrading from Mask to Exclude.

Second, personal confidential data like Social Security numbers, driver’s license numbers, bank account numbers or passwords should also be excluded.

The third potential application of Exclude over Mask is definitely the most nuanced. You should consider upgrading from Mask to Exclude for elements where the nature of the information, even in masked form and/or end-user interaction with the element, makes it possible to potentially infer personal details about the end-user. Let’s look at a couple of examples.

Example 1: We could imagine that there are healthcare related sites or apps that are meant to collect all kinds of information about an end-user’s medical history. If part of the interface were to contain checkboxes for recording the presence of certain medical conditions, it would not be enough to simply obscure the text content in session replay. Because masked elements collect interaction data, it would be possible for someone with good working knowledge of the product to understand which health issues a user was checking the boxes for. Therefore, the best course of action would be to exclude the checkboxes themselves, so that it would be impossible to make these kinds of inferences.

Example 2: This second example comes to us from the financial technology sector. Many different services exist for managing various aspects of one's finances. These include banking apps, investment apps, apps for creating and managing budgets, apps for transferring money and even apps for paying taxes. Many of the elements contained in applications like these would be just fine masked. However, there may be fields (like account balance) where even the relative text length might actually be too much information. If you were comparing the session replays of two different accounts and one showed a placeholder string for account balance that was three inches long and the other had a placeholder string that was half an inch long, you now know more about these two accounts than you probably need to. So, fields like account balance are good candidates for upgrading from Mask to Exclude.

Hopefully these suggestions have helped make it more clear when to consider Exclude over Mask. If there is ever a situation where you are on the fence, go with the most private option. You’ll sleep better, and it’s the right thing to do.

Scoping Recording Rules

With the introduction of FullStory’s Preview Mode, Admins now have the ability to test new recording rules on their own sessions before pushing these changes live for actual end-users. This should help to increase the confidence that Admins have about new iterations of their recording settings and should reduce the need to constantly test new recording rules in an actual staging environment.

As noted briefly in the Settings UI section above, all element recording rules can now be Scoped. This means that you can set recording rules to function in four different ways:

Rule_Scope_Descriptions.png

To learn more about using scoped rules with FullStory's Preview Mode, please check out the existing help article for Preview Mode.

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 a 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 from recording.

  • 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-exclude" 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-exclude" 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 or masking 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 and masking, therefore, operates at the DOM level. This means:

  • Excluded or masked elements never leave your users' browsers or touch FullStory's servers. 

  • All excluded or masked 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 and masked element text is left out.

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

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

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. You can learn more about our FS.consent API here.

 

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us