Skip to content

Commit 95eeb4b

Browse files
YunFeng0817jeffdnguyen
YunFeng0817
authored and
jeffdnguyen
committed
fix: some nested cross-origin iframes can't be recorded (rrweb-io#1353)
* fix: some nested cross-origin iframes can't be recorded * fix building error in rrweb-player * add test case for this special case * Apply formatting changes --------- Co-authored-by: YunFeng0817 <[email protected]>
1 parent 42b90b8 commit 95eeb4b

File tree

4 files changed

+307
-0
lines changed

4 files changed

+307
-0
lines changed

‎.changeset/purple-carrots-film.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb": patch
3+
---
4+
5+
Fix: some nested cross-origin iframes can't be recorded

‎packages/rrweb/src/record/iframe-manager.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,14 @@ export class IframeManager {
9191
attributes: [],
9292
isAttachIframe: true,
9393
});
94+
95+
// Receive messages (events) coming from cross-origin iframes that are nested in this same-origin iframe.
96+
if (this.recordCrossOriginIframes)
97+
iframeEl.contentWindow?.addEventListener(
98+
'message',
99+
this.handleMessage.bind(this),
100+
);
101+
94102
this.loadListener?.(iframeEl);
95103

96104
if (

‎packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5369,3 +5369,273 @@ exports[`same origin iframes > should emit contents of iframe once 1`] = `
53695369
}
53705370
]"
53715371
`;
5372+
5373+
exports[`same origin iframes should record cross-origin iframe in same-origin iframe 1`] = `
5374+
"[
5375+
{
5376+
\\"type\\": 4,
5377+
\\"data\\": {
5378+
\\"href\\": \\"about:blank\\",
5379+
\\"width\\": 1920,
5380+
\\"height\\": 1080
5381+
}
5382+
},
5383+
{
5384+
\\"type\\": 2,
5385+
\\"data\\": {
5386+
\\"node\\": {
5387+
\\"type\\": 0,
5388+
\\"childNodes\\": [
5389+
{
5390+
\\"type\\": 1,
5391+
\\"name\\": \\"html\\",
5392+
\\"publicId\\": \\"\\",
5393+
\\"systemId\\": \\"\\",
5394+
\\"id\\": 2
5395+
},
5396+
{
5397+
\\"type\\": 2,
5398+
\\"tagName\\": \\"html\\",
5399+
\\"attributes\\": {},
5400+
\\"childNodes\\": [
5401+
{
5402+
\\"type\\": 2,
5403+
\\"tagName\\": \\"head\\",
5404+
\\"attributes\\": {},
5405+
\\"childNodes\\": [
5406+
{
5407+
\\"type\\": 2,
5408+
\\"tagName\\": \\"script\\",
5409+
\\"attributes\\": {
5410+
\\"type\\": \\"text/javascript\\"
5411+
},
5412+
\\"childNodes\\": [
5413+
{
5414+
\\"type\\": 3,
5415+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5416+
\\"id\\": 6
5417+
}
5418+
],
5419+
\\"id\\": 5
5420+
}
5421+
],
5422+
\\"id\\": 4
5423+
},
5424+
{
5425+
\\"type\\": 2,
5426+
\\"tagName\\": \\"body\\",
5427+
\\"attributes\\": {},
5428+
\\"childNodes\\": [
5429+
{
5430+
\\"type\\": 3,
5431+
\\"textContent\\": \\"\\\\n \\",
5432+
\\"id\\": 8
5433+
},
5434+
{
5435+
\\"type\\": 2,
5436+
\\"tagName\\": \\"iframe\\",
5437+
\\"attributes\\": {},
5438+
\\"childNodes\\": [],
5439+
\\"id\\": 9
5440+
},
5441+
{
5442+
\\"type\\": 3,
5443+
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
5444+
\\"id\\": 10
5445+
}
5446+
],
5447+
\\"id\\": 7
5448+
}
5449+
],
5450+
\\"id\\": 3
5451+
}
5452+
],
5453+
\\"id\\": 1
5454+
},
5455+
\\"initialOffset\\": {
5456+
\\"left\\": 0,
5457+
\\"top\\": 0
5458+
}
5459+
}
5460+
},
5461+
{
5462+
\\"type\\": 3,
5463+
\\"data\\": {
5464+
\\"source\\": 0,
5465+
\\"adds\\": [
5466+
{
5467+
\\"parentId\\": 9,
5468+
\\"nextId\\": null,
5469+
\\"node\\": {
5470+
\\"type\\": 0,
5471+
\\"childNodes\\": [
5472+
{
5473+
\\"type\\": 2,
5474+
\\"tagName\\": \\"html\\",
5475+
\\"attributes\\": {},
5476+
\\"childNodes\\": [
5477+
{
5478+
\\"type\\": 2,
5479+
\\"tagName\\": \\"head\\",
5480+
\\"attributes\\": {},
5481+
\\"childNodes\\": [],
5482+
\\"rootId\\": 11,
5483+
\\"id\\": 13
5484+
},
5485+
{
5486+
\\"type\\": 2,
5487+
\\"tagName\\": \\"body\\",
5488+
\\"attributes\\": {},
5489+
\\"childNodes\\": [],
5490+
\\"rootId\\": 11,
5491+
\\"id\\": 14
5492+
}
5493+
],
5494+
\\"rootId\\": 11,
5495+
\\"id\\": 12
5496+
}
5497+
],
5498+
\\"compatMode\\": \\"BackCompat\\",
5499+
\\"id\\": 11
5500+
}
5501+
}
5502+
],
5503+
\\"removes\\": [],
5504+
\\"texts\\": [],
5505+
\\"attributes\\": [],
5506+
\\"isAttachIframe\\": true
5507+
}
5508+
},
5509+
{
5510+
\\"type\\": 3,
5511+
\\"data\\": {
5512+
\\"source\\": 0,
5513+
\\"texts\\": [],
5514+
\\"attributes\\": [],
5515+
\\"removes\\": [],
5516+
\\"adds\\": [
5517+
{
5518+
\\"parentId\\": 13,
5519+
\\"nextId\\": null,
5520+
\\"node\\": {
5521+
\\"type\\": 2,
5522+
\\"tagName\\": \\"script\\",
5523+
\\"attributes\\": {
5524+
\\"type\\": \\"text/javascript\\"
5525+
},
5526+
\\"childNodes\\": [],
5527+
\\"rootId\\": 11,
5528+
\\"id\\": 15
5529+
}
5530+
},
5531+
{
5532+
\\"parentId\\": 15,
5533+
\\"nextId\\": null,
5534+
\\"node\\": {
5535+
\\"type\\": 3,
5536+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5537+
\\"rootId\\": 11,
5538+
\\"id\\": 16
5539+
}
5540+
}
5541+
]
5542+
}
5543+
},
5544+
{
5545+
\\"type\\": 3,
5546+
\\"data\\": {
5547+
\\"source\\": 0,
5548+
\\"texts\\": [],
5549+
\\"attributes\\": [],
5550+
\\"removes\\": [],
5551+
\\"adds\\": [
5552+
{
5553+
\\"parentId\\": 14,
5554+
\\"nextId\\": null,
5555+
\\"node\\": {
5556+
\\"type\\": 2,
5557+
\\"tagName\\": \\"iframe\\",
5558+
\\"attributes\\": {},
5559+
\\"childNodes\\": [],
5560+
\\"rootId\\": 11,
5561+
\\"id\\": 17
5562+
}
5563+
}
5564+
]
5565+
}
5566+
},
5567+
{
5568+
\\"type\\": 3,
5569+
\\"data\\": {
5570+
\\"source\\": 0,
5571+
\\"adds\\": [
5572+
{
5573+
\\"parentId\\": 17,
5574+
\\"nextId\\": null,
5575+
\\"node\\": {
5576+
\\"type\\": 0,
5577+
\\"childNodes\\": [
5578+
{
5579+
\\"type\\": 2,
5580+
\\"tagName\\": \\"html\\",
5581+
\\"attributes\\": {},
5582+
\\"childNodes\\": [
5583+
{
5584+
\\"type\\": 2,
5585+
\\"tagName\\": \\"head\\",
5586+
\\"attributes\\": {},
5587+
\\"childNodes\\": [
5588+
{
5589+
\\"type\\": 2,
5590+
\\"tagName\\": \\"script\\",
5591+
\\"attributes\\": {
5592+
\\"type\\": \\"text/javascript\\"
5593+
},
5594+
\\"childNodes\\": [
5595+
{
5596+
\\"type\\": 3,
5597+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5598+
\\"rootId\\": 18,
5599+
\\"id\\": 22
5600+
}
5601+
],
5602+
\\"rootId\\": 18,
5603+
\\"id\\": 21
5604+
}
5605+
],
5606+
\\"rootId\\": 18,
5607+
\\"id\\": 20
5608+
},
5609+
{
5610+
\\"type\\": 2,
5611+
\\"tagName\\": \\"body\\",
5612+
\\"attributes\\": {},
5613+
\\"childNodes\\": [
5614+
{
5615+
\\"type\\": 3,
5616+
\\"textContent\\": \\"\\\\n\\\\n\\",
5617+
\\"rootId\\": 18,
5618+
\\"id\\": 24
5619+
}
5620+
],
5621+
\\"rootId\\": 18,
5622+
\\"id\\": 23
5623+
}
5624+
],
5625+
\\"rootId\\": 18,
5626+
\\"id\\": 19
5627+
}
5628+
],
5629+
\\"compatMode\\": \\"BackCompat\\",
5630+
\\"id\\": 18
5631+
}
5632+
}
5633+
],
5634+
\\"removes\\": [],
5635+
\\"texts\\": [],
5636+
\\"attributes\\": [],
5637+
\\"isAttachIframe\\": true
5638+
}
5639+
}
5640+
]"
5641+
`;

‎packages/rrweb/test/record/cross-origin-iframes.test.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -594,4 +594,28 @@ describe('same origin iframes', function (this: ISuite) {
594594
expect(events.length).toBe(4);
595595
assertSnapshot(events);
596596
});
597+
598+
it('should record cross-origin iframe in same-origin iframe', async () => {
599+
const sameOriginIframe = ctx.page.mainFrame().childFrames()[0];
600+
await sameOriginIframe.evaluate((serverUrl) => {
601+
/**
602+
* Create a cross-origin iframe in this same-origin iframe.
603+
*/
604+
const crossOriginIframe = document.createElement('iframe');
605+
document.body.appendChild(crossOriginIframe);
606+
crossOriginIframe.src = `${serverUrl}/html/blank.html`;
607+
return new Promise((resolve) => {
608+
crossOriginIframe.onload = resolve;
609+
});
610+
}, ctx.serverURL);
611+
const crossOriginIframe = sameOriginIframe.childFrames()[0];
612+
// Inject recording script into this cross-origin iframe
613+
await injectRecordScript(crossOriginIframe);
614+
615+
await waitForRAF(ctx.page);
616+
const snapshots = (await ctx.page.evaluate(
617+
'window.snapshots',
618+
)) as eventWithTime[];
619+
assertSnapshot(snapshots);
620+
});
597621
});

0 commit comments

Comments
 (0)