fix(web): forward maskAllTexts/maskAllImages to posthog-js maskCanvas on Flutter web by tsushanth · Pull Request #454 · PostHog/posthog-flutter

tsushanth · 2026-06-26T13:58:10Z

Problem

On Flutter web with the CanvasKit renderer, maskAllTexts = true and maskAllImages = true in PostHogSessionReplayConfig were silently ignored. Session replay there is handled entirely by posthog-js recording the raw <canvas> element — the Dart widget-tree masking pipeline (painting black rectangles over RenderParagraph / RenderImage nodes before screenshot) is never reached because sendMetaEvent and sendFullSnapshot are no-ops on web. As a result, PII painted to the canvas by Text widgets remained visible in recorded replays regardless of the masking config.

Reported in PostHog/posthog#66291.

Fix

During setup() on web, when sessionReplay is enabled and either masking flag is true, the SDK now calls:

posthog.set_config({ session_recording: { maskCanvas: true } })

rrweb then replaces the entire canvas content with a solid colour before encoding each snapshot frame — which is the closest equivalent to per-widget masking that the CanvasKit architecture allows, since all content exists as opaque pixels rather than DOM text nodes.

The tradeoff (whole-canvas replacement vs per-widget bounds) is intrinsic to how CanvasKit works. The PostHogSessionReplayConfig docstring now explains the platform difference and points users to posthog.init() session_recording.maskCanvas for direct control if they need to decouple the flags.

Changes

posthog_flutter_web_handler.dart — expose set_config on the PostHog JS interop extension
posthog_flutter_web.dart — call set_config with maskCanvas: true during setup() when either masking flag is enabled
posthog_config.dart — document per-platform masking behaviour on PostHogSessionReplayConfig, maskAllTexts, and maskAllImages
posthog_flutter_web_handler_test.dart — four browser-only tests covering all flag combinations (maskAllTexts only, maskAllImages only, both false, sessionReplay disabled)

Testing

flutter test --platform chrome test/posthog_flutter_web_handler_test.dart

All four new tests plus the existing suite pass.

… on Flutter web On Flutter web with the CanvasKit renderer, session replay is handled by posthog-js recording the raw <canvas> element. The Dart widget-tree masking pipeline (RenderParagraph / RenderImage rectangles) is never reached because sendMetaEvent and sendFullSnapshot are no-ops on web, so maskAllTexts and maskAllImages were silently ignored and PII painted to the canvas remained visible in replays. Fix: during setup() on web, when sessionReplay is enabled and either masking flag is true, call posthog.set_config({ session_recording: { maskCanvas: true } }). rrweb then replaces the entire canvas content with a solid colour before encoding each snapshot frame, matching the intent of the masking flags. The tradeoff — whole-canvas masking instead of per-widget bounds — is fundamental to how CanvasKit works (pixels, no DOM text nodes) and is documented on PostHogSessionReplayConfig with guidance to configure session_recording.maskCanvas directly in posthog.init() for more control. Adds four browser-only tests covering the four flag combinations. Fixes PostHog/posthog#66291

greptile-apps · 2026-06-26T14:00:01Z

_{Reviews (1): Last reviewed commit: "fix(web): forward maskAllTexts/maskAllIm..." | Re-trigger Greptile}

greptile-apps · 2026-06-26T14:00:05Z

+    test('calls set_config maskCanvas when maskAllTexts is true', () async {
+      final config = PostHogConfig('test-token')
+        ..sessionReplay = true
+        ..sessionReplayConfig = (PostHogSessionReplayConfig()
+          ..maskAllTexts = true
+          ..maskAllImages = false);
+
+      await PosthogFlutterWeb().setup(config);
+
+      expect(setConfigCalled, isTrue);
+      final cfg = capturedConfig!.dartify()! as Map<Object?, Object?>;
+      final recording = cfg['session_recording'] as Map<Object?, Object?>;
+      expect(recording['maskCanvas'], isTrue);
+    });
+
+    test('calls set_config maskCanvas when maskAllImages is true', () async {
+      final config = PostHogConfig('test-token')
+        ..sessionReplay = true
+        ..sessionReplayConfig = (PostHogSessionReplayConfig()
+          ..maskAllTexts = false
+          ..maskAllImages = true);
+
+      await PosthogFlutterWeb().setup(config);
+
+      expect(setConfigCalled, isTrue);
+      final cfg = capturedConfig!.dartify()! as Map<Object?, Object?>;
+      final recording = cfg['session_recording'] as Map<Object?, Object?>;
+      expect(recording['maskCanvas'], isTrue);
+    });
+
+    test('does not call set_config maskCanvas when both masking flags are false',
+        () async {
+      final config = PostHogConfig('test-token')
+        ..sessionReplay = true
+        ..sessionReplayConfig = (PostHogSessionReplayConfig()
+          ..maskAllTexts = false
+          ..maskAllImages = false);
+
+      await PosthogFlutterWeb().setup(config);
+
+      expect(setConfigCalled, isFalse);
+    });
+
+    test('does not call set_config maskCanvas when sessionReplay is disabled',
+        () async {
+      final config = PostHogConfig('test-token')
+        ..sessionReplay = false
+        ..sessionReplayConfig = (PostHogSessionReplayConfig()
+          ..maskAllTexts = true
+          ..maskAllImages = true);
+
+      await PosthogFlutterWeb().setup(config);
+
+      expect(setConfigCalled, isFalse);
+    });


Prefer parameterised tests for the masking flag combinations

The four new tests are structurally identical — each creates a PostHogConfig with a specific pair of (maskAllTexts, maskAllImages, sessionReplay) values and asserts whether set_config was called. Per the project's coding conventions, this pattern should be expressed as a single parameterised test (a for loop over a table of cases) rather than four near-duplicate test bodies. The "both flags true + sessionReplay enabled" combination is also absent from the positive-call cases, which a table format would make obvious to add.

Context Used: Do not attempt to comment on incorrect alphabetica... (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@tsushanth I think this should be addressed as well

turnipdabeets · 2026-06-26T16:02:38Z

@tsushanth IIRC maskCanvas isn't a posthog-js session_recording option, so it gets dropped — posthog-js only forwards an allow-listed set of keys to rrweb, and maskCanvas isn't one of them.

Could you please validate against an actual recorded replay, since the current tests only assert the SDK calls its own mock? A short public video of a replay with the canvas masked attached to the PR would be super helpful for confirming it end to end. 🙏

ioannisj · 2026-06-30T05:29:07Z

+### Bug Fixes
+
+- Flutter web (CanvasKit): `maskAllTexts` and `maskAllImages` now take effect on web. Previously these flags were no-ops on Flutter web because the Dart widget-tree masking pipeline is bypassed when posthog-js records the raw `<canvas>` element. The SDK now translates either flag to posthog-js `session_recording.maskCanvas: true` during `setup()`, which instructs rrweb to replace the entire canvas with a solid colour in the recorded stream. This closes the PII gap reported for `Text` widgets rendered with the CanvasKit renderer (fixes PostHog/posthog#66291).


Let's revert this and add it as a changeset item

ioannisj · 2026-06-30T05:37:12Z

+        try {
+          ph.set_config(
+            mapToJSAny({
+              'session_recording': {'maskCanvas': true},


Can we validate that this gets used correctly by web sdk? Looking at the code here it seems that maskCanvas will be silently dropped

Also should this config be merged with any possible config passed js init side? (since we'll be replacing the whole config this way)

tsushanth · 2026-07-01T14:08:48Z

Thanks for the heads-up @turnipdabeets — confirmed, maskCanvas isn't in posthog-js's allow-listed session_recording keys so it would be silently dropped before reaching rrweb. The Dart-side tests only mock the set_config call so they don't catch this.

Two questions before I update the approach:

Is there a different session_recording key posthog-js does pass to rrweb for canvas masking? I looked at the types and only see canvasRecording/canvasFps/canvasQuality (for recording canvas) and a masking field from remote config — neither seems right for blanket canvas masking.
If no such key exists today, should this PR instead document the limitation ("Flutter Web canvas elements on CanvasKit aren't covered by maskAllTexts/maskAllImages because posthog-js records the raw canvas") and hold off until posthog-js exposes a forwarded mask option?

Happy to either pivot the implementation or convert this to a docs/known-limitations note — just want to make sure we land something correct.

turnipdabeets · 2026-07-01T20:07:36Z

Thanks for the heads-up @turnipdabeets — confirmed, maskCanvas isn't in posthog-js's allow-listed session_recording keys so it would be silently dropped before reaching rrweb. The Dart-side tests only mock the set_config call so they don't catch this.

Two questions before I update the approach:

Is there a different session_recording key posthog-js does pass to rrweb for canvas masking? I looked at the types and only see canvasRecording/canvasFps/canvasQuality (for recording canvas) and a masking field from remote config — neither seems right for blanket canvas masking.

If no such key exists today, should this PR instead document the limitation ("Flutter Web canvas elements on CanvasKit aren't covered by maskAllTexts/maskAllImages because posthog-js records the raw canvas") and hold off until posthog-js exposes a forwarded mask option?

Happy to either pivot the implementation or convert this to a docs/known-limitations note — just want to make sure we land something correct.

Is there a session_recording key that masks canvas content? No. rrweb treats a as all-or-nothing — you can record it (recordCanvas) or block it (blockSelector), but there's no per-region canvas masking. The text/input/block selectors only act on DOM nodes, and CanvasKit paints straight to pixels, so none of them reach the content.
Document the limitation? Yes , that could be helpful.

Then the real fix — granular masking on web — I believe is Flutter-side, not a posthog-js key: overlay mask elements at the widget bounds we already compute for native (#453), so rrweb blocks just those regions. That needs a spike (how the canvas composites, mutation cost on scroll/animation, etc).

…oken workaround posthog-js does not expose a maskCanvas session_recording key that rrweb honours, so the set_config() call in the previous commit was a no-op. Replace the code change with a comment and a CHANGELOG entry that accurately describes the limitation: maskAllTexts / maskAllImages have no effect on Flutter web with CanvasKit because posthog-js records the raw <canvas> element and rrweb has no per-region canvas masking API.

tsushanth · 2026-07-01T20:33:37Z

Thanks @turnipdabeets — I've updated the PR. The set_config code is removed; the commit now only adds:

A code comment in posthog_flutter_web.dart explaining why masking is a no-op (rrweb records raw canvas pixels, no per-region masking API exists today)
A Known Limitations changelog entry so users don't assume the flags work on CanvasKit web

Let me know if you'd prefer the note live elsewhere (README, docs site, etc.) or if you'd rather just close this and track the real fix in an issue.

turnipdabeets · 2026-07-01T20:38:30Z

Thanks @turnipdabeets — I've updated the PR. The set_config code is removed; the commit now only adds:

A code comment in posthog_flutter_web.dart explaining why masking is a no-op (rrweb records raw canvas pixels, no per-region masking API exists today)

A Known Limitations changelog entry so users don't assume the flags work on CanvasKit web

Let me know if you'd prefer the note live elsewhere (README, docs site, etc.) or if you'd rather just close this and track the real fix in an issue.

There's still artifacts in this PR that are not documentation that we need to remove. I think it's ok to add some docs here for IDEs , wdyt @ioannisj ?

tsushanth requested a review from a team as a code owner June 26, 2026 13:58

greptile-apps Bot reviewed Jun 26, 2026

View reviewed changes

ioannisj reviewed Jun 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(web): forward maskAllTexts/maskAllImages to posthog-js maskCanvas on Flutter web#454

fix(web): forward maskAllTexts/maskAllImages to posthog-js maskCanvas on Flutter web#454
tsushanth wants to merge 2 commits into
PostHog:mainfrom
tsushanth:fix/flutter-web-canvas-masking-66291

tsushanth commented Jun 26, 2026

Uh oh!

greptile-apps Bot commented Jun 26, 2026

Uh oh!

greptile-apps Bot Jun 26, 2026

Uh oh!

turnipdabeets Jul 1, 2026

Uh oh!

turnipdabeets commented Jun 26, 2026 •

edited

Loading

Uh oh!

ioannisj Jun 30, 2026

Uh oh!

ioannisj Jun 30, 2026

Uh oh!

ioannisj Jun 30, 2026

Uh oh!

tsushanth commented Jul 1, 2026

Uh oh!

turnipdabeets commented Jul 1, 2026

Uh oh!

tsushanth commented Jul 1, 2026

Uh oh!

turnipdabeets commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		### Bug Fixes

		- Flutter web (CanvasKit): `maskAllTexts` and `maskAllImages` now take effect on web. Previously these flags were no-ops on Flutter web because the Dart widget-tree masking pipeline is bypassed when posthog-js records the raw `<canvas>` element. The SDK now translates either flag to posthog-js `session_recording.maskCanvas: true` during `setup()`, which instructs rrweb to replace the entire canvas with a solid colour in the recorded stream. This closes the PII gap reported for `Text` widgets rendered with the CanvasKit renderer (fixes PostHog/posthog#66291).

Uh oh!

Conversation

tsushanth commented Jun 26, 2026

Problem

Fix

Changes

Testing

Uh oh!

greptile-apps Bot commented Jun 26, 2026

Uh oh!

greptile-apps Bot Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

turnipdabeets Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

turnipdabeets commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ioannisj Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

ioannisj Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

ioannisj Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

tsushanth commented Jul 1, 2026

Uh oh!

turnipdabeets commented Jul 1, 2026

Uh oh!

tsushanth commented Jul 1, 2026

Uh oh!

turnipdabeets commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

turnipdabeets commented Jun 26, 2026 •

edited

Loading