Add Masking for PostHog Session Recording#480
Add Masking for PostHog Session Recording#480Derek Siemens (DerekSiemens) wants to merge 1 commit intomasterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a reusable masking utility and applies it across Mint’s tax-and-cash/registration UI so sensitive user/banking/tax fields can be excluded from PostHog session recordings (via DOM annotations).
Changes:
- Added
posthogMaskingutility helpers to flag sensitive fields and generate masking attributes. - Applied masking attributes broadly across tax/user/banking forms and payout details displays.
- Added heuristic masking for generic input fields based on field type/name patterns.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mint-components/src/utils/posthogMasking.ts | Introduces helper functions to detect sensitive fields and generate a data-sqm-sensitive attribute map. |
| packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx | Applies masking attrs to user info form and its inputs/selects/checkbox. |
| packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx | Applies masking attrs to indirect tax details inputs/selects/checkboxes and container form. |
| packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx | Masks payout detail text (PayPal email / account preview). |
| packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx | Masks indirect tax form container and radio controls. |
| packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.tsx | Adds masking attrs to verification dialog/code component and several banking inputs/selects. |
| packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.tsx | Masks banking form container and radio controls. |
| packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/formDefinitions.tsx | Applies masking attrs across generated banking form fields. |
| packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx | Masks first/last name inputs. |
| packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx | Adds heuristic masking based on field type/name and applies it to the generic input. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ? useDemoBankingInfoForm(this) | ||
| : useBankingInfoForm(this); | ||
|
|
||
| const sensitiveAttrs = sensitiveMaskAttrs(true); |
There was a problem hiding this comment.
The sensitiveAttrs declaration is mis-indented relative to surrounding code, which looks like a formatting slip and makes the render method harder to scan. Please align it with the other const declarations (or run the formatter used in this package).
| const sensitiveAttrs = sensitiveMaskAttrs(true); | |
| const sensitiveAttrs = sensitiveMaskAttrs(true); |
| export function sensitiveMaskAttrs(enabled: boolean): Record<string, string> { | ||
| return enabled | ||
| ? { | ||
| "data-sqm-sensitive": "true", | ||
| } | ||
| : {}; |
There was a problem hiding this comment.
sensitiveMaskAttrs adds a custom data-sqm-sensitive attribute, but there are no references in this repository that configure PostHog/rrweb to mask elements matching this attribute. As-is, this change only annotates DOM nodes and may not actually prevent session recording from capturing the data. Consider using an attribute that rrweb/PostHog masks by default, or add/configure the PostHog initialization to treat [data-sqm-sensitive] as a mask selector (and document that dependency).
| const SENSITIVE_FIELD_PATTERNS = [ | ||
| "name", | ||
| "address", | ||
| "city", | ||
| "state", | ||
| "province", | ||
| "region", | ||
| "postal", | ||
| "zip", | ||
| "phone", | ||
| "tax", | ||
| "account", | ||
| "iban", | ||
| "swift", | ||
| "routing", | ||
| "beneficiary", | ||
| "paypal", | ||
| "bank", | ||
| "card", | ||
| "payment", | ||
| ]; | ||
|
|
||
| export function shouldMaskSensitiveField(field?: string): boolean { | ||
| if (!field) { | ||
| return false; | ||
| } | ||
|
|
||
| const normalized = field.toLowerCase(); | ||
| return SENSITIVE_FIELD_PATTERNS.some((pattern) => | ||
| normalized.includes(pattern) | ||
| ); | ||
| } | ||
|
|
||
| export function sensitiveMaskAttrs(enabled: boolean): Record<string, string> { | ||
| return enabled | ||
| ? { | ||
| "data-sqm-sensitive": "true", | ||
| } | ||
| : {}; | ||
| } |
There was a problem hiding this comment.
New masking logic (shouldMaskSensitiveField, sensitiveMaskAttrs) is untested. Since this package already has unit tests for utils (e.g., src/utils/utils.spec.ts), add specs to cover representative field names (case-insensitivity, empty/undefined input, and ensuring non-sensitive names return false).
Description of the change
Adds masking for sensitive fields and data points so that they do not make it into Posthog.
Type of change
Links
Checklists
Development
Paperwork
Code review