Sensitive-data reveal

Problem Context

• The value may be a password, API key, token, recovery code, secret variable, certificate, bank account, card number, tax identifier, health identifier, email, phone number, address, or private record excerpt.
• The user may need to check a typed value, compare a stored value, copy a generated secret, verify identity, transcribe a code, rotate a credential, or confirm a financial identifier.
• The surface may need different policies for partial reveal, full reveal, one-character peek, hold-to-reveal, timed reveal, reauthentication, admin approval, audit logging, copy restrictions, and permanent redaction.
• The design must balance entry accuracy and accessibility with the risk of nearby observers, shared screens, screenshots, clipboard history, browser autofill, and telemetry leaks.

Selection Rules

• Choose sensitive-data reveal when a normally masked or redacted value needs a deliberate temporary reveal, hide, peek, copy, partial reveal, reauthentication, or audited access path.
• Use password input when the main task is entering a memorized secret into an authentication form rather than revealing a stored or generated sensitive value.
• Use input mask when the goal is entry formatting for a stable structured value, not privacy masking or secure reveal control.
• Use typed confirmation when users type a visible target phrase to confirm a destructive action; do not mask that phrase as if it were a secret.
• Use permission request when the user grants OS or browser access to a device resource rather than showing an already-held sensitive value.
• Use warning text when the main need is consequence warning before an action, not controlled exposure of a sensitive field.
• Use permission denied state when policy prevents reveal or only allows partial reveal; explain the boundary without leaking the restricted value.
• Use partial reveal for verification tasks where the last four characters, domain, issuer, or masked suffix is enough.
• Use reauthentication, step-up verification, or admin review before full reveal of high-risk secrets such as API keys, recovery codes, financial identifiers, or customer data.
• Do not reveal on page load, hover, focus, validation, copied state, print view, export, analytics event, URL, or console log.

Required States

• Masked state with the field identity, safe suffix or count, and reveal eligibility.
• Reveal action state with an explicit button or toggle that names what will become visible.
• Hide action state while the value is visible.
• Hold-to-reveal or peek state for short-lived inspection.
• Timed reveal state with countdown and automatic re-mask.
• Reauthentication or step-up required state before high-risk full reveal.
• Partial reveal state for last four, prefix plus suffix, or policy-limited values.
• Full reveal state when policy permits complete value display.
• Copy while hidden state with a clear clipboard warning and copied status.
• Clipboard warning state for values that may remain in clipboard history.
• Audit event state showing reveal actor, time, reason, and access ID without raw value.
• Redaction boundary state when the user can never reveal the full value.
• Shoulder-surfing warning or shared-screen state before high-risk reveal.
• Expired reveal state after timeout, blur, navigation, or focus loss.
• Screen reader announcement state for shown, hidden, copied, expired, and denied reveal outcomes.
• Mobile compact state where masked value, reveal, hide, copy, timeout, and policy status remain readable.

Interaction Contract

• The value is masked by default unless the user is actively entering it and the platform-specific control intentionally permits display.
• Reveal requires a deliberate keyboard- and pointer-accessible action that names the target value and does not sit so close to unrelated controls that accidental reveal is likely.
• Visible values have an equally reachable hide action and may auto-hide after timeout, blur, navigation, screen lock, or policy-triggered expiry.
• High-risk values require step-up verification, role check, reason capture, approval, or audit recording before full reveal.
• Copy actions work from masked or revealed state only when allowed, warn about clipboard exposure, and confirm copy without showing the raw value in status text.
• Partial reveal and redaction boundaries are enforced by the data returned to the client, not only by CSS or text decoration.
• Logs, analytics, DOM labels, URLs, screenshots, exports, error messages, and support metadata do not contain the raw value unless explicitly designed as a protected evidence export.
• Assistive technology receives accurate state announcements without reading a secret aloud unexpectedly.

Implementation Checklist

• Classify sensitive fields by value type, reveal scope, allowed roles, reauthentication needs, copy policy, audit requirements, timeout, and redaction boundary.
• Fetch only the minimum value needed for the current reveal state; avoid sending full raw values to the browser when policy allows only partial reveal.
• Implement masked, partial, full, hold, timed, copied, expired, denied, policy-limited, and audit-recorded states with explicit state transitions.
• Keep reveal and hide controls keyboard accessible, labelled by the specific field, and separated from adjacent destructive or navigation controls.
• Disable automatic reveal on focus, hover, validation, print, export, preview, screen share, or copied state unless the user explicitly requested it.
• Scrub raw values from telemetry, console logs, error messages, URLs, browser history, client storage, and test snapshots.
• Test shoulder surfing, mobile tap targets, screen readers, copy clipboard behavior, reauthentication failure, audit recording, timeout, focus loss, print/export, and restricted-role redaction.

Common Generated-UI Mistakes

• Showing sensitive values in plain text by default.
• Revealing values on hover, focus, validation error, print preview, copied status, or after blur.
• Providing a reveal action without a hide action.
• Copying a hidden secret to the clipboard without warning or status.
• Logging raw secrets in analytics, console output, support tickets, screenshots, or audit records.
• Masking with CSS while the full value remains exposed in DOM text to unauthorized users.
• Using one broad Show all control for unrelated secrets with different policies.

Critique Questions

• What exact sensitive value is masked, and why does this user need to reveal it?
• Is partial reveal enough for this task?
• What policy, role, reauthentication, reason, or audit event is required before full reveal?
• How does the user hide the value immediately, and when does it auto-hide?
• What happens if the user copies while hidden or while visible?
• Can screen readers announce the state without unexpectedly reading the secret?
• Where could the raw value leak through DOM text, logs, URLs, analytics, screenshots, exports, or clipboard history?