Skip to content

fix(ui): mask sensitive variable values on entry (cross-browser)#520

Merged
mattrobinsonsre merged 1 commit into
mainfrom
fix/sensitive-var-masking
Jun 18, 2026
Merged

fix(ui): mask sensitive variable values on entry (cross-browser)#520
mattrobinsonsre merged 1 commit into
mainfrom
fix/sensitive-var-masking

Conversation

@mattrobinsonsre

Copy link
Copy Markdown
Owner

Entering a variable value marked Sensitive showed it in plaintext on screen while typing — only the saved list/table masked it (***). This masks the value as you enter it, the same class of fix as the #503 token reveal.

Change

  • New SensitiveValueInput component: when Sensitive is checked, the value field is masked by default with a Show/Hide toggle. Wired into the workspace Variables tab and admin Variable Sets (both add + edit).
  • Masking uses a vendored disc font (.text-masked + @font-face, text-security-disc, ~2 KB woff2) instead of -webkit-text-security, which is Chromium/WebKit-only — so it works in Firefox too — while staying a multi-line <textarea> so certs/keys paste intact. Gated on a non-empty value so the placeholder stays readable.
  • Non-sensitive values render exactly as before. The .text-masked utility is reusable for any future masked field.

Verification

  • Verified in headless Chromium against the real app CSS: the font loads and two different characters render to pixel-identical discs (i.e. it genuinely masks). Confirmed visually in the local stack in Chrome and Firefox.
  • Playwright assertion added: the entry field gains/loses the masking class as Sensitive is toggled and Show/Hide clicked.
  • npm run build, tsc, eslint clean.

Intended for a v0.38.3 fix release.

Entering a variable value marked Sensitive showed it in plaintext on
screen while typing — only the list/table masked it. Add a
SensitiveValueInput component that masks the value field by default when
Sensitive is checked, with a Show/Hide toggle (mirrors the #503 token
reveal). Used in both the workspace Variables tab and admin Variable Sets
(add + edit).

Masking uses a vendored disc font (.text-masked class + @font-face,
text-security-disc, ~2KB woff2) rather than -webkit-text-security, which
is Chromium/WebKit-only — so it works in Firefox too — while staying a
multi-line textarea so certs/keys paste intact. The mask is gated on a
non-empty value so the placeholder stays readable.

Adds a Playwright assertion: the entry field gains/loses the masking
class as Sensitive is toggled and Show/Hide is clicked.
@mattrobinsonsre mattrobinsonsre enabled auto-merge (squash) June 18, 2026 12:35
@mattrobinsonsre mattrobinsonsre merged commit 1b7ad83 into main Jun 18, 2026
51 checks passed
@mattrobinsonsre mattrobinsonsre deleted the fix/sensitive-var-masking branch June 18, 2026 12:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant