Skip to content

Conversation

@Juice10
Copy link
Member

@Juice10 Juice10 commented Oct 26, 2022

Adds support for recording cross origin iframes.
As long as rrweb is present in both top level frame a child iframe, the child iframe will send rrweb events to its parent for processing and emitting.

Demo: Cross origin iframe recording in action

cross.origin.iframe.recording.mov

Demo: canvas-webrtc plugin also supported

webrtc.in.nested.cross.origin.iframes.mov

Breaking changes compared to rrweb 2.0.0.alpha.3 (but not present in rrweb 1.x):

  • plugin getMirror() arguments have changed and now expects multiple mirrors as opposed to just one

Other changes:

  • We're now running all tests on GitHub-Actions as opposed to travis ci. Github Actions is faster (4 minute builds vs 5-7 minute builds) and gives us insight into any failing visual tests by uploading the failing diff image as an artefact on the run.

TODO:

  • add documentation for cross origin iframe
  • add zh_CN translations of documentation
  • add cross-origin recording to repl

@wfk007
Copy link
Contributor

wfk007 commented Oct 27, 2022

I am so excited about this great work!

@Yuyz0112
Copy link
Member

Yuyz0112 commented Nov 3, 2022

100% agree with the current approach

@thatsnotright
Copy link

Thank you for dropping the ancestororigins use to let this support Firefox!

@Yuyz0112 Yuyz0112 merged commit 2a80949 into master Nov 16, 2022
@Juice10 Juice10 deleted the cross-origin-iframes branch November 16, 2022 07:05
@Juice10 Juice10 added the 2.0 label Dec 1, 2022
Vadman97 added a commit to highlight/highlight that referenced this pull request Jan 9, 2023
## Summary

Brings in rrweb-io/rrweb#1035 and adds options
to the client to support the new feature.
Customers who are interested in using cross-origin iframe recording will
add `H.init` to their app as well as to their iframe page, but with a
new option `isCrossOriginIframe: true`

Related PRs:
* highlight/highlight-javascript#7
* highlight/rrweb#99
* highlight/docs#28

Iframe network/console recording will be handled separately by HIG-3496.
Cross-origin recording of network/console messages would require similar
`postMessage` forwarding.

This change also turns off rrweb record start/stopping because rrweb has
some bugs in that it does not clean up all of its even listeners on
record stop, causing a subsequent record restart to add duplicate
listeners.

Also closes HIG-3557

## How did you test this change?

With the change:
https://www.loom.com/share/4e0cc7663b0344f6989bd56659d70b13

Without the change, the same iframe does not get recorded:
https://www.loom.com/share/32403b5bef4645609527721eeb415364

## Are there any deployment considerations?

New version.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants