42 lines
1.4 KiB
CSS
42 lines
1.4 KiB
CSS
/*
|
|
* Sentry Replay PII-masking helper classes.
|
|
*
|
|
* See docs/observability/sentry-replay-masking.md for the full
|
|
* conventions list and which components need to be annotated.
|
|
*
|
|
* Usage:
|
|
* <input type="password" className="sentry-mask" />
|
|
* <div className="sentry-block">{paymentForm}</div>
|
|
*
|
|
* Implementation notes:
|
|
* - Sentry's Replay SDK reads the `data-sentry-mask` / `data-sentry-block`
|
|
* attributes (or the legacy `sentry-mask` / `sentry-block` CSS
|
|
* classes) when deciding whether to redact a DOM subtree.
|
|
* - We expose simple class names so application code stays decoupled
|
|
* from the SDK and can use the masking marker independently of
|
|
* whether Replay is currently configured.
|
|
* - These rules also visually outline masked regions in dev to
|
|
* surface them during UI review; the outline is gated by a global
|
|
* `data-sentry-mask-debug="1"` attribute on <html>, opt-in only.
|
|
*/
|
|
|
|
.sentry-mask,
|
|
.sentry-mask * {
|
|
/* No visual effect by default — the marker is consumed by Sentry Replay. */
|
|
}
|
|
|
|
.sentry-block,
|
|
.sentry-block * {
|
|
/* No visual effect by default — the marker is consumed by Sentry Replay. */
|
|
}
|
|
|
|
html[data-sentry-mask-debug="1"] .sentry-mask {
|
|
outline: 2px dashed rgba(255, 0, 153, 0.6);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
html[data-sentry-mask-debug="1"] .sentry-block {
|
|
outline: 2px dashed rgba(255, 153, 0, 0.6);
|
|
outline-offset: 2px;
|
|
}
|