From d2df9bb673a13e5c78969b566c1d3b6161609fff Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 23 May 2024 09:57:33 +0100
Subject: [PATCH] Don't rely on a 3rd party url (or internet access) in the new
 cross-origin test

---
 .../__snapshots__/integration.test.ts.snap    |   1 -
 .../rrweb-snapshot/test/html/picture.html     |   1 -
 .../test/images/rrweb-favicon-20x20.png       | Bin 0 -> 487 bytes
 .../rrweb-snapshot/test/integration.test.ts   |  41 ++++++++++++++++--
 packages/rrweb-snapshot/test/utils.ts         |  10 +++++
 5 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 packages/rrweb-snapshot/test/images/rrweb-favicon-20x20.png

diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index 1abf3f40fa..e95a718645 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -343,7 +343,6 @@ exports[`integration tests [html file]: picture.html 1`] = `
       <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
     </picture>
     <img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" />
-    <img src=\\"https://avatars.githubusercontent.com/u/43396833?s=20&amp;v=4\\" alt=\\"CORS restricted but has access-control-allow-origin: *\\" />
   </body></html>"
 `;
 
diff --git a/packages/rrweb-snapshot/test/html/picture.html b/packages/rrweb-snapshot/test/html/picture.html
index 3d59df428b..2401ca0c61 100644
--- a/packages/rrweb-snapshot/test/html/picture.html
+++ b/packages/rrweb-snapshot/test/html/picture.html
@@ -6,6 +6,5 @@
       <img src="assets/img/characters/robot.png" />
     </picture>
     <img src="/images/robot.png" alt="This is a robot" />
-    <img src="https://avatars.githubusercontent.com/u/43396833?s=20&v=4" alt="CORS restricted but has access-control-allow-origin: *" />
   </body>
 </html>
diff --git a/packages/rrweb-snapshot/test/images/rrweb-favicon-20x20.png b/packages/rrweb-snapshot/test/images/rrweb-favicon-20x20.png
new file mode 100644
index 0000000000000000000000000000000000000000..561f9060d74151fc13e569295262908a9814c3ca
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00055Nkl<Zc$}<M
zzpH^^6n?(%yZJGYl*wXXP$rx54;W=KSu6~cB1SP7K4q}UAMh<AtHE^_CI(3{DW#Ms
zgN66@zV}kM`+D=;`<;60bl%R>dCqgrkpYYV5QE;k^z9gCZ=z3GmZ2yL^KZ8suGj1T
z0JGUFg25p3B}szGWWwcgL9JH9VzJ=na4CmEA%w%>AF=cKjLBqz&1QpEtA#?LfYoaC
zT7|J#41>V{`~ChAv)OEj$KyC04#;FOD3wY`r_<ajf2pOaDsj8rTqQf54v{2@Xqv|T
zmqk6~+39qG*=z<O{Nd0AXt7w}bUMFiJpmM|Onceu^-!r)V7J@h@pw=!myyfmplO<Z
zK(E(}Xf%puv&m-C;cy_COyYPvqTB60&3h_}q9~-_?-Q5HMaJVXiw6P$;ra=CNGay?
zdDQE5q*5tZtyawEb5V*|lxnq#<#LJHYzCjthuv<6NF?%iK)P<!8jS`U>UO)$D!nVM
z8}M%QFi`4=L;}TP5vr={1Ke)6><Fya>qm_G!{LyrJ)KVB_xt&*jJ}7uSML?T4+HT=
dp8)^>|Nnex$5i}|dhh@M002ovPDHLkV1i4G?<N2M

literal 0
HcmV?d00001

diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
index cd6cdbdcdb..05f61787b0 100644
--- a/packages/rrweb-snapshot/test/integration.test.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -6,7 +6,7 @@ import * as puppeteer from 'puppeteer';
 import * as rollup from 'rollup';
 import * as typescript from 'rollup-plugin-typescript2';
 import * as assert from 'assert';
-import { waitForRAF } from './utils';
+import { waitForRAF, getServerURL } from './utils';
 import { setTimeout } from 'node:timers/promises';
 
 const _typescript = typescript as unknown as () => rollup.Plugin;
@@ -210,7 +210,7 @@ iframe.contentDocument.querySelector('center').clientHeight
         inlineImages: true,
         inlineStylesheet: false
     })`);
-    await waitForRAF(page); // need a small wait, as after the crossOrigin="anonymous" change, the snapshot triggers a reload of the image (which mutates the snapshot when loaded)
+    // don't wait, as we want to ensure that the same-origin image can be inlined immediately
     const bodyChildren = (await page.evaluate(`
       snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
 `)) as any[];
@@ -224,11 +224,44 @@ iframe.contentDocument.querySelector('center').clientHeight
         },
       }),
     );
-    expect(bodyChildren[2]).toEqual(
+  });
+
+  it('correctly saves cross-origin images offline', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+
+    await page.goto('about:blank', {
+      waitUntil: 'load',
+    });
+    await page.setContent(
+      `
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <img src="${getServerURL(
+      server,
+    )}/images/rrweb-favicon-20x20.png" alt="CORS restricted but has access-control-allow-origin: *" />
+  </body>
+</html>
+`,
+      {
+        waitUntil: 'load',
+      },
+    );
+
+    await page.waitForSelector('img', { timeout: 1000 });
+    await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
+        dataURLOptions: { type: "image/webp", quality: 0.8 },
+        inlineImages: true,
+        inlineStylesheet: false
+    })`);
+    await waitForRAF(page); // need a small wait, as after the crossOrigin="anonymous" change, the snapshot triggers a reload of the image (after which, the snapshot is mutated)
+    const bodyChildren = (await page.evaluate(`
+      snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
+`)) as any[];
+    expect(bodyChildren[0]).toEqual(
       expect.objectContaining({
         tagName: 'img',
         attributes: {
-          src: 'https://avatars.githubusercontent.com/u/43396833?s=20&v=4',
+          src: getServerURL(server) + '/images/rrweb-favicon-20x20.png',
           alt: 'CORS restricted but has access-control-allow-origin: *',
           rr_dataURL: expect.stringMatching(/^data:image\/webp;base64,/),
         },
diff --git a/packages/rrweb-snapshot/test/utils.ts b/packages/rrweb-snapshot/test/utils.ts
index 43d4484bb4..631f8640a6 100644
--- a/packages/rrweb-snapshot/test/utils.ts
+++ b/packages/rrweb-snapshot/test/utils.ts
@@ -1,4 +1,5 @@
 import * as puppeteer from 'puppeteer';
+import * as http from 'http';
 
 export async function waitForRAF(page: puppeteer.Page) {
   return await page.evaluate(() => {
@@ -9,3 +10,12 @@ export async function waitForRAF(page: puppeteer.Page) {
     });
   });
 }
+
+export function getServerURL(server: http.Server): string {
+  const address = server.address();
+  if (address && typeof address !== 'string') {
+    return `http://localhost:${address.port}`;
+  } else {
+    return `${address}`;
+  }
+}