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:
- 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.
- Privacy mode: per-property global behavior set from the dashboard, covered below.
- 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..." /> | Mode | Rendered text | Placeholder |
|---|---|---|
| Default | scrambled | scrambled |
| Relaxed | Welcome back to your dashboard | Search 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.
<!-- 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.
<!-- 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>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.
<!-- 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.
<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).
<!-- 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.
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.<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.
<!-- 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.
<!-- 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
data-ss-excludealways wins: the element is blocked entirelydata-ss-maskanddata-ss-unmaskare resolved by finding the closest ancestor with either attribute- 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/billingexcludes a specific page/checkoutexcludes 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.