fix: Make cross-origin document.cookie work (#22594)

packages/driver/cypress/e2e/e2e/origin/commands/aliasing.cy.ts

@@ -17,14 +17,14 @@ context('cy.origin aliasing', () => {
 
     it('fails for dom elements outside origin', (done) => {
       cy.on('fail', (err) => {
-        expect(err.message).to.equal('`cy.get()` could not find a registered alias for: `@welcome_button`.\nYou have not aliased anything yet.')
+        expect(err.message).to.equal('`cy.get()` could not find a registered alias for: `@link`.\nYou have not aliased anything yet.')
         done()
       })
 
-      cy.get('[data-cy="welcome"]').as('welcome_button')
+      cy.get('[data-cy="cross-origin-secondary-link"]').as('link')
 
       cy.origin('http://foobar.com:3500', () => {
-        cy.get('@welcome_button').click()
+        cy.get('@link').click()
       })
     })
   })

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

@@ -34,6 +34,11 @@ describe('cy.origin - cookie login', () => {
     cy.get('h1').invoke('text').should('equal', 'No user found')
   }
 
+  beforeEach(() => {
+    // makes it nice and readable even on a small screen with devtools open :)
+    cy.viewport(300, 400)
+  })
+
   /****************************************************************************
     Cookie Login Flow
     - localhost/fixtures/primary-origin.html:
@@ -107,17 +112,6 @@ describe('cy.origin - cookie login', () => {
       verifyLoggedIn(username)
     })
 
-    it('makes cross-origin cookies readable via document.cookie', () => {
-      cy.visit('/fixtures/primary-origin.html')
-      cy.get('[data-cy="cookie-login"]').click()
-      cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
-        cy.get('[data-cy="username"]').type(username)
-        cy.get('[data-cy="login"]').click()
-      })
-
-      cy.document().its('cookie').should('include', `user=${username}`)
-    })
-
     it('handles browser-sent cookies being overridden by server-kept cookies', () => {
       cy.visit('https://localhost:3502/fixtures/primary-origin.html')
       cy.get('[data-cy="cookie-login-override"]').click()
@@ -421,10 +415,10 @@ describe('cy.origin - cookie login', () => {
       username = getUsername()
 
       cy.visit('/fixtures/primary-origin.html')
-      cy.get('[data-cy="cookie-login"]').click()
     })
 
     it('expired -> not logged in', () => {
+      cy.get('[data-cy="cookie-login"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         const expires = (new Date()).toUTCString()
 
@@ -437,6 +431,7 @@ describe('cy.origin - cookie login', () => {
     })
 
     it('expired -> not accessible via cy.getCookie()', () => {
+      cy.get('[data-cy="cookie-login"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         const expires = (new Date()).toUTCString()
 
@@ -449,6 +444,7 @@ describe('cy.origin - cookie login', () => {
     })
 
     it('expired -> not accessible via document.cookie', () => {
+      cy.get('[data-cy="cookie-login-land-on-idp"]').click()
       cy.origin('http://foobar.com:3500', { args: { username } }, ({ username }) => {
         const expires = (new Date()).toUTCString()
 
@@ -457,7 +453,10 @@ describe('cy.origin - cookie login', () => {
         cy.get('[data-cy="login"]').click()
       })
 
-      cy.document().its('cookie').should('not.include', 'user=')
+      cy.origin('http://idp.com:3500', () => {
+        cy.clearCookie('user')
+        cy.document().its('cookie').should('not.include', 'user=')
+      })
     })
   })
 
@@ -468,10 +467,10 @@ describe('cy.origin - cookie login', () => {
       username = getUsername()
 
       cy.visit('/fixtures/primary-origin.html')
-      cy.get('[data-cy="cookie-login"]').click()
     })
 
     it('past max-age -> not logged in', () => {
+      cy.get('[data-cy="cookie-login"]').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')
@@ -487,6 +486,7 @@ describe('cy.origin - cookie login', () => {
     // 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 cy.getCookie()', { browser: '!firefox' }, () => {
+      cy.get('[data-cy="cookie-login"]').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')
@@ -499,18 +499,25 @@ describe('cy.origin - cookie login', () => {
     })
 
     it('past max-age -> not accessible via document.cookie', () => {
+      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="login"]').click()
       })
 
-      cy.wait(1000) // give cookie time to expire
-      cy.reload()
-      cy.document().its('cookie').should('not.include', 'user=')
+      cy.origin('http://idp.com:3500', () => {
+        cy.wait(1000) // give cookie time to expire
+        cy.reload()
+        cy.document().its('cookie').should('not.include', 'user=')
+      })
     })
 
     describe('preference over Expires', () => {
+      beforeEach(() => {
+        cy.get('[data-cy="cookie-login"]').click()
+      })
+
       it('past Max-Age, before Expires -> not logged in', () => {
         const expires = dayjs().add(1, 'day').toDate().toUTCString()
 
@@ -642,4 +649,152 @@ describe('cy.origin - cookie login', () => {
       verifyIdpNotLoggedIn({ isHttps: true, cookieKey: '__Secure-user' })
     })
   })
+
+  describe('document.cookie', () => {
+    let username
+
+    beforeEach(() => {
+      username = getUsername()
+
+      cy.visit('/fixtures/primary-origin.html')
+    })
+
+    it('gets cookie set by http request', () => {
+      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', { args: { username } }, ({ username }) => {
+        cy.document().its('cookie').should('include', `user=${username}`)
+      })
+    })
+
+    it('works when setting cookie', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key=value'
+        })
+
+        cy.document().its('cookie').should('equal', 'key=value')
+      })
+    })
+
+    it('works when setting cookie with extra, benign parts', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key=value; wont=beset'
+        })
+
+        cy.document().its('cookie').should('equal', 'key=value')
+      })
+    })
+
+    it('cookie properties are preserved when set via automation', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key=value; SameSite=Strict; Path=/foo'
+        })
+
+        cy.getCookie('key').then((cookie) => {
+          expect(Cypress._.omit(cookie, 'expiry')).to.deep.equal({
+            domain: '.foobar.com',
+            httpOnly: false,
+            name: 'key',
+            path: '/foo',
+            sameSite: 'strict',
+            secure: false,
+            value: 'value',
+          })
+        })
+      })
+    })
+
+    it('does not set cookie when invalid', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = '=value'
+        })
+
+        cy.document().its('cookie').should('equal', '')
+      })
+    })
+
+    it('works when setting subsequent cookies', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key1=value1'
+        })
+
+        cy.document().its('cookie').should('equal', 'key1=value1')
+        cy.document().then((doc) => {
+          doc.cookie = 'key2=value2'
+        })
+
+        cy.document().its('cookie').should('equal', 'key2=value2; key1=value1')
+      })
+    })
+
+    it('makes cookie available to cy.getCookie()', () => {
+      cy.get('[data-cy="cross-origin-secondary-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key=value'
+        })
+
+        cy.getCookie('key').its('value').should('equal', 'value')
+      })
+    })
+
+    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.clearCookie('user')
+        cy.document().its('cookie').should('equal', '')
+      })
+    })
+
+    it('no longer returns cookie after cy.clearCookies()', () => {
+      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.clearCookies()
+        cy.document().its('cookie').should('equal', '')
+      })
+    })
+
+    it('works when setting cookie in addition to cookie that already exists from http request', () => {
+      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', { args: { username } }, ({ username }) => {
+        cy.document().then((doc) => {
+          doc.cookie = 'key=value'
+        })
+
+        // order of the cookies differs depending on browser, so just
+        // ensure that each one is there
+        cy.document().its('cookie').should('include', 'key=value')
+        cy.document().its('cookie').should('include', `user=${username}`)
+      })
+    })
+  })
 })

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

@@ -18,14 +18,28 @@
     <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="welcome" href="http://localhost:3500/welcome">Go to Welcome</a></li>
+    <li><a data-cy="cookie-login-land-on-idp">Login with Social (lands on idp)</a></li>
   </ul>
   <script>
-    document.querySelector('[data-cy=cookie-login]').href = `http://localhost:3500/prelogin?redirect=${encodeURIComponent('http://www.foobar.com:3500/fixtures/auth/cookie-login.html?redirect=http://localhost:3500/login')}`
-    document.querySelector('[data-cy=cookie-login-https]').href = `https://localhost:3502/prelogin?redirect=${encodeURIComponent('https://www.foobar.com:3502/fixtures/auth/cookie-login.html?redirect=https://localhost:3502/login')}`
-    document.querySelector('[data-cy=cookie-login-subdomain]').href = `http://localhost:3500/prelogin?redirect=${encodeURIComponent('http://www.foobar.com:3500/fixtures/auth/cookie-login.html?redirect=http://localhost:3500/login&subdomain=true')}`
-    document.querySelector('[data-cy=cookie-login-alias]').href = `http://localhost:3500/prelogin?redirect=${encodeURIComponent('http://www.foobar.com:3500/fixtures/auth/cookie-login.html?redirect=http://localhost:3500/login&alias=true')}`
-    document.querySelector('[data-cy=cookie-login-override]').href = `https://localhost:3502/prelogin?override=true&redirect=${encodeURIComponent('https://www.foobar.com:3502/fixtures/auth/cookie-login.html?redirect=https://localhost:3502/login')}`
+    function setHref (dataCy, redirect2, primaryQueryAddition = '') {
+      const isHttps = redirect2.startsWith('https')
+      const url = isHttps ? 'https://localhost:3502' : 'http://localhost:3500'
+      const redirect1Path = '/fixtures/auth/cookie-login.html'
+      const redirect = encodeURIComponent(isHttps
+        ? `https://www.foobar.com:3502${redirect1Path}?redirect=${redirect2}`
+        : `http://www.foobar.com:3500${redirect1Path}?redirect=${redirect2}`)
+
+      document.querySelector(`[data-cy="${dataCy}"]`).href = (
+        `${url}/prelogin?redirect=${redirect}${primaryQueryAddition}`
+      )
+    }
+
+    setHref('cookie-login', 'http://localhost:3500/login')
+    setHref('cookie-login-https', 'https://localhost:3502/login')
+    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')
   </script>
 </body>
 </html>

packages/driver/src/cypress/cookies.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import Cookies from 'js-cookie'
+import { CookieJar, toughCookieToAutomationCookie } from '@packages/server/lib/util/cookies'
 
 import $errUtils from './error_utils'
 
@@ -149,6 +150,11 @@ export const $Cookies = (namespace, domain) => {
       return _.extend(defaults, obj)
     },
 
+    parse (cookieString: string) {
+      return CookieJar.parse(cookieString)
+    },
+
+    toughCookieToAutomationCookie,
   }
 
   return API

packages/proxy/lib/http/index.ts

@@ -20,7 +20,7 @@ import RequestMiddleware from './request-middleware'
 import ResponseMiddleware from './response-middleware'
 import { DeferredSourceMapCache } from '@packages/rewriter'
 import type { RemoteStates } from '@packages/server/lib/remote_states'
-import type { CookieJar } from '@packages/server/lib/cookie-jar'
+import type { CookieJar } from '@packages/server/lib/util/cookies'
 import type { Automation } from '@packages/server/lib/automation/automation'
 
 function getRandomColorFn () {