🐛 Pass authorization config to asset discovery direct requests (#986)

* 🐛 Pass authorization config to asset discovery direct requests * ♻️ Remove unneeded extra arguement to `createrequestFinishedHandler`
percy · Jul 12, 2022 · a273190 · a273190
1 parent abf4219
commit a273190
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 3 deletions.
diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
@@ -60,6 +60,7 @@ export function createRequestFinishedHandler(network, {
 
       // process and cache the response and resource
       if (!resource?.root && (!resource || disableCache)) {
+        let headers = request.headers;
         let response = request.response;
         let capture = response && hostnameMatches(allowedHostnames, url);
         let body = capture && await response.buffer();
@@ -84,10 +85,20 @@ export function createRequestFinishedHandler(network, {
         // Try to get the proper mimetype if the server or asset discovery browser is sending `text/plain`
         let mimeType = (response.mimeType === 'text/plain' && mime.lookup(response.url)) || response.mimeType;
 
+        // font responses from the browser may not be properly encoded, so request them directly
         if (mimeType?.includes('font')) {
-          // font responses from the browser may not be properly encoded, so request them directly
           log.debug('- Requesting asset directly');
-          body = await makeRequest(response.url, { buffer: true, headers: request.headers });
+
+          if (!headers.Authorization && network.authorization?.username) {
+            let token = Buffer.from([
+              network.authorization.username,
+              network.authorization.password || ''
+            ].join(':')).toString('base64');
+
+            headers.Authorization = `Basic ${token}`;
+          }
+
+          body = await makeRequest(response.url, { buffer: true, headers });
         }
 
         resource = createResource(url, body, mimeType, {

diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
@@ -871,7 +871,7 @@ describe('Discovery', () => {
       ]));
     });
 
-    it('captures fonts with valid auth credentials', async () => {
+    it('captures fonts with valid basic auth header credentials', async () => {
       percy.loglevel('debug');
 
       const fontAuthDOM = dedent`
@@ -923,6 +923,110 @@ describe('Discovery', () => {
       ]));
     });
 
+    it('captures fonts with valid username basic auth', 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: {
+          authorization: { username: 'test' }
+        }
+      });
+
+      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('captures fonts with valid username & password basic auth', 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 dGVzdDp0ZXN0ZXJzb24=') {
+          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: {
+          authorization: { username: 'test', password: 'testerson' }
+        }
+      });
+
+      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',