Docs

Privacy & Data Tags

Control what the SDK captures with privacy modes and HTML data attributes

Last updated:

The Insights SDK uses a three-layer privacy system:

  1. Automatic redaction: always active, cannot be overridden. Passwords, sensitive patterns (cards, SSNs, emails, phones, API keys, IPs, addresses, etc.), and URL query strings are removed in the browser before any data is sent. Full list at What never reaches your replays.
  2. Privacy mode: per-property global behavior set from the dashboard, covered below.
  3. Data attributes: element-level overrides you add to your HTML, covered below.

Privacy Modes

Privacy mode is configured per-property from the SessionSight dashboard. The SDK fetches the setting automatically during initialization.

Default mode

All visible text is scrambled so replays preserve the original layout but the text is unreadable at a glance. Use this mode when you want to see user behavior (clicks, scrolls, navigation patterns) without seeing on-page content. For sections that need stronger guarantees than scrambling, see data-ss-exclude below.

Relaxed mode

Text is shown as-is, with the automatic redactions already applied. This lets you read headings, button labels, and other non-sensitive content in replays while sensitive patterns still show up as [REDACTED].

Comparison

Given this HTML:

<p>Welcome back to your dashboard</p>
<input placeholder="Search projects..." />
ModeRendered textPlaceholder
Defaultscrambledscrambled
RelaxedWelcome back to your dashboardSearch projects...

PII patterns in the rendered text or placeholder (an email, credit card number, SSN, etc.) are replaced with [REDACTED] in both modes — that part is independent of the privacy mode.

Data Attributes

Add these HTML attributes to fine-tune privacy at the element level. They override the global privacy mode for the element and all its descendants.

data-ss-mask

Forces scrambling on an element and its children, regardless of privacy mode. Useful for masking sensitive sections when running in relaxed mode.

html
<!-- Force all text in this section to be scrambled, even in relaxed mode -->
<div data-ss-mask>
  <p>John Smith</p>
  <p>Account #12345</p>
</div>

In relaxed mode, text outside this div would be readable, but everything inside it gets scrambled. PII is still redacted on top of the scrambling.

data-ss-unmask

Allows readable text (PII-only redaction) on an element and its children, regardless of privacy mode. Useful for keeping navigation, headings, or other non-sensitive UI readable when running in default mode.

html
<!-- Allow readable text here, even in default mode -->
<nav data-ss-unmask>
  <a href="/pricing">Pricing</a>
  <a href="/docs">Docs</a>
  <a href="/blog">Blog</a>
</nav>
PII is always redacted
Even with data-ss-unmask, automatic PII detection still runs. Emails, phone numbers, credit cards, and other sensitive patterns are replaced with [REDACTED].

data-ss-exclude

Completely blocks recording of an element. The element and its entire subtree are replaced with an empty placeholder div that preserves the original dimensions (width, height, box-sizing). Nothing inside the excluded element is captured.

html
<!-- This entire section is replaced with an empty placeholder -->
<div data-ss-exclude>
  <form>
    <input type="text" name="ssn" />
    <input type="text" name="credit-card" />
  </form>
</div>

Use this for sections that should never appear in recordings: payment forms, credential inputs, or any area where even scrambled text could be a concern.

data-ss-form

Labels a form for the Form Analytics dashboard. Not a privacy control, but often used alongside them.

html
<form data-ss-form="Checkout Form">
  <input type="email" name="email" />
  <input type="text" name="name" />
  <button type="submit">Purchase</button>
</form>

The name appears in the Form Analytics section and can also be changed from the dashboard.

data-ss-allow

Keeps a specific image, video, or audio source in the recording. By default, the SDK strips every <img>, <video>, <audio>, <source>, SVG raster <image>, and inline background-image: url(...) reference before the event payload leaves the browser, then renders a “media hidden” stand-in on replay. Use data-ss-allow to opt back in for media you have audited (brand logos, marketing video, illustrations the legal team has cleared, hosted audio samples).

html
<!-- Brand logo: keep visible in replays -->
<img data-ss-allow src="/brand/logo.png" alt="Acme" />

<!-- Marketing video: keep visible -->
<video data-ss-allow src="/promo.mp4" poster="/promo-cover.jpg" controls></video>

<!-- Wrap a whole region of cleared media -->
<header data-ss-allow>
  <img src="/brand/logo.png" alt="Acme" />
  <img src="/brand/wordmark.svg" alt="Acme wordmark" />
</header>

The attribute is presence-only: any value (including the literal string "false") opts in. Place it directly on the media element, or on any ancestor wrapper to cover every nested image/video/audio/background.

Embedded bytes always strip
data-ss-allow only honors URL references (the replayer fetches the asset from your origin at replay time). Any source that uses a data: URI or blob: URL is stripped unconditionally, even on an opted-in element. Embedded bytes would have to be persisted on SessionSight's servers, which is a different liability class than referencing a URL.
Stylesheet backgrounds stay stripped
Background images declared inside a <style> block or external CSS file are scoped at the document level, not to a specific element, so the opt-in cannot apply. If you need a particular background image to survive on replay, move it to an inline style attribute on an element that carries (or inherits) data-ss-allow.

Fonts (@font-face src: url(...)) are preserved automatically so replays render in your typography. Inline SVG icons and <use href="#sym"> symbol references are not affected — only the SVG <image> raster-embed element is treated as media.

data-ss-interactive

Marks an element (and its descendants) as interactive for the heatmap click tracker. Not a privacy control. By default, the SDK treats links, buttons, inputs, [role="button"], [onclick], and [tabindex] as interactive. Anything else is deferred 400ms and flagged as a “dead click” if no DOM mutation or URL change follows. Custom widgets like WebGL canvases, drag handles, or virtualized lists react through paints and reflows that don’t mutate the DOM, so they need an explicit hint to avoid false dead-click reports.

html
<!-- WebGL canvas the user can click and drag to rotate -->
<canvas data-ss-interactive width="800" height="600"></canvas>

<!-- Or apply to a wrapper so every nested widget is treated as interactive -->
<div data-ss-interactive>
  <div class="custom-slider">...</div>
  <div class="drag-handle">...</div>
</div>

The SDK also auto-detects interactive cursor styles (pointer, grab, grabbing, move, crosshair, zoom-in, zoom-out, all-scroll, and resize cursors), so widgets that already set one of these via CSS need no markup change. Use data-ss-interactive only when the cursor isn’t a reliable signal.

Combining Data Attributes

Data attributes cascade to child elements. The nearest ancestor with a data-ss-mask or data-ss-unmask attribute wins. data-ss-exclude removes the element entirely.

html
<!-- Page-level: unmask the navigation -->
<nav data-ss-unmask>
  <a href="/home">Home</a>
  <a href="/account">Account</a>
</nav>

<!-- Section-level: mask a profile card -->
<div data-ss-mask>
  <h3>Profile</h3>
  <p>Name: Jane Doe</p>
  <p>Role: Admin</p>
</div>

<!-- Element-level: exclude a payment form entirely -->
<div data-ss-exclude>
  <form data-ss-form="Payment">
    <input type="text" name="card-number" />
    <input type="text" name="cvv" />
  </form>
</div>

Precedence

  1. data-ss-exclude always wins: the element is blocked entirely
  2. data-ss-mask and data-ss-unmask are resolved by finding the closest ancestor with either attribute
  3. If no data attribute is found, the global privacy mode applies

Page Exclusions

You can exclude entire pages from recording using glob patterns configured in the dashboard (Property Settings). When a user navigates to an excluded page, recording pauses automatically and resumes when they navigate away.

Examples:

  • /admin/* excludes all admin pages
  • /settings/billing excludes a specific page
  • /checkout excludes the checkout page

Page exclusions are delivered to the SDK during initialization and updated in real-time.

What scrambling is (and is not)

Scrambling is a layout-preservation feature. It keeps replays visually correct while making text unreadable at a glance, and the per-session randomization prevents trivial cross-session comparison. It is not a cryptographic guarantee.

The actual security guarantees in this system are:

  • The automatic redaction floor — passwords, sensitive patterns, and URL query strings are removed in the browser before any data is sent. This cannot be turned off.
  • data-ss-exclude — the element and its subtree are not captured at all. Use this for any section whose content would be sensitive even if the scramble were broken: payment forms, credential inputs, identity documents, private messages, etc.

If you have content that needs to stay confidential against a sophisticated reader of replays and isn’t covered by the automatic floor, reach for data-ss-exclude rather than relying on the scramble.