Enable Canvas support for Recordings

[benjackwhite]

Is your feature request related to a problem?

Summary issue for:
Closes #13888
Closes #2798

With RRweb2 we can enable Canvas support but it comes with a downside - to playback it seems that the iframe replaying the browser ends up with <iframe sandbox="allow-scripts allow-same-origin" /> (see code here)

Describe the solution you'd like

We should investigate what this means in terms of risk.

• If this is limited to RRWeb doing things back and forth in the iframe then one could argue this is tolerable.
• If it means the customer's JS is able to run within PostHog, then is it "safe" in the sense that their JS would be able to run in their PostHog account (i.e. unable to affect anyone else)
• If it means any 3rd party JS could run within PostHog then this feels a lot less safe...

At the very least we should document the outcome to a FAQ section for Recordings so that we don't

Describe alternatives you've considered

We could potentially detect use of canvas playback and offer a way for them to open the recording in a different context that wouldn't expose tokens etc. to the parent running it perhaps.

There is also some sort of webrtc implementation to stream the canvas but that seems targeted at live-streaming, not cold playback.

Additional context

https://github.com/rrweb-io/rrweb/blob/master/docs/recipes/canvas.md
https://github.com/PostHog/posthog-js/pull/562/files

Thank you for your feature request – we love each and every one!

[mariusandra]

Does this mean that the "correct" solution is to record the WebRTC stream in our backend (hello media encoding servers) and then play it back during playback? 🙈

[benjackwhite]

Maybe? It definitely seems more geared towards live-streaming between browsers (think Teamviewer support) than offline playback.

I'm wondering if there is a way we can do this with nested iframes 🤔

[mano233]

Maybe? It definitely seems more geared towards live-streaming between browsers (think Teamviewer support) than offline playback.

I'm wondering if there is a way we can do this with nested iframes 🤔

I think that using canvas snapshot can avoid security issues.(use S3)

[edweip3]

Can you at least enable recording but disable playback? That way we can still use the API to fetch the recording and playback locally.

[kylewhitaker]

Hey @benjackwhite thanks for answering my question on Posthog about this! Have y'all considered Alternatively enable image snapshot recording of Canvas at a maximum of 15 frames per second? On the surface, it seems like it would solve the security woes, but I'm sure it's no small lift to store, retrieve, and replay these images in line with the rest of replay. Wdyt? How can I help? I'm an engineer at DataGPT and we rely heavily on canvas in our UI application where we're using Posthog's session replay, so this is a blindspot for us on Posthog's platform!

[benjackwhite]

@kylewhitaker I don't think its that simple I'm afraid.

Just set up a branch to validate this here: https://github.com/PostHog/posthog-js/tree/feat/canvas
The capture works but the playback doesn't without making the iframe insecure (which exposes us to potential dangerous scripts).

I'd love to have a quick win here but there doesn't seem to be one without diving deeper into rrweb and making some changes. Very ready to be corrected though!

[benjackwhite]

Did some further digging to see if enabling with those options and modifying rrweb to not set "allow-scripts" on the iframe works - but nope! So I think the current implementation just wont work without that iframe setting (which is the issue).

[Jaxkr]

Would love to see this feature!

Highlight seems to have exactly what we want: https://www.highlight.io/docs/getting-started/client-sdk/replay-configuration/canvas

I wonder how they solved the insecure iframe problem 🤔

[namrata-chatterjee]

+1 on highlight.io , would love for posthog to enable this feature now, it is a game changer. Can you guys give an estimate to when this will happen?

[Jaxkr]

Hey @benjackwhite and @pauldambra, sorry to bother but I noticed this feature was referenced in your most recent completed sprint. What was the fate of it? Is it a hang over issue?

[pauldambra]

Ah @Jaxkr that was a different canvas issue... we're planning for the next few months tomorrow... let's see what that brings

[daibhin]

We are currently testing support for canvas replay. Feel free to reach out via support if you would like to be included in an early preview

EDIT - You can now opt in via a setting in the app.

[daibhin]

Canvas support is now live for all. It is opt-out by default (as there is no way to mask PII) so you will need to enable it from the Replay settings within the PostHog app

[kylewhitaker]

@daibhin We've been seeing Canvas recordings for the past week now. Really thrilled about this feature add, thank you!

[evandarcy]

This feature is awesome! However, it seems that only a portion of the canvas is being recorded in my case (it should be fullscreen). Is anyone aware of this issue?

[pauldambra]

Hey @evandarcy can you open a support ticket at https://us.posthog.com/#panel=support%3Asupport%3Asession_replay%3Alow

If you include your posthog config and whether the site in question is publicly accessible for us to check out.

Thanks