Skip to content

Commit 40d99a9

Browse files
YunFeng0817YunFeng0817
committed
add test case for this special case
1 parent 13855a8 commit 40d99a9

File tree

3 files changed

+295
-1
lines changed

3 files changed

+295
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export class IframeManager {
7575
isAttachIframe: true,
7676
});
7777

78-
// Listen for messages from cross-origin IFrames that are nested in this iframe.
78+
// Receive messages (events) coming from cross-origin iframes that are nested in this same-origin iframe.
7979
if (this.recordCrossOriginIframes)
8080
iframeEl.contentWindow?.addEventListener(
8181
'message',

‎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
@@ -5538,3 +5538,273 @@ exports[`same origin iframes should emit contents of iframe once 1`] = `
55385538
}
55395539
]"
55405540
`;
5541+
5542+
exports[`same origin iframes should record cross-origin iframe in same-origin iframe 1`] = `
5543+
"[
5544+
{
5545+
\\"type\\": 4,
5546+
\\"data\\": {
5547+
\\"href\\": \\"about:blank\\",
5548+
\\"width\\": 1920,
5549+
\\"height\\": 1080
5550+
}
5551+
},
5552+
{
5553+
\\"type\\": 2,
5554+
\\"data\\": {
5555+
\\"node\\": {
5556+
\\"type\\": 0,
5557+
\\"childNodes\\": [
5558+
{
5559+
\\"type\\": 1,
5560+
\\"name\\": \\"html\\",
5561+
\\"publicId\\": \\"\\",
5562+
\\"systemId\\": \\"\\",
5563+
\\"id\\": 2
5564+
},
5565+
{
5566+
\\"type\\": 2,
5567+
\\"tagName\\": \\"html\\",
5568+
\\"attributes\\": {},
5569+
\\"childNodes\\": [
5570+
{
5571+
\\"type\\": 2,
5572+
\\"tagName\\": \\"head\\",
5573+
\\"attributes\\": {},
5574+
\\"childNodes\\": [
5575+
{
5576+
\\"type\\": 2,
5577+
\\"tagName\\": \\"script\\",
5578+
\\"attributes\\": {
5579+
\\"type\\": \\"text/javascript\\"
5580+
},
5581+
\\"childNodes\\": [
5582+
{
5583+
\\"type\\": 3,
5584+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5585+
\\"id\\": 6
5586+
}
5587+
],
5588+
\\"id\\": 5
5589+
}
5590+
],
5591+
\\"id\\": 4
5592+
},
5593+
{
5594+
\\"type\\": 2,
5595+
\\"tagName\\": \\"body\\",
5596+
\\"attributes\\": {},
5597+
\\"childNodes\\": [
5598+
{
5599+
\\"type\\": 3,
5600+
\\"textContent\\": \\"\\\\n \\",
5601+
\\"id\\": 8
5602+
},
5603+
{
5604+
\\"type\\": 2,
5605+
\\"tagName\\": \\"iframe\\",
5606+
\\"attributes\\": {},
5607+
\\"childNodes\\": [],
5608+
\\"id\\": 9
5609+
},
5610+
{
5611+
\\"type\\": 3,
5612+
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
5613+
\\"id\\": 10
5614+
}
5615+
],
5616+
\\"id\\": 7
5617+
}
5618+
],
5619+
\\"id\\": 3
5620+
}
5621+
],
5622+
\\"id\\": 1
5623+
},
5624+
\\"initialOffset\\": {
5625+
\\"left\\": 0,
5626+
\\"top\\": 0
5627+
}
5628+
}
5629+
},
5630+
{
5631+
\\"type\\": 3,
5632+
\\"data\\": {
5633+
\\"source\\": 0,
5634+
\\"adds\\": [
5635+
{
5636+
\\"parentId\\": 9,
5637+
\\"nextId\\": null,
5638+
\\"node\\": {
5639+
\\"type\\": 0,
5640+
\\"childNodes\\": [
5641+
{
5642+
\\"type\\": 2,
5643+
\\"tagName\\": \\"html\\",
5644+
\\"attributes\\": {},
5645+
\\"childNodes\\": [
5646+
{
5647+
\\"type\\": 2,
5648+
\\"tagName\\": \\"head\\",
5649+
\\"attributes\\": {},
5650+
\\"childNodes\\": [],
5651+
\\"rootId\\": 11,
5652+
\\"id\\": 13
5653+
},
5654+
{
5655+
\\"type\\": 2,
5656+
\\"tagName\\": \\"body\\",
5657+
\\"attributes\\": {},
5658+
\\"childNodes\\": [],
5659+
\\"rootId\\": 11,
5660+
\\"id\\": 14
5661+
}
5662+
],
5663+
\\"rootId\\": 11,
5664+
\\"id\\": 12
5665+
}
5666+
],
5667+
\\"compatMode\\": \\"BackCompat\\",
5668+
\\"id\\": 11
5669+
}
5670+
}
5671+
],
5672+
\\"removes\\": [],
5673+
\\"texts\\": [],
5674+
\\"attributes\\": [],
5675+
\\"isAttachIframe\\": true
5676+
}
5677+
},
5678+
{
5679+
\\"type\\": 3,
5680+
\\"data\\": {
5681+
\\"source\\": 0,
5682+
\\"texts\\": [],
5683+
\\"attributes\\": [],
5684+
\\"removes\\": [],
5685+
\\"adds\\": [
5686+
{
5687+
\\"parentId\\": 13,
5688+
\\"nextId\\": null,
5689+
\\"node\\": {
5690+
\\"type\\": 2,
5691+
\\"tagName\\": \\"script\\",
5692+
\\"attributes\\": {
5693+
\\"type\\": \\"text/javascript\\"
5694+
},
5695+
\\"childNodes\\": [],
5696+
\\"rootId\\": 11,
5697+
\\"id\\": 15
5698+
}
5699+
},
5700+
{
5701+
\\"parentId\\": 15,
5702+
\\"nextId\\": null,
5703+
\\"node\\": {
5704+
\\"type\\": 3,
5705+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5706+
\\"rootId\\": 11,
5707+
\\"id\\": 16
5708+
}
5709+
}
5710+
]
5711+
}
5712+
},
5713+
{
5714+
\\"type\\": 3,
5715+
\\"data\\": {
5716+
\\"source\\": 0,
5717+
\\"texts\\": [],
5718+
\\"attributes\\": [],
5719+
\\"removes\\": [],
5720+
\\"adds\\": [
5721+
{
5722+
\\"parentId\\": 14,
5723+
\\"nextId\\": null,
5724+
\\"node\\": {
5725+
\\"type\\": 2,
5726+
\\"tagName\\": \\"iframe\\",
5727+
\\"attributes\\": {},
5728+
\\"childNodes\\": [],
5729+
\\"rootId\\": 11,
5730+
\\"id\\": 17
5731+
}
5732+
}
5733+
]
5734+
}
5735+
},
5736+
{
5737+
\\"type\\": 3,
5738+
\\"data\\": {
5739+
\\"source\\": 0,
5740+
\\"adds\\": [
5741+
{
5742+
\\"parentId\\": 17,
5743+
\\"nextId\\": null,
5744+
\\"node\\": {
5745+
\\"type\\": 0,
5746+
\\"childNodes\\": [
5747+
{
5748+
\\"type\\": 2,
5749+
\\"tagName\\": \\"html\\",
5750+
\\"attributes\\": {},
5751+
\\"childNodes\\": [
5752+
{
5753+
\\"type\\": 2,
5754+
\\"tagName\\": \\"head\\",
5755+
\\"attributes\\": {},
5756+
\\"childNodes\\": [
5757+
{
5758+
\\"type\\": 2,
5759+
\\"tagName\\": \\"script\\",
5760+
\\"attributes\\": {
5761+
\\"type\\": \\"text/javascript\\"
5762+
},
5763+
\\"childNodes\\": [
5764+
{
5765+
\\"type\\": 3,
5766+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
5767+
\\"rootId\\": 18,
5768+
\\"id\\": 22
5769+
}
5770+
],
5771+
\\"rootId\\": 18,
5772+
\\"id\\": 21
5773+
}
5774+
],
5775+
\\"rootId\\": 18,
5776+
\\"id\\": 20
5777+
},
5778+
{
5779+
\\"type\\": 2,
5780+
\\"tagName\\": \\"body\\",
5781+
\\"attributes\\": {},
5782+
\\"childNodes\\": [
5783+
{
5784+
\\"type\\": 3,
5785+
\\"textContent\\": \\"\\\\n\\\\n\\",
5786+
\\"rootId\\": 18,
5787+
\\"id\\": 24
5788+
}
5789+
],
5790+
\\"rootId\\": 18,
5791+
\\"id\\": 23
5792+
}
5793+
],
5794+
\\"rootId\\": 18,
5795+
\\"id\\": 19
5796+
}
5797+
],
5798+
\\"compatMode\\": \\"BackCompat\\",
5799+
\\"id\\": 18
5800+
}
5801+
}
5802+
],
5803+
\\"removes\\": [],
5804+
\\"texts\\": [],
5805+
\\"attributes\\": [],
5806+
\\"isAttachIframe\\": true
5807+
}
5808+
}
5809+
]"
5810+
`;

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -604,4 +604,28 @@ describe('same origin iframes', function (this: ISuite) {
604604
expect(events.length).toBe(4);
605605
assertSnapshot(events);
606606
});
607+
608+
it('should record cross-origin iframe in same-origin iframe', async () => {
609+
const sameOriginIframe = ctx.page.mainFrame().childFrames()[0];
610+
await sameOriginIframe.evaluate((serverUrl) => {
611+
/**
612+
* Create a cross-origin iframe in this same-origin iframe.
613+
*/
614+
const crossOriginIframe = document.createElement('iframe');
615+
document.body.appendChild(crossOriginIframe);
616+
crossOriginIframe.src = `${serverUrl}/html/blank.html`;
617+
return new Promise((resolve) => {
618+
crossOriginIframe.onload = resolve;
619+
});
620+
}, ctx.serverURL);
621+
const crossOriginIframe = sameOriginIframe.childFrames()[0];
622+
// Inject recording script into this cross-origin iframe
623+
await injectRecordScript(crossOriginIframe);
624+
625+
await waitForRAF(ctx.page);
626+
const snapshots = (await ctx.page.evaluate(
627+
'window.snapshots',
628+
)) as eventWithTime[];
629+
assertSnapshot(snapshots);
630+
});
607631
});

0 commit comments

Comments
 (0)