🐛 Pass auth headers when requesting assets directly (#977)

In #921 we realized font responses were being corrupted through the browsers request interception API. To get around that, we now request and save fonts straight from node as a binary (no encoding). In that PR, I forgot to pass the auth config to the request that's being made, which will prevent sites behind auth from capturing fonts properly. This PR adds the request headers the browser has to the node request we made to capture the fonts directly. Also adds a debug log when we are requesting these fonts directly. Closes #969
percy · Jun 30, 2022 · 8fc2cac · 8fc2cac
1 parent 813db57
commit 8fc2cac
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
@@ -86,7 +86,8 @@ export function createRequestFinishedHandler(network, {
 
         if (mimeType?.includes('font')) {
           // font responses from the browser may not be properly encoded, so request them directly
-          body = await makeRequest(response.url, { buffer: true });
+          log.debug('- Requesting asset directly');
+          body = await makeRequest(response.url, { buffer: true, headers: request.headers });
         }
 
         resource = createResource(url, body, mimeType, {

diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
@@ -871,6 +871,58 @@ describe('Discovery', () => {
       ]));
     });
 
+    it('captures fonts with valid auth credentials', async () => {
+      percy.loglevel('debug');
+
+      const fontAuthDOM = dedent`
+        <html>
+        <head>
+          <style>
+           @font-face { font-family: "test"; src: url("font-auth/font.woff") format("woff"); }
+           body { font-family: "test", "sans-serif"; }
+          </style>
+        </head>
+        <body>
+          <p>Hello Percy!<p>
+          ${' '.repeat(1000)}
+        </body>
+        </html>
+      `;
+
+      server.reply('/font-auth/font.woff', ({ headers: { authorization } }) => {
+        if (authorization === 'Basic dGVzdDo=') {
+          return [200, 'font/woff', '<font>'];
+        } else {
+          return [401, {
+            'WWW-Authenticate': 'Basic',
+            'Content-Type': 'text/plain'
+          }, '401 Unauthorized'];
+        }
+      });
+
+      await percy.snapshot({
+        name: 'font auth snapshot',
+        url: 'http://localhost:8000/font-auth',
+        domSnapshot: fontAuthDOM,
+        discovery: {
+          requestHeaders: { Authorization: 'Basic dGVzdDo=' }
+        }
+      });
+
+      await percy.idle();
+
+      expect(logger.stderr).toContain(
+        '[percy:core:discovery] - Requesting asset directly'
+      );
+      expect(captured[0]).toEqual(jasmine.arrayContaining([
+        jasmine.objectContaining({
+          attributes: jasmine.objectContaining({
+            'resource-url': 'http://localhost:8000/font-auth/font.woff'
+          })
+        })
+      ]));
+    });
+
     it('does not capture without auth credentials', async () => {
       await percy.snapshot({
         name: 'auth snapshot',