Auto-blur

Capture automatically blurs some elements on your page to prevent sensitive content appearing in screenshots or video recordings.

How it works

When a screen capture is in progress, auto-blurred elements are blurred in realtime so they are not visible in the final screen capture.

If an end-user needs to read a blurred field mid-recording, they can pause the recording to reveal it, and the blur is reapplied when the recording resumes.

What gets blurred automatically

Capture detects and blurs <input>, <textarea> and <select> elements that are likely to hold sensitive data. A field is blurred when:

• Its type is password, email or tel.
• Its autocomplete attribute has a value commonly used for sensitive fields, such as cc-number, cc-csc, email, tel, new-password or one-time-code.
• Its name, id, placeholder or aria-label suggests sensitive data, for example cardNumber, cvv, ssn, passport, date_of_birth or api-key.

Blurring other elements

Add the data-capture-hide attribute to any element that is not automatically blurred to blur it during screen capture.

<!-- A single element -->
<span data-capture-hide>{{ user.email }}</span>

<!-- A form field that isn't detected automatically -->
<input type="text" name="account-reference" data-capture-hide />

You can apply the attribute to a parent element to blur all elements within it.

<section data-capture-hide>
  <h2>Billing details</h2>
  <dl>
    <dt>Card</dt>
    <dd>•••• 4242</dd>
    <dt>Billing address</dt>
    <dd>12 Example Street</dd>
  </dl>
</section>

Opting out of blurring

If a field is blurred automatically and you need it to stay visible, add data-capture-hide="off" to it.

<!-- Looks sensitive to Capture, but isn't -->
<input
  type="text"
  name="pin-code"
  placeholder="Postcode"
  data-capture-hide="off"
/>

Turning auto-blur off for an element will also disable automatic blurring for all descendant elements.

<!-- Nothing inside this form is blurred automatically -->
<form data-capture-hide="off">
  <input name="date-of-birth" type="date" />
</form>

<!-- Apply to a root element to disable auto-blur for an entire page -->
<body data-capture-hide="off"></body>

If an element inside a container that opts out of automatic blurring is explicitly marked as hidden, the most restrictive setting wins and the element is blurred.

<form data-capture-hide="off">
  <!-- Auto-blur will be disabled for this field due to the attribute on the parent -->
  <input name="date-of-birth" type="date" />
  <!-- This field will be blurred due to the explicit attribute on the element -->
  <input name="one-time-code" data-capture-hide />
</form>

Limitations

Flashes of unblurred content may occur when a page load occurs whilst a recording is in progress.

Next steps

Blurring protects what is visible on screen. To keep sensitive data out of recorded network requests and console logs, see data transform.