fix: Improve document.cookie patch

packages/app/src/runner/event-manager.ts

@@ -41,7 +41,7 @@ const driverToSocketEvents = 'backend:request automation:request mocha recorder:
 const driverTestEvents = 'test:before:run:async test:after:run'.split(' ')
 const driverToLocalEvents = 'viewport:changed config stop url:changed page:loading visit:failed visit:blank cypress:in:cypress:runner:event'.split(' ')
 const socketRerunEvents = 'runner:restart watched:file:changed'.split(' ')
-const socketToDriverEvents = 'net:stubbing:event request:event script:error cross:origin:automation:cookies'.split(' ')
+const socketToDriverEvents = 'net:stubbing:event request:event script:error cross:origin:cookies'.split(' ')
 const localToReporterEvents = 'reporter:log:add reporter:log:state:changed reporter:log:remove'.split(' ')
 
 /**

packages/driver/cypress/e2e/e2e/origin/cookie_login.cy.ts

@@ -450,12 +450,13 @@ describe('cy.origin - cookie login', () => {
         const expires = (new Date()).toUTCString()
 
         cy.get('[data-cy="username"]').type(username)
-        cy.get('[data-cy="localhostCookieProps"]').type(`Expires=${expires}`)
+        cy.get('[data-cy="cookieProps"]').type(`Expires=${expires}`)
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', () => {
-        cy.clearCookie('user')
+      cy.origin('http://idp.com:3501', () => {
+        cy.wait(1000) // give cookie time to expire
+        cy.reload()
         cy.document().its('cookie').should('not.include', 'user=')
       })
     })
@@ -499,15 +500,18 @@ describe('cy.origin - cookie login', () => {
       cy.getCookie('user').should('be.null')
     })
 
-    it('past max-age -> not accessible via document.cookie', () => {
+    // expiring cookies set by automation don't seem to get unset appropriately
+    // in Firefox. this issue doesn't seem to be specific to cross-origin tests,
+    // as it happens even using cy.setCookie()
+    it('past max-age -> not accessible via document.cookie', { browser: '!firefox' }, () => {
       cy.get('[data-cy="cookie-login-land-on-idp"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         cy.get('[data-cy="username"]').type(username)
-        cy.get('[data-cy="localhostCookieProps"]').type('Max-Age=1')
+        cy.get('[data-cy="cookieProps"]').type('Max-Age=1')
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', () => {
+      cy.origin('http://idp.com:3501', () => {
         cy.wait(1000) // give cookie time to expire
         cy.reload()
         cy.document().its('cookie').should('not.include', 'user=')
@@ -661,14 +665,15 @@ describe('cy.origin - cookie login', () => {
     })
 
     it('gets cookie set by http request', () => {
-      cy.get('[data-cy="cookie-login-land-on-idp"]').click()
+      cy.get('[data-cy="cookie-login-land-on-document-cookie"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         cy.get('[data-cy="username"]').type(username)
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', { args: { username } }, ({ username }) => {
-        cy.document().its('cookie').should('include', `user=${username}`)
+      cy.origin('http://idp.com:3501', { args: { username } }, ({ username }) => {
+        cy.get('[data-cy="document-cookie"]').invoke('text')
+        .should('include', `user=${username}`)
       })
     })
 
@@ -738,7 +743,7 @@ describe('cy.origin - cookie login', () => {
           doc.cookie = 'key2=value2'
         })
 
-        cy.document().its('cookie').should('equal', 'key2=value2; key1=value1')
+        cy.document().its('cookie').should('equal', 'key1=value1; key2=value2')
       })
     })
 
@@ -753,14 +758,27 @@ describe('cy.origin - cookie login', () => {
       })
     })
 
+    it('returns cookie set by cy.setCookie()', () => {
+      cy.get('[data-cy="cookie-login-land-on-idp"]').click()
+      cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
+        cy.get('[data-cy="username"]').type(username)
+        cy.get('[data-cy="login"]').click()
+      })
+
+      cy.origin('http://idp.com:3501', () => {
+        cy.setCookie('foo', 'bar')
+        cy.document().its('cookie').should('include', 'foo=bar')
+      })
+    })
+
     it('no longer returns cookie after cy.clearCookie()', () => {
       cy.get('[data-cy="cookie-login-land-on-idp"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         cy.get('[data-cy="username"]').type(username)
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', () => {
+      cy.origin('http://idp.com:3501', () => {
         cy.clearCookie('user')
         cy.document().its('cookie').should('equal', '')
       })
@@ -773,7 +791,7 @@ describe('cy.origin - cookie login', () => {
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', () => {
+      cy.origin('http://idp.com:3501', () => {
         cy.clearCookies()
         cy.document().its('cookie').should('equal', '')
       })
@@ -786,7 +804,7 @@ describe('cy.origin - cookie login', () => {
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.origin('http://idp.com:3500', { args: { username } }, ({ username }) => {
+      cy.origin('http://idp.com:3501', { args: { username } }, ({ username }) => {
         cy.document().then((doc) => {
           doc.cookie = 'key=value'
         })

packages/driver/cypress/fixtures/document-cookie.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>document.cookie</title>
+</head>
+<body>
+  <p>
+    <strong>document.cookie:</strong>
+    <span data-cy="document-cookie"></span>
+  </p>
+  <script>
+    document.querySelector('[data-cy="document-cookie"]').textContent = document.cookie;
+  </script>
+</body>
+</html>

packages/driver/cypress/fixtures/primary-origin.html

@@ -15,14 +15,15 @@
     <li><a data-cy="screenshots-link" href="http://www.foobar.com:3500/fixtures/screenshots.html">http://www.foobar.com:3500/fixtures/screenshots.html</a></li>
     <li><a data-cy="xhr-fetch-requests" href="http://www.foobar.com:3500/fixtures/xhr-fetch-onload.html">http://www.foobar.com:3500/fixtures/xhr-fetch-onload.html</a></li>
     <li><a data-cy="integrity-link" href="http://www.foobar.com:3500/fixtures/scripts-with-integrity.html">http://www.foobar.com:3500/fixtures/scripts-with-integrity.html</a></li>
+    <li><a data-cy="cookie-http" href="http://www.foobar.com:3500/fixtures/secondary-origin.html">Visit foobar.com over http</a></li>
+    <li><a data-cy="cookie-https" href="https://www.foobar.com:3502/fixtures/secondary-origin.html">Visit foobar.com over https</a></li>
     <li><a data-cy="cookie-login">Login with Social</a></li>
     <li><a data-cy="cookie-login-https">Login with Social (https)</a></li>
     <li><a data-cy="cookie-login-subdomain">Login with Social (subdomain)</a></li>
     <li><a data-cy="cookie-login-alias">Login with Social (aliased localhost)</a></li>
     <li><a data-cy="cookie-login-override">Login with Social (cookie override)</a></li>
     <li><a data-cy="cookie-login-land-on-idp">Login with Social (lands on idp)</a></li>
-    <li><a data-cy="cookie-http" href="http://www.foobar.com:3500/fixtures/secondary-origin.html">Visit foobar.com over http</a></li>
-    <li><a data-cy="cookie-https" href="https://www.foobar.com:3502/fixtures/secondary-origin.html">Visit foobar.com over https</a></li>
+    <li><a data-cy="cookie-login-land-on-document-cookie">Login with Social (lands on document.cookie)</a></li>
   </ul>
   <script>
     function setHref (dataCy, redirect2, primaryQueryAddition = '') {
@@ -43,7 +44,8 @@
     setHref('cookie-login-subdomain', 'http://localhost:3500/login&subdomain=true')
     setHref('cookie-login-alias', 'http://localhost:3500/login&alias=true')
     setHref('cookie-login-override', 'https://localhost:3502/login', '&override=true')
-    setHref('cookie-login-land-on-idp', 'http://www.idp.com:3500/welcome')
+    setHref('cookie-login-land-on-idp', 'http://www.idp.com:3501/welcome')
+    setHref('cookie-login-land-on-document-cookie', 'http://www.idp.com:3501/fixtures/document-cookie.html')
   </script>
 </body>
 </html>

packages/driver/src/cross-origin/communicator.ts

@@ -107,6 +107,10 @@ export class PrimaryOriginCommunicator extends EventEmitter {
       data: preprocessedData,
     }, '*')
   }
+
+  isConnectedToSpecBridge (originPolicy: string) {
+    return !!this.crossOriginDriverWindows[originPolicy]
+  }
 }
 
 /**

packages/driver/src/cross-origin/cypress.ts

@@ -20,7 +20,7 @@ import { handleScreenshots } from './events/screenshots'
 import { handleTestEvents } from './events/test'
 import { handleMiscEvents } from './events/misc'
 import { handleUnsupportedAPIs } from './unsupported_apis'
-import { patchDocumentCookie } from './patches/cookies'
+import { handleDocumentCookie } from './patches/cookies'
 import { patchFormElementSubmit } from './patches/submit'
 import { patchElementIntegrity } from './patches/setAttribute'
 import $Mocha from '../cypress/mocha'
@@ -110,6 +110,7 @@ const setup = (cypressConfig: Cypress.Config, env: Cypress.ObjectLike) => {
   handleScreenshots(Cypress)
   handleTestEvents(Cypress)
   handleUnsupportedAPIs(Cypress, cy)
+  handleDocumentCookie(Cypress)
 
   cy.onBeforeAppWindowLoad = onBeforeAppWindowLoad(Cypress, cy)
 }
@@ -126,8 +127,6 @@ const onBeforeAppWindowLoad = (Cypress: Cypress.Cypress, cy: $Cy) => (autWindow:
     patchElementIntegrity(autWindow)
   }
 
-  patchDocumentCookie(Cypress, autWindow)
-
   // This is typically called by the cy function `urlNavigationEvent` but it is private. For the primary origin this is called in 'onBeforeAppWindowLoad'.
   Cypress.action('app:navigation:changed', 'page navigation event (\'before:load\')')
 

packages/driver/src/cross-origin/patches/cookies.js

@@ -1,3 +1,46 @@
+const parseCookieString = (cookieString) => {
+  if (!cookieString || !cookieString.trim().length) return []
+
+  return cookieString.split(';').map((cookieString) => {
+    const [name, value] = cookieString.split('=')
+
+    return {
+      name: name.trim(),
+      value: value.trim(),
+    }
+  })
+}
+
+const stringifyCookies = (cookies) => {
+  return cookies
+  .map((cookie) => `${cookie.name}=${cookie.value}`)
+  .join('; ')
+}
+
+const mergeCookies = (documentCookieValue, newCookies = []) => {
+  const existingCookies = parseCookieString(documentCookieValue)
+  const newCookieNameIndex = newCookies.reduce((nameIndex, cookie) => {
+    nameIndex[cookie.name] = cookie.value
+
+    return nameIndex
+  }, {})
+  const filteredExistingCookies = existingCookies.filter((cookie) => {
+    return !newCookieNameIndex[cookie.name]
+  })
+
+  return stringifyCookies(filteredExistingCookies.concat(newCookies))
+}
+
+const clearCookie = (documentCookieValue, name) => {
+  const cookies = parseCookieString(documentCookieValue)
+
+  const filteredCookies = cookies.filter((cookie) => {
+    return cookie.name !== name
+  })
+
+  return stringifyCookies(filteredCookies)
+}
+
 // document.cookie monkey-patching
 // -------------------------------
 // We monkey-patch document.cookie when in a cross-origin injection, because
@@ -13,43 +56,59 @@
 // - On an interval, get the browser's cookies for the given domain, so that
 //   updates to the cookie jar (via http requests, cy.setCookie, etc) are
 //   reflected in the document.cookie value.
-export const patchDocumentCookie = (Cypress, window) => {
-  const setAutomationCookie = (toughCookie) => {
-    const { superDomain } = Cypress.Location.create(window.location.href)
-    const automationCookie = Cypress.Cookies.toughCookieToAutomationCookie(toughCookie, superDomain)
+export const handleDocumentCookie = (Cypress) => {
+  // if cookies were sent before the spec bridge was created, they'll come
+  // through as state('crossOriginCookies'), so use them then reset them
+  const cookies = Cypress.state('crossOriginCookies')
+  let documentCookieValue = mergeCookies(document.cookie, cookies)
+
+  Cypress.state('crossOriginCookies', [])
 
-    Cypress.automation('set:cookie', automationCookie)
-    .catch(() => {
+  const patch = (window) => {
+    // Cookies added to the server-side cookie jar are optimistically
+    // added here so that if a cross-origin request sets cookies, they're
+    // available via document.cookie synchronously on page load
+    const setAutomationCookie = (toughCookie) => {
+      const { superDomain } = Cypress.Location.create(window.location.href)
+      const automationCookie = Cypress.Cookies.toughCookieToAutomationCookie(toughCookie, superDomain)
+
+      Cypress.automation('set:cookie', automationCookie)
+      .catch(() => {
       // unlikely there will be errors, but ignore them in any case, since
       // they're not user-actionable
-    })
-  }
+      })
+    }
 
-  let documentCookieValue = ''
+    Object.defineProperty(window.document, 'cookie', {
+      get () {
+        return documentCookieValue
+      },
 
-  Object.defineProperty(window.document, 'cookie', {
-    get () {
-      return documentCookieValue
-    },
+      set (newValue) {
+        const cookie = Cypress.Cookies.parse(newValue)
 
-    set (newValue) {
-      const cookie = Cypress.Cookies.parse(newValue)
+        // If cookie is undefined, it was invalid and couldn't be parsed
+        if (!cookie) return documentCookieValue
 
-      // If cookie is undefined, it was invalid and couldn't be parsed
-      if (!cookie) return documentCookieValue
+        documentCookieValue = mergeCookies(documentCookieValue, [{
+          name: cookie.key,
+          value: cookie.value,
+        }])
 
-      const cookieString = `${cookie.key}=${cookie.value}`
+        setAutomationCookie(cookie)
 
-      // New cookies get prepended to existing cookies
-      documentCookieValue = documentCookieValue.length
-        ? `${cookieString}; ${documentCookieValue}`
-        : cookieString
+        return documentCookieValue
+      },
+    })
+  }
 
-      setAutomationCookie(cookie)
+  const updateCookies = (cookies) => {
+    documentCookieValue = mergeCookies(documentCookieValue, cookies)
+  }
 
-      return documentCookieValue
-    },
-  })
+  const reset = () => {
+    documentCookieValue = ''
+  }
 
   // The interval value is arbitrary; it shouldn't be too often, but needs to
   // be fairly frequent so that the local value is kept as up-to-date as
@@ -62,7 +121,7 @@ export const patchDocumentCookie = (Cypress, window) => {
 
     try {
       const cookies = await Cypress.automation('get:cookies', { domain })
-      const cookiesString = (cookies || []).map((c) => `${c.name}=${c.value}`).join('; ')
+      const cookiesString = stringifyCookies(cookies || [])
 
       documentCookieValue = cookiesString
     } catch (err) {
@@ -77,4 +136,30 @@ export const patchDocumentCookie = (Cypress, window) => {
   }
 
   window.addEventListener('unload', onUnload)
+
+  Cypress.on('window:before:load', patch)
+
+  Cypress.specBridgeCommunicator.on('cross:origin:cookies', (cookies) => {
+    updateCookies(cookies)
+
+    Cypress.state('crossOriginCookies', cookies)
+
+    Cypress.specBridgeCommunicator.toPrimary('cross:origin:cookies:received')
+  })
+
+  Cypress.on('test:before:run', () => {
+    reset()
+  })
+
+  Cypress.on('set:cookie', (cookie) => {
+    updateCookies([cookie])
+  })
+
+  Cypress.on('clear:cookie', (name) => {
+    documentCookieValue = clearCookie(documentCookieValue, name)
+  })
+
+  Cypress.on('clear:cookies', () => {
+    reset()
+  })
 }