fix(tracing): rewrite blob urls so that we can intercept them (#8423)

src/server/snapshot/snapshotServer.ts

@@ -62,6 +62,7 @@ export class SnapshotServer {
 
   private _serveServiceWorker(request: http.IncomingMessage, response: http.ServerResponse): boolean {
     function serviceWorkerMain(self: any /* ServiceWorkerGlobalScope */) {
+      const kBlobUrlPrefix = 'http://playwright.bloburl/#';
       const snapshotIds = new Map<string, { frameId: string, index: number }>();
 
       self.addEventListener('install', function(event: any) {
@@ -105,7 +106,7 @@ export class SnapshotServer {
         }
 
         const { frameId, index } = snapshotIds.get(snapshotUrl)!;
-        const url = removeHash(request.url);
+        const url = request.url.startsWith(kBlobUrlPrefix) ? request.url.substring(kBlobUrlPrefix.length) : removeHash(request.url);
         const complexUrl = btoa(JSON.stringify({ frameId, index, url }));
         const fetchUrl = `/resources/${complexUrl}`;
         const fetchedResponse = await fetch(fetchUrl);

src/server/snapshot/snapshotterInjected.ts

@@ -41,6 +41,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
   const kScrollTopAttribute = '__playwright_scroll_top_';
   const kScrollLeftAttribute = '__playwright_scroll_left_';
   const kStyleSheetAttribute = '__playwright_style_sheet_';
+  const kBlobUrlPrefix = 'http://playwright.bloburl/#';
 
   // Symbols for our own info on Nodes/StyleSheets.
   const kSnapshotFrameId = Symbol('__playwright_snapshot_frameid_');
@@ -184,6 +185,9 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
     private _sanitizeUrl(url: string): string {
       if (url.startsWith('javascript:'))
         return '';
+      // Rewrite blob urls so that Service Worker can intercept them.
+      if (url.startsWith('blob:'))
+        return kBlobUrlPrefix + url;
       return url;
     }
 

tests/snapshotter.spec.ts

@@ -300,6 +300,27 @@ it.describe('snapshots', () => {
     const padding = await frame.$eval('body', body => window.getComputedStyle(body).paddingLeft);
     expect(padding).toBe('42px');
   });
+
+  it('should handle src=blob', async ({ page, server, showSnapshot, toImpl, snapshotter, browserName }) => {
+    it.skip(browserName === 'firefox');
+
+    await page.goto(server.EMPTY_PAGE);
+    await page.evaluate(async () => {
+      const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAQAAADIvofAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfhBhAPKSstM+EuAAAAvUlEQVQY05WQIW4CYRgF599gEZgeoAKBWIfCNSmVvQMe3wv0ChhIViKwtTQEAYJwhgpISBA0JSxNIdlB7LIGTJ/8kpeZ7wW5TcT9o/QNBtvOrrWMrtg0sSGOFeELbHlCDsQ+ukeYiHNFJPHBDRKlQKVEbFkLUT3AiAxI6VGCXsWXAoQLBUl5E7HjUFwiyI4zf/wWoB3CFnxX5IeGdY8IGU/iwE9jcZrLy4pnEat+FL4hf/cbqREKo/Cf6W5zASVMeh234UtGAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA2LTE2VDE1OjQxOjQzLTA3OjAwd1xNIQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNi0xNlQxNTo0MTo0My0wNzowMAYB9Z0AAAAASUVORK5CYII=';
+      const blob = await fetch(dataUrl).then(res => res.blob());
+      const url = window.URL.createObjectURL(blob);
+      const img = document.createElement('img');
+      img.src = url;
+      const loaded = new Promise(f => img.onload = f);
+      document.body.appendChild(img);
+      await loaded;
+    });
+
+    const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot');
+    const frame = await showSnapshot(snapshot);
+    const img = await frame.waitForSelector('img');
+    expect(await img.screenshot()).toMatchSnapshot('blob-src.png');
+  });
 });
 
 function distillSnapshot(snapshot) {