Masking Elements

The contents of specific element fields, such as credit card number or password fields, can be masked from view by agents. Masked elements can be identified by any CSS selector, including the html name or id attribute. When a text element is masked, agents will only see asterisks in their view. Agents will not be able to see the status of masked dropdown boxes, radio buttons, or checkboxes.

NOTE: If a form field is identified to be masked and to be edited, masking will take priority.

You can also mask non-input page elements. Masking an element also masks any nested elements and input fields that are contained by the masked element. The dimensions of masked elements are preserved, but text content and images are removed. The values of HREF and SRC attributes are cleared and the contents of SVG audio and video tags are removed.

Configuring Masked Elements

You can configure masking from the Cobrowse Settings page. No customer website modifications are required to add or change masked field definitions.

To configure the masked elements:

1. Enter the element you want to mask in the CSS Selector field, and click Add.

2. When finished, click Publish to Production.

NOTE: In the above screenshot, all elements with an id of "confidential" and/or a class of "sensitive-data" will be masked.

NOTE: Be aware that if your website is modified, the CSS selectors for masked elements may need to be updated.

Verifying Masked Elements

You should run a Cobrowse session on the new version of your website on a staging server to verify that all content is correctly masked. A good practice is to add the attribute glance_masked="true" to all elements that should be masked. You may also add the glance_masked class to those elements. This way, even if the elements' ids or other attributes change when you update your website, the elements will continue to be masked.

If you want to download a CSV file of your masked elements for reporting purposes, click the Export button.

Glance auto-masks element fields with the attribute "type=password".

NOTE: During Remote Assist, agents cannot control masked elements.

Styling Masked Elements

You can apply special styling to masked elements during a Cobrowse session, to indicate to both visitors and agents that an area is masked. This can be accomplished by adding custom CSS to the Cobrowse button customization tool. Use the selector [data-gid][glance_masked=true] to select only masked elements during a session.

Agent-Side Masking

By default, no CSS is applied to a masked element, so the agent will see blank white space. Contact Glance to apply the agent-side CSS.

Visitor-Side Masking

To display a masking indicator, such as an orange border around masked elements, use the following CSS. This example will work if you have added glance_masked="true" to the masked elements on the page.

[data-gid][glance_masked=true] {
   border: 2px solid orange;
}

Alternatively, you can use the following CSS if you have has added the glance_masked class:

[data-gid] .glance_masked {
   border: 2px solid orange;
}

Allowed and Blocked URLs

Glance Cobrowse can be configured to mask entire pages from view based on the URL using either an Allowed List or a Blocked List.

A page is masked if an entry in the Blocked List appears in the page URL, e.g. "/account/preferences", "billing.aspx", or "securearea.mycompany.net".

A page is allowed if an entry in the Allowed List appears in the page URL.

If both an Allowed List and a Blocked List are specified, then a page is cobrowseable only if its URL matches an entry in the Allowed List, but does not match an entry in the Blocked List.

To configure an Allowed List or a Blocked List, contact Glance.

Role-Based Masking

Requires Cobrowse 5.2 or higher

Glance Cobrowse can be configured to mask content based on the user's role. See this page for more information.