fix: Ensure original headers are included with extra target requests (#28671)

* fix: extra target request headers are overwritten

Include original headers with the special "X-Cypress-Is-From-Extra-Target" that is added so fetch requests can include custom headers.

* Add details to changelog

* refactor

---------

Co-authored-by: Chris Breiding <chrisbreiding@gmail.com>
Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com>

cli/CHANGELOG.md

@@ -14,6 +14,7 @@ _Released 1/16/2024 (PENDING)_
 - Fixed an issue where some cross-origin logs, like assertions or cy.clock(), were getting too many dom snapshots. Fixes [#28609](https://github.com/cypress-io/cypress/issues/28609).
 - Fixed asset capture for Test Replay for requests that are routed through service workers. This addresses an issue where styles were not being applied properly in Test Replay and `cy.intercept` was not working properly for requests in this scenario. Fixes [#28516](https://github.com/cypress-io/cypress/issues/28516).
 - Fixed an issue where visiting an `http://` site would result in an infinite reload/redirect loop in Chrome 114+. Fixes [#25891](https://github.com/cypress-io/cypress/issues/25891).
+- Fixed an issue where requests made from extra tabs do not include their original headers. Fixes [#28641](https://github.com/cypress-io/cypress/issues/28641).
 
 **Performance:**
 

packages/server/lib/browsers/browser-cri-client.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import Bluebird from 'bluebird'
 import CRI from 'chrome-remote-interface'
 import Debug from 'debug'
@@ -376,9 +377,15 @@ export class BrowserCriClient {
     // we mark extra targets with this header, so that the proxy can recognize
     // where they came from and run only the minimal middleware necessary
     extraTargetCriClient.on('Fetch.requestPaused', async (params: Protocol.Fetch.RequestPausedEvent) => {
+      // headers are received as an object but need to be an array to modify them
+      const headers = _.map(params.request.headers, (value, name) => ({ name, value }))
+
       const details: Protocol.Fetch.ContinueRequestRequest = {
         requestId: params.requestId,
-        headers: [{ name: 'X-Cypress-Is-From-Extra-Target', value: 'true' }],
+        headers: [
+          ...headers,
+          { name: 'X-Cypress-Is-From-Extra-Target', value: 'true' },
+        ],
       }
 
       extraTargetCriClient.send('Fetch.continueRequest', details).catch((err) => {

packages/server/test/unit/browsers/browser-cri-client_spec.ts

@@ -287,11 +287,17 @@ describe('lib/browsers/cri-client', function () {
       criClient.send.withArgs('Fetch.continueRequest').resolves()
 
       await BrowserCriClient._onAttachToTarget(options as any)
-      await criClient.on.lastCall.args[1]({ requestId: 'request-id' })
+      await criClient.on.lastCall.args[1]({
+        requestId: 'request-id',
+        request: { headers: { 'X-Another-Custom-Header': 'value' } },
+      })
 
       expect(criClient.send).to.be.calledWith('Fetch.continueRequest', {
         requestId: 'request-id',
-        headers: [{ name: 'X-Cypress-Is-From-Extra-Target', value: 'true' }],
+        headers: [
+          { name: 'X-Another-Custom-Header', value: 'value' },
+          { name: 'X-Cypress-Is-From-Extra-Target', value: 'true' },
+        ],
       })
     })