From 1d50db809d82c010666d534016956fc581125beb Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Thu, 9 Dec 2021 17:10:31 -0800
Subject: [PATCH] fix(snapshot): render sandboxed iframes and svg iframes
 (#10835)

---
 .../trace/recorder/snapshotterInjected.ts     |  2 +-
 tests/trace-viewer/trace-viewer.spec.ts       | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
index 176b9a7e28..64c4972cfa 100644
--- a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
+++ b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
@@ -417,7 +417,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
               continue;
             if (nodeName === 'LINK' && name === 'integrity')
               continue;
-            if (nodeName === 'IFRAME' && name === 'src')
+            if (nodeName === 'IFRAME' && (name === 'src' || name === 'sandbox'))
               continue;
             let value = element.attributes[i].value;
             if (name === 'src' && (nodeName === 'IMG'))
diff --git a/tests/trace-viewer/trace-viewer.spec.ts b/tests/trace-viewer/trace-viewer.spec.ts
index f5e0a6ba1b..92eee191b8 100644
--- a/tests/trace-viewer/trace-viewer.spec.ts
+++ b/tests/trace-viewer/trace-viewer.spec.ts
@@ -288,10 +288,10 @@ test('should show snapshot URL', async ({ page, runAndTrace, server }) => {
   await expect(traceViewer.page.locator('.snapshot-url')).toHaveText(server.EMPTY_PAGE);
 });
 
-test('should capture iframe', async ({ page, server, runAndTrace }) => {
+test('should capture iframe with sandbox attribute', async ({ page, server, runAndTrace }) => {
   await page.route('**/empty.html', route => {
     route.fulfill({
-      body: '<iframe src="iframe.html"></iframe>',
+      body: '<iframe src="iframe.html" sandBOX="allow-scripts"></iframe>',
       contentType: 'text/html'
     }).catch(() => {});
   });
@@ -317,6 +317,30 @@ test('should capture iframe', async ({ page, server, runAndTrace }) => {
   expect(await button.textContent()).toBe('Hello iframe');
 });
 
+test('should capture data-url svg iframe', async ({ page, server, runAndTrace }) => {
+  await page.route('**/empty.html', route => {
+    route.fulfill({
+      body: `<iframe src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3e%3cpath d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3e%3c/svg%3e"></iframe>`,
+      contentType: 'text/html'
+    }).catch(() => {});
+  });
+
+  const traceViewer = await runAndTrace(async () => {
+    await page.goto(server.EMPTY_PAGE);
+    if (page.frames().length < 2)
+      await page.waitForEvent('frameattached');
+    await page.frames()[1].waitForSelector('svg');
+    // Force snapshot.
+    await page.evaluate('2+2');
+  });
+
+  // Render snapshot, check expectations.
+  const snapshotFrame = await traceViewer.snapshotFrame('page.evaluate', 0, true);
+  await expect(snapshotFrame.childFrames()[0].locator('svg')).toBeVisible();
+  const content = await snapshotFrame.childFrames()[0].content();
+  expect(content).toContain(`d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"`);
+});
+
 test('should contain adopted style sheets', async ({ page, runAndTrace, browserName }) => {
   test.skip(browserName !== 'chromium', 'Constructed stylesheets are only in Chromium.');