Proactive and reactive masking

Proactive and reactive masking are methods for shielding personally identifiable information (PII) entered on forms, such as email addresses and credit card numbers.

Note:

DXA recommends using proactive masking.

Proactive masking

Proactive masking is an coding technique that identifies an HTML element as containing personal information. To proactively mask an element, add the data-di-mask attribute to the HTML element.

For example, this heading element includes a personal name:

<h1>Welcome Allen</h1>

Add the data-di-mask attribute to ensure the content is masked in the session replay:

<h1 data-di-mask>Welcome Allen</h1>

This approach can be incorporated into development and release cycles to ensure that locations where PII is displayed are masked when captured.

Reactive masking

You can alternatively use the Personal Data Selector on the Privacy tab in property settings to provide CSS selectors of elements containing PII. When the tag encounters a matching element, it masks the content. For example, in the following elements:

<h1 id="customer-name">Welcome Allen</h1>

<div id="billing-address">
  1234 Some Road<br>
  Somecity, 12345<br>
  New York
</div>

You would set the Personal Data Selector to #customer-name, #billing-address. This approach allows you to quickly mask content, but it can be difficult to maintain on large websites.

If you want to mask every element on the page, set the Personal Data Selector to #body. This selector will mask all the elements in the following example:

<body id=body">
  <h1 id="customer-name">Welcome Allen</h1>
  <div id="billing-address">
    1234 Some Road<br>
    Somecity, 12345<br>
    New York
  </div>
</body>

Alternately, you can also mask all but a selected few elements on the page. For example, if you want to mask all the contents except description, you would set the Personal Data Selector to #body :not(#description *).

Note:

Make sure the Recursive masking option is turned off when masking all but a selected few elements on a page.

<body>
  <h1 id="customer-name">Welcome Allen</h1>
  <div id="billing-address">
    1234 Some Road<br>
    Somecity, 12345<br>
    New York
  </div>
  <div id="description">
    Sample text
  </div>
</body>