diff --git a/.vscode/launch.json b/.vscode/launch.json
index b55f65350daa..ff2618c4bf7d 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,21 +5,8 @@
       "type": "node",
       "request": "attach",
       "name": "Attach by Process ID",
-      "processId": "${command:PickProcess}"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "test: active",
-      "runtimeExecutable": "yarn",
-      "runtimeArgs": [
-        "test-debug-package"
-      ],
-      "args": [
-        "${file}"
-      ],
-      "port": 5566,
-      "console": "integratedTerminal"
+      "processId": "${command:PickProcess}",
+      "continueOnAttach": true
     },
     {
       "type": "node",
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
deleted file mode 100644
index c7b562dfbd02..000000000000
--- a/.vscode/tasks.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "rename yarn workspace packages",
-      "type": "shell",
-      "command": "node ./scripts/rename-workspace-packages --file ${file}",
-      "presentation": {
-        "echo": true,
-        "reveal": "silent",
-        "focus": false,
-        "panel": "shared",
-        "showReuseMessage": true,
-        "clear": false
-      },
-      "problemMatcher": []
-    },
-    {
-      "label": "decaffeinate-bulk file",
-      "type": "shell",
-      "command": "yarn decaffeinate-bulk convert --file ${file}",
-      "problemMatcher": []
-    },
-    {
-      "label": "decaffeinate-bulk multiple files",
-      "type": "shell",
-      "command": "yarn decaffeinate-bulk convert --file ${file} ${file}",
-      "problemMatcher": []
-    },
-    {
-      "label": "decaffeinate-bulk dir",
-      "type": "shell",
-      "command": "yarn decaffeinate-bulk --dir ${fileDirname} convert",
-      "problemMatcher": []
-    }
-  ]
-}
diff --git a/__snapshots__/mocha-snapshot-spec.js b/__snapshots__/mocha-snapshot-spec.js
deleted file mode 100644
index 5e72aad2f262..000000000000
--- a/__snapshots__/mocha-snapshot-spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-exports['mocha snapshot captures mocha output 1'] = `
-
-  command: npm run test-mocha
-  code: 0
-  failed: false
-  killed: false
-  signal: null
-  timedOut: false
-
-  stdout:
-  -------
-  > cypress@x.y.z test-mocha <folder path>
-  > mocha --reporter spec scripts/spec.js
-
-
-
-    mocha sanity check
-      Y works
-
-
-    1 passing (<time>ms)
-  -------
-  stderr:
-  -------
-  
-  -------
-  
-`
diff --git a/browser-versions.json b/browser-versions.json
index 7cda3cd22949..e311a3aed124 100644
--- a/browser-versions.json
+++ b/browser-versions.json
@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "101.0.4951.34",
-  "chrome:stable": "100.0.4896.127"
+  "chrome:beta": "102.0.5005.27",
+  "chrome:stable": "101.0.4951.41"
 }
diff --git a/circle.yml b/circle.yml
index 71dd8facae64..868a3ef0cf7b 100644
--- a/circle.yml
+++ b/circle.yml
@@ -224,7 +224,6 @@ commands:
           name: Restore system tests node_modules cache
           keys:
             - v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-system-tests-projects-node-modules-cache-{{ checksum "system_tests_cache_key" }}
-            - v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-system-tests-projects-node-modules-cache-
 
   update_cached_system_tests_deps:
     description: 'Update the cached node_modules for projects in "system-tests/projects/**"'
@@ -238,10 +237,10 @@ commands:
       - restore_cache:
           name: Restore cache state, to check for known modules cache existence
           keys:
-            - v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-system-tests-projects-node-modules-cache-state-{{ checksum "system_tests_cache_key" }}
+            - v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-state-of-system-tests-projects-node-modules-cache-{{ checksum "system_tests_cache_key" }}
       - run:
           name: Send root honeycomb event for this CI build
-          command: cd system-tests/scripts && node ./send-root-honecomb-event.js
+          command: cd system-tests/scripts && node ./send-root-honeycomb-event.js
       - run:
           name: Bail if specific cache exists
           command: |
@@ -261,11 +260,11 @@ commands:
           name: Save system tests node_modules cache
           key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-system-tests-projects-node-modules-cache-{{ checksum "system_tests_cache_key" }}
           paths:
-            - ~/.cache/cy-system-tests-node-modules
+            - /tmp/cy-system-tests-node-modules
       - run: touch /tmp/system_tests_node_modules_installed
       - save_cache:
           name: Save system tests node_modules cache state key
-          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-system-tests-projects-node-modules-cache-state-{{ checksum "system_tests_cache_key" }}
+          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-state-of-system-tests-projects-node-modules-cache-{{ checksum "system_tests_cache_key" }}
           paths:
             - /tmp/system_tests_node_modules_installed
 
@@ -285,7 +284,7 @@ commands:
           command: echo $PLATFORM > platform_key
       - restore_cache:
           name: Restore cache state, to check for known modules cache existence
-          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-node-modules-cache-state-{{ checksum "circle_cache_key" }}
+          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-state-of-node-modules-cache-{{ checksum "circle_cache_key" }}
       - run:
           name: Bail if cache exists
           command: |
@@ -330,7 +329,7 @@ commands:
       - run: touch node_modules_installed
       - save_cache:
           name: Saving node-modules cache state key
-          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-node-modules-cache-state-{{ checksum "circle_cache_key" }}
+          key: v{{ .Environment.CACHE_VERSION }}-{{ checksum "platform_key" }}-state-of-node-modules-cache-{{ checksum "circle_cache_key" }}
           paths:
             - node_modules_installed
       - save_cache:
@@ -429,6 +428,10 @@ commands:
         description: chrome channel to install
         type: string
         default: ''
+      experimentalSessionAndOrigin:
+        description: experimental flag to apply
+        type: boolean
+        default: false
     steps:
       - restore_cached_workspace
       - when:
@@ -446,8 +449,13 @@ commands:
 
             if [[ -v MAIN_RECORD_KEY ]]; then
               # internal PR
-              CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
-              yarn cypress:run --record --parallel --group 5x-driver-<<parameters.browser>> --browser <<parameters.browser>>
+              if <<parameters.experimentalSessionAndOrigin>>; then
+                CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
+                yarn cypress:run-experimentalSessionAndOrigin --record --parallel --group 5x-driver-<<parameters.browser>>-experimentalSessionAndOrigin --browser <<parameters.browser>>
+              else
+                CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
+                yarn cypress:run --record --parallel --group 5x-driver-<<parameters.browser>> --browser <<parameters.browser>>
+              fi
             else
               # external PR
               TESTFILES=$(circleci tests glob "cypress/e2e/**/*.cy.*" | circleci tests split --total=$CIRCLE_NODE_TOTAL)
@@ -456,7 +464,11 @@ commands:
               if [[ -z "$TESTFILES" ]]; then
                 echo "Empty list of test files"
               fi
-              yarn cypress:run --browser <<parameters.browser>> --spec $TESTFILES
+              if <<parameters.experimentalSessionAndOrigin>>; then
+                yarn cypress:run-experimentalSessionAndOrigin --browser <<parameters.browser>> --spec $TESTFILES
+              else
+                yarn cypress:run --browser <<parameters.browser>> --spec $TESTFILES
+              fi
             fi
           working_directory: packages/driver
       - verify-mocha-results
@@ -1054,6 +1066,9 @@ jobs:
       - run:
           name: Top level packages
           command: yarn list --depth=0 || true
+      - run:
+          name: Check env canaries
+          command: node ./scripts/circle-env.js --check-canaries
       - build-and-persist
       - store-npm-logs
 
@@ -1156,8 +1171,6 @@ jobs:
     parallelism: 1
     steps:
       - restore_cached_workspace
-      # make sure mocha runs
-      - run: yarn test-mocha
       - when:
           condition:
             # several snapshots fails for windows due to paths.
@@ -1165,15 +1178,11 @@ jobs:
             equal: [ *windows-executor, << parameters.executor >> ]
           steps:
             - run: yarn test-scripts scripts/**/*spec.js
-            # make sure our snapshots are compared correctly
-            - run: yarn test-mocha-snapshot
       - unless:
           condition:
             equal: [ *windows-executor, << parameters.executor >> ]
           steps:
             - run: yarn test-scripts
-            # make sure our snapshots are compared correctly
-            - run: yarn test-mocha-snapshot
             # make sure packages with TypeScript can be transpiled to JS
             - run: yarn lerna run build-prod --stream
             # run unit tests from each individual package
@@ -1425,6 +1434,44 @@ jobs:
       - run-driver-integration-tests:
           browser: electron
 
+  driver-integration-tests-chrome-experimentalSessionAndOrigin:
+    <<: *defaults
+    resource_class: medium
+    parallelism: 5
+    steps:
+      - run-driver-integration-tests:
+          browser: chrome
+          install-chrome-channel: stable
+          experimentalSessionAndOrigin: true
+
+  driver-integration-tests-chrome-beta-experimentalSessionAndOrigin:
+    <<: *defaults
+    resource_class: medium
+    parallelism: 5
+    steps:
+      - run-driver-integration-tests:
+          browser: chrome:beta
+          install-chrome-channel: beta
+          experimentalSessionAndOrigin: true
+
+  driver-integration-tests-firefox-experimentalSessionAndOrigin:
+    <<: *defaults
+    resource_class: medium
+    parallelism: 5
+    steps:
+      - run-driver-integration-tests:
+          browser: firefox
+          experimentalSessionAndOrigin: true
+
+  driver-integration-tests-electron-experimentalSessionAndOrigin:
+    <<: *defaults
+    resource_class: medium
+    parallelism: 5
+    steps:
+      - run-driver-integration-tests:
+          browser: electron
+          experimentalSessionAndOrigin: true
+
   reporter-integration-tests:
     <<: *defaults
     parallelism: 3
@@ -2149,6 +2196,7 @@ linux-workflow: &linux-workflow
   jobs:
     - node_modules_install
     - build:
+        context: test-runner:env-canary
         requires:
           - node_modules_install
     - check-ts:
@@ -2224,6 +2272,22 @@ linux-workflow: &linux-workflow
         context: test-runner:cypress-record-key
         requires:
           - build
+    - driver-integration-tests-chrome-experimentalSessionAndOrigin:
+        context: test-runner:cypress-record-key
+        requires:
+          - build
+    - driver-integration-tests-chrome-beta-experimentalSessionAndOrigin:
+        context: test-runner:cypress-record-key
+        requires:
+          - build
+    - driver-integration-tests-firefox-experimentalSessionAndOrigin:
+        context: test-runner:cypress-record-key
+        requires:
+          - build
+    - driver-integration-tests-electron-experimentalSessionAndOrigin:
+        context: test-runner:cypress-record-key
+        requires:
+          - build
     - run-frontend-shared-component-tests-chrome:
         context: [test-runner:launchpad-tests, test-runner:percy]
         percy: true
@@ -2324,6 +2388,10 @@ linux-workflow: &linux-workflow
           - driver-integration-tests-chrome
           - driver-integration-tests-chrome-beta
           - driver-integration-tests-electron
+          - driver-integration-tests-firefox-experimentalSessionAndOrigin
+          - driver-integration-tests-chrome-experimentalSessionAndOrigin
+          - driver-integration-tests-chrome-beta-experimentalSessionAndOrigin
+          - driver-integration-tests-electron-experimentalSessionAndOrigin
           - system-tests-non-root
           - system-tests-firefox
           - system-tests-electron
@@ -2437,6 +2505,7 @@ mac-workflow: &mac-workflow
 
     - build:
         name: darwin-build
+        context: test-runner:env-canary
         executor: mac
         resource_class: macos.x86.medium.gen2
         requires:
@@ -2475,6 +2544,7 @@ windows-workflow: &windows-workflow
 
     - build:
         name: windows-build
+        context: test-runner:env-canary
         executor: windows
         resource_class: windows.medium
         requires:
diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index e0c28c10023a..462ef051b16e 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -10,10 +10,13 @@ declare namespace Cypress {
   type PrevSubject = keyof PrevSubjectMap
   type TestingType = 'e2e' | 'component'
   type PluginConfig = (on: PluginEvents, config: PluginConfigOptions) => void | ConfigOptions | Promise<ConfigOptions>
+  interface JQueryWithSelector<TElement = HTMLElement> extends JQuery<TElement> {
+    selector?: string | null
+  }
 
   interface PrevSubjectMap<O = unknown> {
     optional: O
-    element: JQuery
+    element: JQueryWithSelector
     document: Document
     window: Window
   }
@@ -54,14 +57,11 @@ declare namespace Cypress {
   }
 
   interface RemoteState {
-    auth?: {
-      username: string
-      password: string
-    }
+    auth?: Auth
     domainName: string
     strategy: 'file' | 'http'
     origin: string
-    fileServer: string
+    fileServer: string | null
     props: Record<string, any>
     visiting: string
   }
@@ -467,16 +467,18 @@ declare namespace Cypress {
     Commands: {
       add<T extends keyof Chainable>(name: T, fn: CommandFn<T>): void
       add<T extends keyof Chainable>(name: T, options: CommandOptions & {prevSubject: false}, fn: CommandFn<T>): void
+      add<T extends keyof Chainable, S = any>(name: T, options: CommandOptions & {prevSubject: true}, fn: CommandFnWithSubject<T, S>): void
       add<T extends keyof Chainable, S extends PrevSubject>(
-          name: T, options: CommandOptions & { prevSubject: true | S | ['optional'] }, fn: CommandFnWithSubject<T, PrevSubjectMap[S]>,
+          name: T, options: CommandOptions & { prevSubject: S | ['optional'] }, fn: CommandFnWithSubject<T, PrevSubjectMap[S]>,
       ): void
       add<T extends keyof Chainable, S extends PrevSubject>(
           name: T, options: CommandOptions & { prevSubject: S[] }, fn: CommandFnWithSubject<T, PrevSubjectMap<void>[S]>,
       ): void
       addAll<T extends keyof Chainable>(fns: CommandFns): void
       addAll<T extends keyof Chainable>(options: CommandOptions & {prevSubject: false}, fns: CommandFns): void
+      addAll<T extends keyof Chainable, S = any>(options: CommandOptions & { prevSubject: true }, fns: CommandFnsWithSubject<S>): void
       addAll<T extends keyof Chainable, S extends PrevSubject>(
-          options: CommandOptions & { prevSubject: true | S | ['optional'] }, fns: CommandFnsWithSubject<PrevSubjectMap[S]>,
+          options: CommandOptions & { prevSubject: S | ['optional'] }, fns: CommandFnsWithSubject<PrevSubjectMap[S]>,
       ): void
       addAll<T extends keyof Chainable, S extends PrevSubject>(
           options: CommandOptions & { prevSubject: S[] }, fns: CommandFnsWithSubject<PrevSubjectMap<void>[S]>,
@@ -634,7 +636,7 @@ declare namespace Cypress {
      * Trigger action
      * @private
      */
-    action: (action: string, ...args: any[]) => void
+    action: (action: string, ...args: any[]) => any[] | void
 
     /**
      * Load  files
@@ -1059,7 +1061,7 @@ declare namespace Cypress {
     /**
       * Save/Restore browser Cookies, LocalStorage, and SessionStorage data resulting from the supplied `setup` function.
       *
-      * Only available if the `experimentalSessionSupport` config option is enabled.
+      * Only available if the `experimentalSessionAndOrigin` config option is enabled.
       *
       * @see https://on.cypress.io/session
       */
@@ -1421,6 +1423,29 @@ declare namespace Cypress {
      */
     off: Actions
 
+    /**
+     * Enables running Cypress commands in a secondary origin.
+     * @see https://on.cypress.io/origin
+     * @example
+     *    cy.origin('example.com', () => {
+     *      cy.get('h1').should('equal', 'Example Domain')
+     *    })
+     */
+    origin<T extends any>(urlOrDomain: string, fn: () => void): Chainable<T>
+
+    /**
+     * Enables running Cypress commands in a secondary origin.
+     * @see https://on.cypress.io/origin
+     * @example
+     *    cy.origin('example.com', { args: { key: 'value', foo: 'foo' } }, ({ key, foo }) => {
+     *      expect(key).to.equal('value')
+     *      expect(foo).to.equal('foo')
+     *    })
+     */
+    origin<T, S extends any>(urlOrDomain: string, options: {
+      args: T
+    }, fn: (args: T) => void): Chainable<S>
+
     /**
      * Get the parent DOM element of a set of DOM elements.
      *
@@ -2514,7 +2539,7 @@ declare namespace Cypress {
     action: 'select' | 'drag-drop'
   }
 
-  interface BlurOptions extends Loggable, Forceable { }
+  interface BlurOptions extends Loggable, Timeoutable, Forceable { }
 
   interface CheckOptions extends Loggable, Timeoutable, ActionableOptions {
     interval: number
@@ -2807,15 +2832,15 @@ declare namespace Cypress {
      */
     scrollBehavior: scrollBehaviorOptions
     /**
-     * Enable experimental session support. See https://on.cypress.io/session
+     * Allows listening to the `before:run`, `after:run`, `before:spec`, and `after:spec` events in the plugins file during interactive mode.
      * @default false
      */
-    experimentalSessionSupport: boolean
+    experimentalInteractiveRunEvents: boolean
     /**
-     * Allows listening to the `before:run`, `after:run`, `before:spec`, and `after:spec` events in the plugins file during interactive mode.
+     * Enables cross-origin and improved session support, including the `cy.origin` and `cy.session` commands. See https://on.cypress.io/origin and https://on.cypress.io/session.
      * @default false
      */
-    experimentalInteractiveRunEvents: boolean
+    experimentalSessionAndOrigin: boolean
     /**
      * Generate and save commands directly to your test suite by interacting with your app as an end user would.
      * @default false
@@ -2924,6 +2949,7 @@ declare namespace Cypress {
      * The platform Cypress is running on.
      */
     platform: 'linux' | 'darwin' | 'win32'
+    remote: RemoteState
     /**
      * The Cypress version being used.
      */
@@ -2969,7 +2995,7 @@ declare namespace Cypress {
     xhrUrl: string
   }
 
-  interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations' | 'experimentalSessionSupport'>> {
+  interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations' | 'experimentalSessionAndOrigin'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
   }
@@ -5487,6 +5513,21 @@ declare namespace Cypress {
     (action: 'task', tasks: Tasks): void
   }
 
+  interface CodeFrame {
+    frame: string
+    language: string
+    line: number
+    column: number
+    absoluteFile: string
+    originalFile: string
+    relativeFile: string
+  }
+
+  interface CypressError extends Error {
+    docsUrl?: string
+    codeFrame?: CodeFrame
+  }
+
   // for just a few events like "window:alert" it makes sense to allow passing cy.stub() or
   // a user callback function. Others probably only need a callback function.
 
@@ -5592,7 +5633,7 @@ declare namespace Cypress {
      *  This event exists because it's extremely useful for debugging purposes.
      * @see https://on.cypress.io/catalog-of-events#App-Events
      */
-    (action: 'fail', fn: (error: Error, mocha: Mocha.Runnable) => void): Cypress
+    (action: 'fail', fn: (error: CypressError, mocha: Mocha.Runnable) => void): Cypress
     /**
      * Fires whenever the viewport changes via a `cy.viewport()` or naturally when
      * Cypress resets the viewport to the default between tests. Useful for debugging purposes.
@@ -5626,6 +5667,12 @@ declare namespace Cypress {
      * @see https://on.cypress.io/catalog-of-events#App-Events
      */
     (action: 'command:end', fn: (command: CommandQueue) => void): Cypress
+    /**
+     * Fires when a command is skipped, namely the `should` command.
+     * Useful for debugging and understanding how commands are handled.
+     * @see https://on.cypress.io/catalog-of-events#App-Events
+     */
+    (action: 'skipped:command:end', fn: (command: CommandQueue) => void): Cypress
     /**
      * Fires whenever a command begins its retrying routines.
      * This is called on the trailing edge after Cypress has internally
@@ -5716,10 +5763,13 @@ declare namespace Cypress {
   }
 
   interface EnqueuedCommand {
+    id: string
     name: string
     args: any[]
     type: string
     chainerId: string
+    injected: boolean
+    userInvocationStack?: string
     fn(...args: any[]): any
   }
 
@@ -5758,6 +5808,8 @@ declare namespace Cypress {
   }
 
   interface LogConfig extends Timeoutable {
+    /** Unique id for the log, in the form of '<origin>-<number>' */
+    id: string
     /** The JQuery element for the command. This will highlight the command in the main window when debugging */
     $el: JQuery
     /** The scope of the log entry. If child, will appear nested below parents, prefixed with '-' */
@@ -5770,6 +5822,8 @@ declare namespace Cypress {
     message: any
     /** Set to false if you want to control the finishing of the command in the log yourself */
     autoEnd: boolean
+    /** Set to true to immediately finish the log  */
+    end: boolean
     /** Return an object that will be printed in the dev tools console */
     consoleProps(): ObjectLike
   }
diff --git a/cli/types/tests/actions.ts b/cli/types/tests/actions.ts
index e31b294e254b..014c43dad9da 100644
--- a/cli/types/tests/actions.ts
+++ b/cli/types/tests/actions.ts
@@ -33,7 +33,7 @@ Cypress.on('url:changed', (url) => {
 })
 
 Cypress.on('fail', (error, mocha) => {
-  error // $ExpectType Error
+  error // $ExpectType CypressError
   mocha // $ExpectType Runnable
 })
 
diff --git a/cli/types/tests/cypress-tests.ts b/cli/types/tests/cypress-tests.ts
index 1d6296adab81..f28e09c95893 100644
--- a/cli/types/tests/cypress-tests.ts
+++ b/cli/types/tests/cypress-tests.ts
@@ -85,7 +85,7 @@ namespace CypressCommandsTests {
     arg // $ExpectType string
   })
   Cypress.Commands.add('newCommand', { prevSubject: true }, (subject, arg) => {
-    subject // $ExpectType unknown
+    subject // $ExpectType any
     arg // $ExpectType string
     return
   })
@@ -115,11 +115,11 @@ namespace CypressCommandsTests {
     arg // $ExpectType string
   })
   Cypress.Commands.add('newCommand', { prevSubject: 'element' }, (subject, arg) => {
-    subject // $ExpectType JQuery<HTMLElement>
+    subject // $ExpectType JQueryWithSelector<HTMLElement>
     arg // $ExpectType string
   })
   Cypress.Commands.add('newCommand', { prevSubject: ['element'] }, (subject, arg) => {
-    subject // $ExpectType JQuery<HTMLElement>
+    subject // $ExpectType JQueryWithSelector<HTMLElement>
     arg // $ExpectType string
   })
   Cypress.Commands.add('newCommand', { prevSubject: ['element', 'document', 'window'] }, (subject, arg) => {
@@ -128,7 +128,7 @@ namespace CypressCommandsTests {
     } else if (subject instanceof Document) {
       subject // $ExpectType Document
     } else {
-      subject // $ExpectType JQuery<HTMLElement>
+      subject // $ExpectType JQueryWithSelector<HTMLElement>
     }
     arg // $ExpectType string
   })
@@ -138,7 +138,7 @@ namespace CypressCommandsTests {
     } else if (subject instanceof Document) {
       subject // $ExpectType Document
     } else if (subject) {
-      subject // $ExpectType JQuery<HTMLElement>
+      subject // $ExpectType JQueryWithSelector<HTMLElement>
     } else {
       subject // $ExpectType void
     }
@@ -175,7 +175,7 @@ namespace CypressCommandsTests {
   })
   Cypress.Commands.addAll({ prevSubject: true }, {
     newCommand: (subject, arg) => {
-      subject // $ExpectType unknown
+      subject // $ExpectType any
       arg // $ExpectType any
       return
     },
@@ -217,13 +217,13 @@ namespace CypressCommandsTests {
   })
   Cypress.Commands.addAll({ prevSubject: 'element' }, {
     newCommand: (subject, arg) => {
-      subject // $ExpectType JQuery<HTMLElement>
+      subject // $ExpectType JQueryWithSelector<HTMLElement>
       arg // $ExpectType any
     }
   })
   Cypress.Commands.addAll({ prevSubject: ['element'] }, {
     newCommand: (subject, arg) => {
-      subject // $ExpectType JQuery<HTMLElement>
+      subject // $ExpectType JQueryWithSelector<HTMLElement>
       arg // $ExpectType any
     }
   })
@@ -234,7 +234,7 @@ namespace CypressCommandsTests {
       } else if (subject instanceof Document) {
         subject // $ExpectType Document
       } else {
-        subject // $ExpectType JQuery<HTMLElement>
+        subject // $ExpectType JQueryWithSelector<HTMLElement>
       }
       arg // $ExpectType any
     }
@@ -246,7 +246,7 @@ namespace CypressCommandsTests {
       } else if (subject instanceof Document) {
         subject // $ExpectType Document
       } else if (subject) {
-        subject // $ExpectType JQuery<HTMLElement>
+        subject // $ExpectType JQueryWithSelector<HTMLElement>
       } else {
         subject // $ExpectType void
       }
@@ -273,7 +273,7 @@ namespace CypressCommandsTests {
     originalFn.apply(this, [arg]) // $ExpectType Chainable<number>
   })
   Cypress.Commands.overwrite<'type', 'element'>('type', (originalFn, element, text, options?: Partial<Cypress.TypeOptions & {sensitive: boolean}>) => {
-    element // $ExpectType JQuery<HTMLElement>
+    element // $ExpectType JQueryWithSelector<HTMLElement>
     text // $ExpectType string
 
     if (options && options.sensitive) {
@@ -903,7 +903,6 @@ namespace CypressTaskTests {
 }
 
 namespace CypressSessionsTests {
-  Cypress.config('experimentalSessionSupport') // $ExpectType boolean
   cy.session('user')
   cy.session('user', () => {})
   cy.session({ name: 'bob' }, () => {})
@@ -938,3 +937,21 @@ namespace CypressKeyboardTests {
     delay: 500 // $ExpectError
   })
 }
+
+namespace CypressOriginTests {
+  cy.origin('example.com', () => {})
+  cy.origin('example.com', { args: {}}, (value: object) => {})
+  cy.origin('example.com', { args: { one: 1, key: 'value', bool: true } }, (value: { one: number, key: string, bool: boolean}) => {})
+  cy.origin('example.com', { args: [1, 'value', true ] }, (value: Array<(number | string | boolean)>) => {})
+  cy.origin('example.com', { args : 'value'}, (value: string) => {})
+  cy.origin('example.com', { args: 1 }, (value: number) => {})
+  cy.origin('example.com', { args: true }, (value: boolean) => {})
+
+  cy.origin() // $ExpectError
+  cy.origin('example.com') // $ExpectError
+  cy.origin(true) // $ExpectError
+  cy.origin('example.com', {}) // $ExpectError
+  cy.origin('example.com', {}, {}) // $ExpectError
+  cy.origin('example.com', { args: ['value'] }, (value: boolean[]) => {}) // $ExpectError
+  cy.origin('example.com', {}, (value: undefined) => {}) // $ExpectError
+}
diff --git a/guides/release-process.md b/guides/release-process.md
index 69baa03ad4e1..b3d8b52b99a5 100644
--- a/guides/release-process.md
+++ b/guides/release-process.md
@@ -56,29 +56,20 @@ of Cypress. You can see the progress of the test projects by opening the status
 
 In the following instructions, "X.Y.Z" is used to denote the [next version of Cypress being published](./next-version.md).
 
-1. Confirm that every issue labeled [stage: pending release](https://github.com/cypress-io/cypress/issues?q=label%3A%22stage%3A+pending+release%22+is%3Aclosed) has a ZenHub release set. **Tip:** there is a command in [`release-automations`](https://github.com/cypress-io/release-automations)'s `issues-in-release` tool to list and check such issues. Without a ZenHub release issues will not be included in the right changelog.
-
-2. Create or review the release-specific documentation and changelog in [cypress-documentation](https://github.com/cypress-io/cypress-documentation). If there is not already a release-specific PR open, create one.
-     - Use [`release-automations`](https://github.com/cypress-io/release-automations)'s `issues-in-release` tool to generate a starting point for the changelog, based off of ZenHub:
-        ```shell
-        cd packages/issues-in-release
-        yarn do:changelog --release <release label>
-        ```
-    - Ensure the changelog is up-to-date and has the correct date.
-    - Merge any release-specific documentation changes into the main release PR.
-    - You can view the doc's [branch deploy preview](https://github.com/cypress-io/cypress-documentation/blob/master/CONTRIBUTING.md#pull-requests) by clicking 'Details' on the PR's `netlify-cypress-docs/deploy-preview` GitHub status check.
-
-3. `develop` should contain all of the changes made in `master`. However, this occasionally may not be the case.
+1. `develop` should contain all of the changes made in `master`. However, this occasionally may not be the case.
    - Ensure that `master` does not have any additional commits that are not on `develop`.
    - Ensure all auto-generated pull requests designed to merge master into develop have been successfully merged.
+   - If there are additional commits necessary to merge `master` to `develop`, submit, get approvals on, and merge a new PR
+
+2. Confirm that every issue labeled [stage: pending release](https://github.com/cypress-io/cypress/issues?q=label%3A%22stage%3A+pending+release%22+is%3Aclosed) has a ZenHub release set. **Tip:** there is a command in [`release-automations`](https://github.com/cypress-io/release-automations)'s `issues-in-release` tool to list and check such issues. Without a ZenHub release issues will not be included in the right changelog. Also ensure that every closed issue in any obsolete releases are moved to the appropriate release in ZehHub. For example, if the open releases are 9.5.5 and 9.6.0, the current release is 9.6.0, then all closed issues marked as 9.5.5 should be moved to 9.6.0. Ensure that there are no commits on `develop` since the last release that are user facing and aren't marked with the current release.
 
-4. If there is a new [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink/releases) version, update the corresponding dependency in [`packages/example`](../packages/example) to that new version.
+3. If there is a new [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink/releases) version, update the corresponding dependency in [`packages/example`](../packages/example) to that new version.
 
-5. Once the `develop` branch is passing for all test projects with the new changes and the `linux-x64` binary is present at `https://cdn.cypress.io/beta/binary/X.Y.Z/linux-x64/<sha>/cypress.zip`, and the `linux-x64` cypress npm package is present at `https://cdn.cypress.io/beta/binary/X.Y.Z/linux-x64/<sha>/cypress.tgz`, publishing can proceed.
+4. Once the `develop` branch is passing for all test projects with the new changes and the `linux-x64` binary is present at `https://cdn.cypress.io/beta/binary/X.Y.Z/linux-x64/<sha>/cypress.zip`, and the `linux-x64` cypress npm package is present at `https://cdn.cypress.io/beta/binary/X.Y.Z/linux-x64/<sha>/cypress.tgz`, publishing can proceed.
 
-6. [Set up](https://cypress-io.atlassian.net/wiki/spaces/INFRA/pages/1534853121/AWS+SSO+Cypress) an AWS SSO profile with the [Team-CypressApp-Prod](https://cypress-io.atlassian.net/wiki/spaces/INFRA/pages/1534853121/AWS+SSO+Cypress#Team-CypressApp-Prod) role. The release scripts assumes the name of your profile is `production`. If you have setup your credentials under a different profile, be sure to set the `AWS_PROFILE` environment variable. Log into AWS SSO with `aws sso login --profile <name_of_profile>`.
+5. [Set up](https://cypress-io.atlassian.net/wiki/spaces/INFRA/pages/1534853121/AWS+SSO+Cypress) an AWS SSO profile with the [Team-CypressApp-Prod](https://cypress-io.atlassian.net/wiki/spaces/INFRA/pages/1534853121/AWS+SSO+Cypress#Team-CypressApp-Prod) role. The release scripts assumes the name of your profile is `production`. If you have setup your credentials under a different profile, be sure to set the `AWS_PROFILE` environment variable. Log into AWS SSO with `aws sso login --profile <name_of_profile>`.
 
-7. Use the `prepare-release-artifacts` script (Mac/Linux only) to prepare the latest commit to a stable release. When you run this script, the following happens:
+6. Use the `prepare-release-artifacts` script (Mac/Linux only) to prepare the latest commit to a stable release. When you run this script, the following happens:
     * the binaries for `<commit sha>` are moved from `beta` to the `desktop` folder for `<new target version>` in S3
     * the Cloudflare cache for this version is purged
     * the pre-prod `cypress.tgz` NPM package is converted to a stable NPM package ready for release
@@ -89,22 +80,22 @@ In the following instructions, "X.Y.Z" is used to denote the [next version of Cy
 
     You can pass `--dry-run` to see the commands this would run under the hood.
 
-8. Validate you are logged in to `npm` with `npm whoami`. Otherwise log in with `npm login`.
+7. Validate you are logged in to `npm` with `npm whoami`. Otherwise log in with `npm login`.
 
-9. Publish the generated npm package under the `dev` tag, using your personal npm account.
+8. Publish the generated npm package under the `dev` tag, using your personal npm account.
 
     ```shell
     npm publish /tmp/cypress-prod.tgz --tag dev
     ```
 
-10. Double-check that the new version has been published under the `dev` tag using `npm info cypress` or [available-versions](https://github.com/bahmutov/available-versions). `latest` should still point to the previous version. Example output:
+9. Double-check that the new version has been published under the `dev` tag using `npm info cypress` or [available-versions](https://github.com/bahmutov/available-versions). `latest` should still point to the previous version. Example output:
 
     ```shell
     dist-tags:
     dev: 3.4.0     latest: 3.3.2
     ```
 
-11. Test `cypress@X.Y.Z` to make sure everything is working.
+10. Test `cypress@X.Y.Z` to make sure everything is working.
     - Install the new version: `npm install -g cypress@X.Y.Z`
     - Run a quick, manual smoke test:
         - `cypress open`
@@ -113,6 +104,16 @@ In the following instructions, "X.Y.Z" is used to denote the [next version of Cy
         - [cypress-realworld-app](https://github.com/cypress-io/cypress-realworld-app) uses yarn and represents a typical consumer implementation.
     - Optionally, do more thorough tests, for example test the new version of Cypress against the Cypress dashboard repo.
 
+11. Create or review the release-specific documentation and changelog in [cypress-documentation](https://github.com/cypress-io/cypress-documentation). If there is not already a release-specific PR open, create one. This PR must be merged, built, and deployed before moving to the next step.
+     - Use [`release-automations`](https://github.com/cypress-io/release-automations)'s `issues-in-release` tool to generate a starting point for the changelog, based off of ZenHub:
+        ```shell
+        cd packages/issues-in-release
+        yarn do:changelog --release <release label>
+        ```
+    - Ensure the changelog is up-to-date and has the correct date.
+    - Merge any release-specific documentation changes into the main release PR.
+    - You can view the doc's [branch deploy preview](https://github.com/cypress-io/cypress-documentation/blob/master/CONTRIBUTING.md#pull-requests) by clicking 'Details' on the PR's `netlify-cypress-docs/deploy-preview` GitHub status check.
+
 12. Make the new npm version the "latest" version by updating the dist-tag `latest` to point to the new version:
 
     ```shell
@@ -134,24 +135,18 @@ In the following instructions, "X.Y.Z" is used to denote the [next version of Cy
     - Create a new patch release (and a new minor release, if this is a minor release) in ZenHub, and schedule them both to be completed 2 weeks from the current date.
     - Move all issues that are still open from the current release to the appropriate future release.
 
-17. Bump `version` in [`package.json`](package.json), commit it to `develop`, tag it with the version, and push the tag up:
+17. Bump `version` in [`package.json`](package.json), submit, get approvals on, and merge a new PR for the change. After it merges:
 
     ```shell
-    git commit -am "release X.Y.Z [skip ci]"
+    git checkout develop
+    git pull origin develop
     git log --pretty=oneline
     # copy sha of the previous commit
     git tag -a vX.Y.Z <sha>
     git push origin vX.Y.Z
     ```
 
-18. Merge `develop` into `master` and push both branches up. Note: pushing to `master` will automatically publish any independent npm packages that have not yet been published.
-
-    ```shell
-    git push origin develop
-    git checkout master
-    git merge develop
-    git push origin master
-    ```
+18. Submit, get approvals on, and merge a new PR that merges `develop` to `master`
 
 19. Inside of [cypress-io/release-automations][release-automations]:
     - Publish GitHub release to [cypress-io/cypress/releases](https://github.com/cypress-io/cypress/releases) using package `set-releases`:
diff --git a/npm/vite-dev-server/cypress.config.ts b/npm/vite-dev-server/cypress.config.ts
index 16d1ccf72a38..9109a38747ae 100644
--- a/npm/vite-dev-server/cypress.config.ts
+++ b/npm/vite-dev-server/cypress.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   projectId: 'ypt4pf',
   e2e: {
-    experimentalSessionSupport: true,
+    experimentalSessionAndOrigin: true,
     defaultCommandTimeout: 10000, // these take a bit longer b/c they're e2e open mode test
     async setupNodeEvents (on, config) {
       if (!process.env.HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS) {
diff --git a/package.json b/package.json
index 5931d45e1b3c..d63ffccfd583 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "9.5.4",
+  "version": "9.6.0",
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {
@@ -56,9 +56,7 @@
     "pretest-e2e": "yarn ensure-deps",
     "test-integration": "lerna exec yarn test-integration --ignore \"'@packages/{driver,root,static,web-config}'\"",
     "test-mocha": "mocha --reporter spec scripts/spec.js",
-    "test-mocha-snapshot": "mocha scripts/mocha-snapshot-spec.js",
     "test-npm-package-release-script": "npx lerna exec --scope \"@cypress/*\" -- npx --no-install semantic-release --dry-run",
-    "test-s3-api": "node -r ./packages/ts/register scripts/binary/s3-api-demo.ts",
     "test-system": "yarn workspace @tooling/system-tests test",
     "test-scripts": "mocha -r packages/ts/register --reporter spec 'scripts/unit/**/*spec.js'",
     "test-scripts-watch": "yarn test-scripts --watch --watch-extensions 'ts,js'",
@@ -67,7 +65,7 @@
     "pretest-watch": "yarn ensure-deps",
     "test-watch": "lerna exec yarn test-watch --ignore \"'@packages/{driver,root,static,web-config}'\"",
     "type-check": "yarn lerna exec yarn type-check --scope @tooling/system-tests && node scripts/type_check",
-    "verify:mocha:results": "node ./scripts/verify_mocha_results",
+    "verify:mocha:results": "node ./scripts/verify-mocha-results",
     "watch": "yarn gulp watch",
     "prepare": "husky install"
   },
@@ -77,7 +75,6 @@
   "devDependencies": {
     "@aws-sdk/credential-providers": "3.53.0",
     "@cypress/commit-message-install": "3.1.3",
-    "@cypress/env-or-json-file": "2.0.0",
     "@cypress/github-commit-status-check": "1.5.0",
     "@cypress/questions-remain": "1.0.1",
     "@cypress/request": "2.88.10",
@@ -94,8 +91,8 @@
     "@graphql-tools/delegate": "8.2.1",
     "@graphql-tools/utils": "8.2.3",
     "@graphql-tools/wrap": "8.1.1",
-    "@percy/cli": "1.0.0-beta.48",
-    "@percy/cypress": "^3.1.0",
+    "@percy/cli": "1.1.0",
+    "@percy/cypress": "^3.1.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
     "@types/bluebird": "3.5.29",
@@ -160,9 +157,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-vue": "7.18.0",
     "execa": "4.0.0",
-    "execa-wrap": "1.4.0",
     "filesize": "4.1.2",
-    "find-package-json": "1.2.0",
     "fs-extra": "9.1.0",
     "getenv": "^1.0.0",
     "gift": "0.10.2",
@@ -198,11 +193,8 @@
     "mock-fs": "5.1.1",
     "p-defer": "^3.0.0",
     "patch-package": "6.4.7",
-    "plist": "3.0.5",
     "pluralize": "8.0.0",
     "postinstall-postinstall": "2.0.0",
-    "prefixed-list": "1.0.1",
-    "pretty-ms": "7.0.0",
     "print-arch": "1.0.0",
     "proxyquire": "2.1.3",
     "rimraf": "3.0.2",
diff --git a/packages/app/cypress/e2e/settings.cy.ts b/packages/app/cypress/e2e/settings.cy.ts
index 106b96e93a24..c3f1668d5a55 100644
--- a/packages/app/cypress/e2e/settings.cy.ts
+++ b/packages/app/cypress/e2e/settings.cy.ts
@@ -204,11 +204,16 @@ describe('App: Settings', () => {
           })
         })
 
-        cy.get('[data-cy="experiment-experimentalSessionSupport"]').within(() => {
+        cy.get('[data-cy="experiment-experimentalSessionAndOrigin"]').within(() => {
           cy.validateExternalLink({
             name: 'cy.session()',
             href: 'https://on.cypress.io/session',
           })
+
+          cy.validateExternalLink({
+            name: 'cy.origin()',
+            href: 'https://on.cypress.io/origin',
+          })
         })
 
         cy.get('[data-cy="experiment-experimentalSourceRewriting"]').within(() => {
diff --git a/packages/app/index.d.ts b/packages/app/index.d.ts
index b810e614b50f..74a41b5d1f88 100644
--- a/packages/app/index.d.ts
+++ b/packages/app/index.d.ts
@@ -1,3 +1,5 @@
+/// <reference path="../driver/types/internal-types-lite.d.ts" />
+
 import type { Socket } from '@packages/socket/lib/browser'
 import type MobX from 'mobx'
 import type { EventManager } from './src/runner/event-manager'
diff --git a/packages/app/src/components/Blank.cy.tsx b/packages/app/src/components/Blank.cy.tsx
index e99ff73db7f0..dce504702409 100644
--- a/packages/app/src/components/Blank.cy.tsx
+++ b/packages/app/src/components/Blank.cy.tsx
@@ -48,7 +48,7 @@ describe('sessionLifecycle', () => {
   it('works', () => {
     getContainerEl()!.innerHTML = sessionLifecycle()
 
-    cy.get('.warn').contains('experimentalSessionSupport')
+    cy.get('.warn').contains('experimentalSessionAndOrigin')
 
     cy.percySnapshot()
   })
diff --git a/packages/app/src/components/Blank.jsx b/packages/app/src/components/Blank.jsx
index 9194efd8de32..6a052ae74116 100644
--- a/packages/app/src/components/Blank.jsx
+++ b/packages/app/src/components/Blank.jsx
@@ -173,7 +173,7 @@ export const sessionLifecycle = () => {
     <div class='container'>
       ${svgCy}
       <br/>
-      <p class="warn">Because <code><b>experimentalSessionSupport</b></code> is enabled, Cypress navigates to the default blank page <span class="em">before each test</span> to ensure test reliability.</p>
+      <p class="warn">Because <code><b>experimentalSessionAndOrigin</b></code> is enabled, Cypress navigates to the default blank page <span class="em">before each test</span> to ensure test reliability.</p>
       <p>This is the default blank page.</p>
       <p>To test your web application:</p>
       <ul>
diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
index 6711c3f3515e..b43a79ff13bd 100644
--- a/packages/app/src/runner/aut-iframe.ts
+++ b/packages/app/src/runner/aut-iframe.ts
@@ -82,6 +82,40 @@ export class AutIframe {
     return Cypress.cy.detachDom(this._contents())
   }
 
+  /**
+   * If the AUT is cross origin relative to top, a security error is thrown and the method returns false
+   * If the AUT is cross origin relative to top and chromeWebSecurity is false, origins of the AUT and top need to be compared and returns false
+   * Otherwise, if top and the AUT match origins, the method returns true.
+   * If the AUT origin is "about://blank", that means the src attribute has been stripped off the iframe and is adhering to same origin policy
+   */
+  doesAUTMatchTopOriginPolicy = () => {
+    const Cypress = this.eventManager.getCypress()
+
+    if (!Cypress) return true
+
+    try {
+      const { href: currentHref } = (this.$iframe as any)[0].contentWindow.document.location
+      const locationTop = Cypress.Location.create(window.location.href)
+      const locationAUT = Cypress.Location.create(currentHref)
+
+      return locationTop.originPolicy === locationAUT.originPolicy || locationAUT.originPolicy === 'about://blank'
+    } catch (err) {
+      if (err.name === 'SecurityError') {
+        return false
+      }
+
+      throw err
+    }
+  }
+
+  /**
+   * Removes the src attribute from the AUT iframe, resulting in 'about:blank' being loaded into the iframe
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src for more details
+   */
+  removeSrcAttribute = () => {
+    this.$iframe?.removeAttr('src')
+  }
+
   visitBlank = ({ type }: { type?: 'session' | 'session-lifecycle' }) => {
     return new Promise<void>((resolve) => {
       if (!this.$iframe) {
@@ -108,6 +142,23 @@ export class AutIframe {
   }
 
   restoreDom = (snapshot) => {
+    if (!this.doesAUTMatchTopOriginPolicy()) {
+      /**
+       * A load event fires here when the src is removed (as does an unload event).
+       * This is equivalent to loading about:blank (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src).
+       * This doesn't resort in a log message being generated for a new page.
+       * In the event-manager code, we stop adding logs from other domains once the spec is finished.
+       */
+      this.$iframe?.one('load', () => {
+        this.restoreDom(snapshot)
+      })
+
+      // The iframe is in a cross origin state. Remove the src attribute to adhere to same origin policy. NOTE: This should only be done ONCE.
+      this.removeSrcAttribute()
+
+      return
+    }
+
     const Cypress = this.eventManager.getCypress()
     const { headStyles = undefined, bodyStyles = undefined } = Cypress ? Cypress.cy.getStyles(snapshot) : {}
     const { body, htmlAttrs } = snapshot
@@ -426,40 +477,6 @@ export class AutIframe {
     })
   }
 
-  beforeScreenshot = (config) => {
-    // could fail if iframe is cross-origin, so fail gracefully
-    try {
-      if (config.disableTimersAndAnimations) {
-        this.dom.addCssAnimationDisabler(this._body())
-      }
-
-      _.each(config.blackout, (selector) => {
-        this.dom.addBlackout(this._body(), selector)
-      })
-    } catch (err) {
-      /* eslint-disable no-console */
-      console.error('Failed to modify app this.dom:')
-      console.error(err)
-      /* eslint-disable no-console */
-    }
-  }
-
-  afterScreenshot = (config) => {
-    // could fail if iframe is cross-origin, so fail gracefully
-    try {
-      if (config.disableTimersAndAnimations) {
-        this.dom.removeCssAnimationDisabler(this._body())
-      }
-
-      this.dom.removeBlackouts(this._body())
-    } catch (err) {
-      /* eslint-disable no-console */
-      console.error('Failed to modify app this.dom:')
-      console.error(err)
-      /* eslint-disable no-console */
-    }
-  }
-
   startStudio = () => {
     if (this.studioRecorder.isLoading) {
       this.studioRecorder.start(this._body()?.[0])
diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index 4446dab4d016..86eb017a5038 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -8,7 +8,9 @@ import type { AutomationElementId, FileDetails } from '@packages/types'
 
 import { logger } from './logger'
 import type { Socket } from '@packages/socket/lib/browser'
+import * as cors from '@packages/network/lib/cors'
 import { automation, useRunnerUiStore } from '../store'
+import { useScreenshotStore } from '../store/screenshot-store'
 
 export type CypressInCypressMochaEvent = Array<Array<string | Record<string, any>>>
 
@@ -163,6 +165,10 @@ export class EventManager {
       })
     })
 
+    this.ws.on('cross:origin:delaying:html', (request) => {
+      Cypress.primaryOriginCommunicator.emit('delaying:html', request)
+    })
+
     localToReporterEvents.forEach((event) => {
       this.localBus.on(event, (...args) => {
         this.reporterBus.emit(event, ...args)
@@ -354,6 +360,14 @@ export class EventManager {
       this._clearAllCookies()
       this._setUnload()
     })
+
+    // The window.top should not change between test reloads, and we only need to bind the message event once
+    // Forward all message events to the current instance of the multi-origin communicator
+    if (!window.top) throw new Error('missing window.top in event-manager')
+
+    window.top.addEventListener('message', ({ data, source }) => {
+      Cypress?.primaryOriginCommunicator.onMessage({ data, source })
+    }, false)
   }
 
   start (config) {
@@ -486,7 +500,14 @@ export class EventManager {
       this.reporterBus.emit('reporter:log:state:changed', displayProps)
     })
 
-    Cypress.on('before:screenshot', (config, cb) => {
+    // TODO: MOVE BACK INTO useEventManager. Verify this works
+    const screenshotStore = useScreenshotStore()
+
+    const handleBeforeScreenshot = (config, cb) => {
+      if (config.appOnly) {
+        screenshotStore.setScreenshotting(true)
+      }
+
       const beforeThenCb = () => {
         this.localBus.emit('before:screenshot', config)
         cb()
@@ -505,11 +526,16 @@ export class EventManager {
       }
 
       if (!wait) beforeThenCb()
-    })
+    }
 
-    Cypress.on('after:screenshot', (config) => {
+    Cypress.on('before:screenshot', handleBeforeScreenshot)
+
+    const handleAfterScreenshot = (config) => {
+      screenshotStore.setScreenshotting(false)
       this.localBus.emit('after:screenshot', config)
-    })
+    }
+
+    Cypress.on('after:screenshot', handleAfterScreenshot)
 
     driverToReporterEvents.forEach((event) => {
       Cypress.on(event, (...args) => {
@@ -568,6 +594,90 @@ export class EventManager {
         this.studioRecorder.testFailed()
       }
     })
+
+    Cypress.on('test:before:run', (...args) => {
+      Cypress.primaryOriginCommunicator.toAllSpecBridges('test:before:run', ...args)
+    })
+
+    Cypress.on('test:before:run:async', (...args) => {
+      Cypress.primaryOriginCommunicator.toAllSpecBridges('test:before:run:async', ...args)
+    })
+
+    // Inform all spec bridges that the primary origin has begun to unload.
+    Cypress.on('window:before:unload', () => {
+      Cypress.primaryOriginCommunicator.toAllSpecBridges('before:unload')
+    })
+
+    Cypress.primaryOriginCommunicator.on('window:load', ({ url }, originPolicy) => {
+      // Sync stable if the expected origin has loaded.
+      // Only listen to window load events from the most recent secondary origin, This prevents nondeterminism in the case where we redirect to an already
+      // established spec bridge, but one that is not the current or next cy.origin command.
+      if (cy.state('latestActiveOriginPolicy') === originPolicy) {
+        // We remain in an anticipating state until either a load even happens or a timeout.
+        cy.state('autOrigin', cy.state('autOrigin', cors.getOriginPolicy(url)))
+        cy.isAnticipatingCrossOriginResponseFor(undefined)
+        cy.isStable(true, 'load')
+        // Prints out the newly loaded URL
+        Cypress.emit('internal:window:load', { type: 'cross:origin', url })
+        // Re-broadcast to any other specBridges.
+        Cypress.primaryOriginCommunicator.toAllSpecBridges('window:load', { url })
+      }
+    })
+
+    Cypress.primaryOriginCommunicator.on('before:unload', () => {
+      // We specifically don't call 'cy.isStable' here because we don't want to inject another load event.
+      // Unstable is unstable regardless of where it initiated from.
+      cy.state('isStable', false)
+      // Re-broadcast to any other specBridges.
+      Cypress.primaryOriginCommunicator.toAllSpecBridges('before:unload')
+    })
+
+    Cypress.primaryOriginCommunicator.on('expect:origin', (originPolicy) => {
+      this.localBus.emit('expect:origin', originPolicy)
+    })
+
+    Cypress.primaryOriginCommunicator.on('viewport:changed', (viewport, originPolicy) => {
+      const callback = () => {
+        Cypress.primaryOriginCommunicator.toSpecBridge(originPolicy, 'viewport:changed:end')
+      }
+
+      Cypress.primaryOriginCommunicator.emit('sync:viewport', viewport)
+      this.localBus.emit('viewport:changed', viewport, callback)
+    })
+
+    Cypress.primaryOriginCommunicator.on('before:screenshot', (config, originPolicy) => {
+      const callback = () => {
+        Cypress.primaryOriginCommunicator.toSpecBridge(originPolicy, 'before:screenshot:end')
+      }
+
+      handleBeforeScreenshot(config, callback)
+    })
+
+    Cypress.primaryOriginCommunicator.on('url:changed', ({ url }) => {
+      this.localBus.emit('url:changed', url)
+    })
+
+    Cypress.primaryOriginCommunicator.on('after:screenshot', handleAfterScreenshot)
+
+    const crossOriginLogs = {}
+
+    Cypress.primaryOriginCommunicator.on('log:added', (attrs) => {
+      // If the test is over and the user enters interactive snapshot mode, do not add cross origin logs to the test runner.
+      if (Cypress.state('test')?.final) return
+
+      // Create a new local log representation of the cross origin log.
+      // It will be attached to the current command.
+      // We also keep a reference to it to update it in the future.
+      crossOriginLogs[attrs.id] = Cypress.log(attrs)
+    })
+
+    Cypress.primaryOriginCommunicator.on('log:changed', (attrs) => {
+      // Retrieve the referenced log and update it.
+      const log = crossOriginLogs[attrs.id]
+
+      // this will trigger a log changed event for the log itself.
+      log?.set(attrs)
+    })
   }
 
   _runDriver (state) {
@@ -623,6 +733,7 @@ export class EventManager {
     // but we want to be aggressive here
     // and force GC early and often
     Cypress.removeAllListeners()
+    Cypress.primaryOriginCommunicator.removeAllListeners()
 
     this.localBus.emit('restart')
   }
@@ -680,6 +791,11 @@ export class EventManager {
     this.ws.emit('spec:changed', specFile)
   }
 
+  notifyCrossOriginBridgeReady (originPolicy) {
+    // Any multi-origin event appends the origin as the third parameter and we do the same here for this short circuit
+    Cypress.primaryOriginCommunicator.emit('bridge:ready', undefined, originPolicy)
+  }
+
   snapshotUnpinned () {
     this._unpinSnapshot()
     this._hideSnapshot()
diff --git a/packages/app/src/runner/iframe-model.ts b/packages/app/src/runner/iframe-model.ts
index b20c0106395c..9ce18a998a51 100644
--- a/packages/app/src/runner/iframe-model.ts
+++ b/packages/app/src/runner/iframe-model.ts
@@ -34,6 +34,7 @@ export class IframeModel {
     private detachDom: () => AutSnapshot,
     private restoreDom: (snapshot: any) => void,
     private highlightEl: ({ body }: any, opts: any) => void,
+    private isAUTSameOrigin: () => boolean,
     private eventManager: EventManager,
     private studio: {
       selectorPlaygroundModel: any
@@ -247,6 +248,35 @@ export class IframeModel {
 
   _storeOriginalState () {
     const autStore = useAutStore()
+
+    if (!this.isAUTSameOrigin()) {
+      const Cypress = this.eventManager.getCypress()
+
+      /**
+       * This only happens if the AUT ends in a cross origin state that the primary doesn't have access to.
+       * In this case, the final snapshot request from the primary is sent out to the cross-origin spec bridges.
+       * The spec bridge that matches the origin policy will take a snapshot and send it back to the primary for the runner to store in originalState.
+       */
+      Cypress.primaryOriginCommunicator.toAllSpecBridges('generate:final:snapshot', autStore.url || '')
+      Cypress.primaryOriginCommunicator.once('final:snapshot:generated', (finalSnapshot) => {
+        // todo(lachlan): UNIFY-1318 - find correct default, if they are even needed, for required fields ($el, coords...)
+        // @ts-ignore
+        this.originalState = {
+          body: finalSnapshot.body,
+          htmlAttrs: finalSnapshot.htmlAttrs,
+          snapshot: finalSnapshot,
+          snapshots: [],
+          url: autStore.url || '',
+          // TODO: use same attr for both runner and runner-ct states.
+          // these refer to the same thing - the viewport dimensions.
+          viewportWidth: autStore.viewportWidth,
+          viewportHeight: autStore.viewportHeight,
+        }
+      })
+
+      return
+    }
+
     const finalSnapshot = this.detachDom()
 
     if (!finalSnapshot) return
diff --git a/packages/app/src/runner/index.ts b/packages/app/src/runner/index.ts
index 05d4b34dc099..098b68c7e960 100644
--- a/packages/app/src/runner/index.ts
+++ b/packages/app/src/runner/index.ts
@@ -100,6 +100,7 @@ function createIframeModel () {
     autIframe.detachDom,
     autIframe.restoreDom,
     autIframe.highlightEl,
+    autIframe.doesAUTMatchTopOriginPolicy,
     getEventManager(),
     {
       recorder: getEventManager().studioRecorder,
@@ -186,6 +187,29 @@ export async function teardown () {
   isTorndown = true
 }
 
+/**
+ * Add a cross origin iframe for cy.origin support
+ */
+export function addCrossOriginIframe (location) {
+  const id = `Spec Bridge: ${location.originPolicy}`
+
+  // if it already exists, don't add another one
+  if (document.getElementById(id)) {
+    getEventManager().notifyCrossOriginBridgeReady(location.originPolicy)
+
+    return
+  }
+
+  addIframe({
+    id,
+    // the cross origin iframe is added to the document body instead of the
+    // container since it needs to match the size of the top window for screenshots
+    $container: document.body,
+    className: 'spec-bridge-iframe',
+    src: `${location.originPolicy}/${getRunnerConfigFromWindow().namespace}/spec-bridge-iframes`,
+  })
+}
+
 /**
  * Set up a spec by creating a fresh AUT and initializing
  * Cypress on it.
@@ -229,15 +253,17 @@ function runSpecCT (spec: SpecFile) {
 }
 
 /**
- * Create a Spec IFrame. Used for loading the spec to execute in E2E
+ * Create an IFrame. If the Iframe is the spec iframe,
+ * this function is used for loading the spec to execute in E2E
  */
-function createSpecIFrame (specSrc: string) {
-  const el = document.createElement('iframe')
+function addIframe ({ $container, id, src, className }) {
+  const $addedIframe = document.createElement('iframe')
 
-  el.id = `Your Spec: '${specSrc}'`,
-  el.className = 'spec-iframe'
+  $addedIframe.id = id,
+  $addedIframe.className = className
 
-  return el
+  $container.appendChild($addedIframe)
+  $addedIframe.setAttribute('src', src)
 }
 
 // this is how the Cypress driver knows which spec to run.
@@ -283,17 +309,30 @@ function runSpecE2E (spec: SpecFile) {
 
   const $autIframe: JQuery<HTMLIFrameElement> = autIframe.create().appendTo($container)
 
+  // Remove the spec bridge iframe
+  document.querySelectorAll('iframe.spec-bridge-iframe').forEach((el) => {
+    el.remove()
+  })
+
   autIframe.showInitialBlankContentsE2E()
 
   // create Spec IFrame
   const specSrc = getSpecUrl(config.namespace, encodeURIComponent(spec.relative))
 
-  const $specIframe = createSpecIFrame(specSrc)
+  // FIXME: BILL Determine where to call client with to force browser repaint
+  /**
+   * call the clientWidth to force the browser to repaint for viewport changes
+   * otherwise firefox may fail when changing the viewport in between origins
+   * this.refs.container.clientWidth
+   */
 
   // append to document, so the iframe will execute the spec
-  $container.appendChild($specIframe)
-
-  $specIframe.src = specSrc
+  addIframe({
+    $container,
+    src: specSrc,
+    id: `Your Spec: '${specSrc}'`,
+    className: 'spec-iframe',
+  })
 
   // initialize Cypress (driver) with the AUT!
   getEventManager().initialize($autIframe, config)
diff --git a/packages/app/src/runner/useEventManager.ts b/packages/app/src/runner/useEventManager.ts
index 6058ff195eb3..a6db2103031b 100644
--- a/packages/app/src/runner/useEventManager.ts
+++ b/packages/app/src/runner/useEventManager.ts
@@ -1,7 +1,6 @@
 import { watch } from 'vue'
-import { getAutIframeModel, getEventManager, UnifiedRunnerAPI } from '.'
+import { addCrossOriginIframe, getAutIframeModel, getEventManager, UnifiedRunnerAPI } from '.'
 import { useAutStore, useSpecStore } from '../store'
-import { useScreenshotStore } from '../store/screenshot-store'
 import { empty, getReporterElement, getRunnerElement } from './utils'
 
 export function useEventManager () {
@@ -20,26 +19,11 @@ export function useEventManager () {
   }
 
   function initializeRunnerLifecycleEvents () {
-    const screenshotStore = useScreenshotStore()
-
     // these events do not use GraphQL
     eventManager.on('restart', () => {
       runSpec()
     })
 
-    eventManager.on('before:screenshot', (payload) => {
-      if (payload.appOnly) {
-        screenshotStore.setScreenshotting(true)
-      }
-
-      getAutIframeModel().beforeScreenshot(payload)
-    })
-
-    eventManager.on('after:screenshot', (config) => {
-      screenshotStore.setScreenshotting(false)
-      getAutIframeModel().afterScreenshot(config)
-    })
-
     eventManager.on('script:error', (err) => {
       autStore.setScriptError(err)
     })
@@ -51,6 +35,8 @@ export function useEventManager () {
     eventManager.on('visit:blank', ({ type }) => {
       getAutIframeModel().visitBlank({ type })
     })
+
+    eventManager.on('expect:origin', addCrossOriginIframe)
   }
 
   const startSpecWatcher = () => {
diff --git a/packages/config/__snapshots__/index.spec.ts.js b/packages/config/__snapshots__/index.spec.ts.js
index 89ed6dcf5ba3..e159dc537a58 100644
--- a/packages/config/__snapshots__/index.spec.ts.js
+++ b/packages/config/__snapshots__/index.spec.ts.js
@@ -1,10 +1,11 @@
-exports['src/index .getBreakingKeys returns list of breaking config keys 1'] = [
+exports['config/src/index .getBreakingKeys returns list of breaking config keys 1'] = [
   "blacklistHosts",
   "componentFolder",
   "experimentalComponentTesting",
   "experimentalGetCookiesSameSite",
   "experimentalNetworkStubbing",
   "experimentalRunEvents",
+  "experimentalSessionSupport",
   "experimentalShadowDomSupport",
   "experimentalStudio",
   "firefoxGcInterval",
@@ -16,7 +17,7 @@ exports['src/index .getBreakingKeys returns list of breaking config keys 1'] = [
   "testFiles"
 ]
 
-exports['src/index .getDefaultValues returns list of public config keys 1'] = {
+exports['config/src/index .getDefaultValues returns list of public config keys 1'] = {
   "animationDistanceThreshold": 5,
   "baseUrl": null,
   "blockHosts": null,
@@ -35,7 +36,7 @@ exports['src/index .getDefaultValues returns list of public config keys 1'] = {
   "execTimeout": 60000,
   "experimentalFetchPolyfill": false,
   "experimentalInteractiveRunEvents": false,
-  "experimentalSessionSupport": false,
+  "experimentalSessionAndOrigin": false,
   "experimentalSourceRewriting": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
@@ -93,68 +94,7 @@ exports['src/index .getDefaultValues returns list of public config keys 1'] = {
   "xhrRoute": "/xhrs/"
 }
 
-exports['src/index .getPublicConfigKeys returns list of public config keys 1'] = [
-  "animationDistanceThreshold",
-  "arch",
-  "baseUrl",
-  "blockHosts",
-  "chromeWebSecurity",
-  "clientCertificates",
-  "component",
-  "defaultCommandTimeout",
-  "downloadsFolder",
-  "e2e",
-  "env",
-  "execTimeout",
-  "experimentalFetchPolyfill",
-  "experimentalInteractiveRunEvents",
-  "experimentalSessionSupport",
-  "experimentalSourceRewriting",
-  "fileServerFolder",
-  "fixturesFolder",
-  "excludeSpecPattern",
-  "includeShadowDom",
-  "keystrokeDelay",
-  "modifyObstructiveCode",
-  "nodeVersion",
-  "numTestsKeptInMemory",
-  "platform",
-  "pageLoadTimeout",
-  "port",
-  "projectId",
-  "redirectionLimit",
-  "reporter",
-  "reporterOptions",
-  "requestTimeout",
-  "resolvedNodePath",
-  "resolvedNodeVersion",
-  "responseTimeout",
-  "retries",
-  "screenshotOnRunFailure",
-  "screenshotsFolder",
-  "slowTestThreshold",
-  "scrollBehavior",
-  "supportFile",
-  "supportFolder",
-  "taskTimeout",
-  "trashAssetsBeforeRuns",
-  "userAgent",
-  "video",
-  "videoCompression",
-  "videosFolder",
-  "videoUploadOnPasses",
-  "viewportHeight",
-  "viewportWidth",
-  "waitForAnimations",
-  "watchForFileChanges",
-  "browsers",
-  "hosts",
-  "isInteractive",
-  "modifyObstructiveCode",
-  "specPattern"
-]
-
-exports['src/index .getDefaultValues returns list of public config keys for selected testing type 1'] = {
+exports['config/src/index .getDefaultValues returns list of public config keys for selected testing type 1'] = {
   "animationDistanceThreshold": 5,
   "baseUrl": null,
   "blockHosts": null,
@@ -173,7 +113,7 @@ exports['src/index .getDefaultValues returns list of public config keys for sele
   "execTimeout": 60000,
   "experimentalFetchPolyfill": false,
   "experimentalInteractiveRunEvents": false,
-  "experimentalSessionSupport": false,
+  "experimentalSessionAndOrigin": false,
   "experimentalSourceRewriting": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
@@ -231,3 +171,64 @@ exports['src/index .getDefaultValues returns list of public config keys for sele
   "xhrRoute": "/xhrs/",
   "specPattern": "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"
 }
+
+exports['config/src/index .getPublicConfigKeys returns list of public config keys 1'] = [
+  "animationDistanceThreshold",
+  "arch",
+  "baseUrl",
+  "blockHosts",
+  "chromeWebSecurity",
+  "clientCertificates",
+  "component",
+  "defaultCommandTimeout",
+  "downloadsFolder",
+  "e2e",
+  "env",
+  "execTimeout",
+  "experimentalFetchPolyfill",
+  "experimentalInteractiveRunEvents",
+  "experimentalSessionAndOrigin",
+  "experimentalSourceRewriting",
+  "fileServerFolder",
+  "fixturesFolder",
+  "excludeSpecPattern",
+  "includeShadowDom",
+  "keystrokeDelay",
+  "modifyObstructiveCode",
+  "nodeVersion",
+  "numTestsKeptInMemory",
+  "platform",
+  "pageLoadTimeout",
+  "port",
+  "projectId",
+  "redirectionLimit",
+  "reporter",
+  "reporterOptions",
+  "requestTimeout",
+  "resolvedNodePath",
+  "resolvedNodeVersion",
+  "responseTimeout",
+  "retries",
+  "screenshotOnRunFailure",
+  "screenshotsFolder",
+  "slowTestThreshold",
+  "scrollBehavior",
+  "supportFile",
+  "supportFolder",
+  "taskTimeout",
+  "trashAssetsBeforeRuns",
+  "userAgent",
+  "video",
+  "videoCompression",
+  "videosFolder",
+  "videoUploadOnPasses",
+  "viewportHeight",
+  "viewportWidth",
+  "waitForAnimations",
+  "watchForFileChanges",
+  "browsers",
+  "hosts",
+  "isInteractive",
+  "modifyObstructiveCode",
+  "specPattern"
+]
diff --git a/packages/config/__snapshots__/validation.spec.ts.js b/packages/config/__snapshots__/validation.spec.ts.js
index 1b3d0e62bfce..dfa2c276f143 100644
--- a/packages/config/__snapshots__/validation.spec.ts.js
+++ b/packages/config/__snapshots__/validation.spec.ts.js
@@ -1,14 +1,3 @@
-exports['src/validation .isValidClientCertificatesSet returns error message for certs not passed as an array array 1'] = {
-  "key": "mockConfigKey",
-  "value": "1",
-  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
-}
-
-exports['src/validation .isValidClientCertificatesSet returns error message for certs object without url 1'] = {
-  "key": "clientCertificates[0].url",
-  "type": "a URL matcher"
-}
-
 exports['missing https protocol'] = {
   "key": "clientCertificates[0].url",
   "value": "http://url.com",
@@ -21,7 +10,111 @@ exports['invalid url'] = {
   "type": "a valid URL"
 }
 
-exports['src/validation .isValidBrowser passes valid browsers and forms error messages for invalid ones isValidBrowser 1'] = {
+exports['undefined browsers'] = `
+Missing browsers list
+`
+
+exports['empty list of browsers'] = `
+Expected at least one browser
+`
+
+exports['browsers list with a string'] = {
+  "key": "name",
+  "value": "foo",
+  "type": "a non-empty string",
+  "list": "browsers"
+}
+
+exports['invalid retry value'] = {
+  "key": "mockConfigKey",
+  "value": "1",
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}
+
+exports['invalid retry object'] = {
+  "key": "mockConfigKey",
+  "value": {
+    "fakeMode": 1
+  },
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}
+
+exports['not qualified url'] = {
+  "key": "mockConfigKey",
+  "value": "url.com",
+  "type": "a fully qualified URL (starting with `http://` or `https://`)"
+}
+
+exports['empty string'] = {
+  "key": "mockConfigKey",
+  "value": "",
+  "type": "a fully qualified URL (starting with `http://` or `https://`)"
+}
+
+exports['not string or array'] = {
+  "key": "mockConfigKey",
+  "value": null,
+  "type": "a string or an array of strings"
+}
+
+exports['array of non-strings'] = {
+  "key": "mockConfigKey",
+  "value": [
+    1,
+    2,
+    3
+  ],
+  "type": "a string or an array of strings"
+}
+
+exports['not one of the strings error message'] = {
+  "key": "test",
+  "value": "nope",
+  "type": "one of these values: \"foo\", \"bar\""
+}
+
+exports['number instead of string'] = {
+  "key": "test",
+  "value": 42,
+  "type": "one of these values: \"foo\", \"bar\""
+}
+
+exports['null instead of string'] = {
+  "key": "test",
+  "value": null,
+  "type": "one of these values: \"foo\", \"bar\""
+}
+
+exports['not one of the numbers error message'] = {
+  "key": "test",
+  "value": 4,
+  "type": "one of these values: 1, 2, 3"
+}
+
+exports['string instead of a number'] = {
+  "key": "test",
+  "value": "foo",
+  "type": "one of these values: 1, 2, 3"
+}
+
+exports['null instead of a number'] = {
+  "key": "test",
+  "value": null,
+  "type": "one of these values: 1, 2, 3"
+}
+
+exports['config/src/validation .isValidClientCertificatesSet returns error message for certs not passed as an array array 1'] = {
+  "key": "mockConfigKey",
+  "value": "1",
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}
+
+exports['config/src/validation .isValidClientCertificatesSet returns error message for certs object without url 1'] = {
+  "key": "clientCertificates[0].url",
+  "type": "a URL matcher"
+}
+
+exports['config/src/validation .isValidBrowser passes valid browsers and forms error messages for invalid ones isValidBrowser 1'] = {
   "name": "isValidBrowser",
   "behavior": [
     {
@@ -90,137 +183,44 @@ exports['src/validation .isValidBrowser passes valid browsers and forms error me
   ]
 }
 
-exports['undefined browsers'] = `
-Missing browsers list
-`
-
-exports['empty list of browsers'] = `
-Expected at least one browser
-`
-
-exports['browsers list with a string'] = {
-  "key": "name",
-  "value": "foo",
-  "type": "a non-empty string",
-  "list": "browsers"
-}
-
-exports['invalid retry value'] = {
-  "key": "mockConfigKey",
-  "value": "1",
-  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
-}
-
-exports['invalid retry object'] = {
-  "key": "mockConfigKey",
-  "value": {
-    "fakeMode": 1
-  },
-  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
-}
-
-exports['src/validation .isPlainObject returns error message when value is a not an object 1'] = {
+exports['config/src/validation .isPlainObject returns error message when value is a not an object 1'] = {
   "key": "mockConfigKey",
   "value": 1,
   "type": "a plain object"
 }
 
-exports['src/validation .isNumber returns error message when value is a not a number 1'] = {
+exports['config/src/validation .isNumber returns error message when value is a not a number 1'] = {
   "key": "mockConfigKey",
   "value": "string",
   "type": "a number"
 }
 
-exports['src/validation .isNumberOrFalse returns error message when value is a not number or false 1'] = {
+exports['config/src/validation .isNumberOrFalse returns error message when value is a not number or false 1'] = {
   "key": "mockConfigKey",
   "value": null,
   "type": "a number or false"
 }
 
-exports['not qualified url'] = {
-  "key": "mockConfigKey",
-  "value": "url.com",
-  "type": "a fully qualified URL (starting with `http://` or `https://`)"
-}
-
-exports['empty string'] = {
-  "key": "mockConfigKey",
-  "value": "",
-  "type": "a fully qualified URL (starting with `http://` or `https://`)"
-}
-
-exports['src/validation .isBoolean returns error message when value is a not a string 1'] = {
+exports['config/src/validation .isBoolean returns error message when value is a not a string 1'] = {
   "key": "mockConfigKey",
   "value": 1,
   "type": "a string"
 }
 
-exports['src/validation .isString returns error message when value is a not a string 1'] = {
+exports['config/src/validation .isString returns error message when value is a not a string 1'] = {
   "key": "mockConfigKey",
   "value": 1,
   "type": "a string"
 }
 
-exports['src/validation .isArray returns error message when value is a non-array 1'] = {
+exports['config/src/validation .isArray returns error message when value is a non-array 1'] = {
   "key": "mockConfigKey",
   "value": 1,
   "type": "an array"
 }
 
-exports['src/validation .isStringOrFalse returns error message when value is neither string nor false 1'] = {
+exports['config/src/validation .isStringOrFalse returns error message when value is neither string nor false 1'] = {
   "key": "mockConfigKey",
   "value": null,
   "type": "a string or false"
 }
-
-exports['not string or array'] = {
-  "key": "mockConfigKey",
-  "value": null,
-  "type": "a string or an array of strings"
-}
-
-exports['array of non-strings'] = {
-  "key": "mockConfigKey",
-  "value": [
-    1,
-    2,
-    3
-  ],
-  "type": "a string or an array of strings"
-}
-
-exports['not one of the strings error message'] = {
-  "key": "test",
-  "value": "nope",
-  "type": "one of these values: \"foo\", \"bar\""
-}
-
-exports['number instead of string'] = {
-  "key": "test",
-  "value": 42,
-  "type": "one of these values: \"foo\", \"bar\""
-}
-
-exports['null instead of string'] = {
-  "key": "test",
-  "value": null,
-  "type": "one of these values: \"foo\", \"bar\""
-}
-
-exports['not one of the numbers error message'] = {
-  "key": "test",
-  "value": 4,
-  "type": "one of these values: 1, 2, 3"
-}
-
-exports['string instead of a number'] = {
-  "key": "test",
-  "value": "foo",
-  "type": "one of these values: 1, 2, 3"
-}
-
-exports['null instead of a number'] = {
-  "key": "test",
-  "value": null,
-  "type": "one of these values: 1, 2, 3"
-}
diff --git a/packages/config/src/options.ts b/packages/config/src/options.ts
index 194491215f23..48e9b98416fd 100644
--- a/packages/config/src/options.ts
+++ b/packages/config/src/options.ts
@@ -17,6 +17,7 @@ export type BreakingOptionErrorKey =
   | 'EXPERIMENTAL_SAMESITE_REMOVED'
   | 'EXPERIMENTAL_NETWORK_STUBBING_REMOVED'
   | 'EXPERIMENTAL_RUN_EVENTS_REMOVED'
+  | 'EXPERIMENTAL_SESSION_SUPPORT_REMOVED'
   | 'EXPERIMENTAL_SHADOW_DOM_REMOVED'
   | 'EXPERIMENTAL_STUDIO_REMOVED'
   | 'FIREFOX_GC_INTERVAL_REMOVED'
@@ -204,7 +205,7 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     canUpdateDuringTestTime: false,
     requireRestartOnChange: 'server',
   }, {
-    name: 'experimentalSessionSupport',
+    name: 'experimentalSessionAndOrigin',
     defaultValue: false,
     validation: validate.isBoolean,
     isExperimental: true,
@@ -582,6 +583,10 @@ export const breakingOptions: Array<BreakingOption> = [
     name: 'experimentalRunEvents',
     errorKey: 'EXPERIMENTAL_RUN_EVENTS_REMOVED',
     isWarning: true,
+  }, {
+    name: 'experimentalSessionSupport',
+    errorKey: 'EXPERIMENTAL_SESSION_SUPPORT_REMOVED',
+    isWarning: true,
   }, {
     name: 'experimentalShadowDomSupport',
     errorKey: 'EXPERIMENTAL_SHADOW_DOM_REMOVED',
diff --git a/packages/config/test/index.spec.ts b/packages/config/test/index.spec.ts
index 8681d37520ac..e349ced4b585 100644
--- a/packages/config/test/index.spec.ts
+++ b/packages/config/test/index.spec.ts
@@ -8,7 +8,7 @@ import * as configUtil from '../src/index'
 chai.use(sinonChai)
 const { expect } = chai
 
-describe('src/index', () => {
+describe('config/src/index', () => {
   describe('.allowed', () => {
     it('returns filter config only containing allowed keys', () => {
       const keys = configUtil.allowed({
diff --git a/packages/config/test/validation.spec.ts b/packages/config/test/validation.spec.ts
index fec03a2a9a93..fc7b22e5eb31 100644
--- a/packages/config/test/validation.spec.ts
+++ b/packages/config/test/validation.spec.ts
@@ -3,7 +3,7 @@ import { expect } from 'chai'
 
 import * as validation from '../src/validation'
 
-describe('src/validation', () => {
+describe('config/src/validation', () => {
   const mockKey = 'mockConfigKey'
 
   describe('.isValidClientCertificatesSet', () => {
diff --git a/packages/data-context/src/actions/ProjectActions.ts b/packages/data-context/src/actions/ProjectActions.ts
index e6781ef5147b..65baa19c45fa 100644
--- a/packages/data-context/src/actions/ProjectActions.ts
+++ b/packages/data-context/src/actions/ProjectActions.ts
@@ -30,6 +30,7 @@ export interface ProjectApiShape {
   clearAllProjectPreferences(): Promise<unknown>
   closeActiveProject(shouldCloseBrowser?: boolean): Promise<unknown>
   getConfig(): ReceivedCypressOptions | undefined
+  getRemoteStates(): { reset(): void, getPrimary(): Cypress.RemoteState } | undefined
   getCurrentBrowser: () => Cypress.Browser | undefined
   getCurrentProjectSavedState(): {} | undefined
   setPromptShown(slug: string): void
diff --git a/packages/data-context/src/data/ProjectLifecycleManager.ts b/packages/data-context/src/data/ProjectLifecycleManager.ts
index 1fdc9c01f189..86fbef8b0d42 100644
--- a/packages/data-context/src/data/ProjectLifecycleManager.ts
+++ b/packages/data-context/src/data/ProjectLifecycleManager.ts
@@ -321,6 +321,10 @@ export class ProjectLifecycleManager {
       return
     }
 
+    // Make sure remote states in the server are reset when the project is reloaded.
+    // TODO: maybe we should also reset the server state here as well?
+    this.ctx._apis.projectApi.getRemoteStates()?.reset()
+
     this._configManager.resetLoadingState()
 
     // Emit here so that the user gets the impression that we're loading rather than waiting for a full refresh of the config for an update
diff --git a/packages/data-context/src/sources/HtmlDataSource.ts b/packages/data-context/src/sources/HtmlDataSource.ts
index 5856509ec2a4..bb5daa741ad5 100644
--- a/packages/data-context/src/sources/HtmlDataSource.ts
+++ b/packages/data-context/src/sources/HtmlDataSource.ts
@@ -75,6 +75,16 @@ export class HtmlDataSource {
       // Error getting config, we will show an error screen when we render the page
     }
 
+    // for project-base config, the remote state we wish to convey should be whatever top is set to, also known as the primary domain
+    // whenever the app is served/re-served
+    if (this.ctx.coreData.currentTestingType === 'e2e') {
+      const remoteStates = this.ctx._apis.projectApi.getRemoteStates()
+
+      if (remoteStates) {
+        cfg.remote = remoteStates.getPrimary()
+      }
+    }
+
     cfg.browser = this.ctx._apis.projectApi.getCurrentBrowser()
 
     return {
diff --git a/packages/data-context/src/sources/migration/legacyOptions.ts b/packages/data-context/src/sources/migration/legacyOptions.ts
index 95d056e8a5ce..bb826f5d8d15 100644
--- a/packages/data-context/src/sources/migration/legacyOptions.ts
+++ b/packages/data-context/src/sources/migration/legacyOptions.ts
@@ -96,7 +96,7 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     isExperimental: true,
     canUpdateDuringTestTime: false,
   }, {
-    name: 'experimentalSessionSupport',
+    name: 'experimentalSessionAndOrigin',
     defaultValue: false,
     isExperimental: true,
     canUpdateDuringTestTime: true,
diff --git a/packages/driver/README.md b/packages/driver/README.md
index 271cc21a0a9b..be0eb98b900c 100644
--- a/packages/driver/README.md
+++ b/packages/driver/README.md
@@ -51,6 +51,10 @@ Note: you may need to enable "Verbose" or "Debug" log levels inside the browser'
 
 Note: when creating a patch, make sure there is no `package-lock.json` file! Also rename the patch to have ".dev.patch" extension.
 
+## Cross-origin Testing
+
+Working on cross-origin testing or reviewing a PR related to it? Check out the [Cross-origin Testing Technical Overview](./cross-origin-testing.md).
+
 <!-- ## Catalog of Events
 
 TODO: this data is accurate but also somewhat out of date.
diff --git a/packages/driver/cross-origin-testing.md b/packages/driver/cross-origin-testing.md
new file mode 100644
index 000000000000..fbceefbf1621
--- /dev/null
+++ b/packages/driver/cross-origin-testing.md
@@ -0,0 +1,151 @@
+# Cross-origin Testing Technical Overview
+
+The goal of this document is to give a technical overview of the architecture behind the **cy.origin()** command, which enables cross-origin testing in Cypress.
+
+## Definitions
+
+See [Node.js’s URL doc](https://nodejs.org/api/url.html#url-strings-and-url-objects) for a handy breakdown of URL parts
+
+- **domain**: A hostname without the subdomain. (e.g. `example.com`, `example.co.uk`, `localhost`)
+- **origin**: The combination of the protocol, hostname, and port of a URL. For the purposes of Cypress, the subdomain is irrelevant. (e.g. `http://example.com:3500`)
+- **top**: The main window/frame of the browser
+- **primary origin**: The origin that top is on
+- **secondary origin**: Any origin that is not the primary origin
+- **primary driver**: The Cypress driver that run in **top** on the primary origin
+- **secondary driver**: Any Cypress driver that run in a **spec bridge**, interacting with a secondary origin
+
+## Frame architecture (single origin)
+
+When testing a single origin, all 3 frames are loaded on that origin.
+
+Components:
+
+```mermaid
+graph TD;
+    top["top frame: domain1.com"]-->specFrame["spec frame: domain1.com"];
+    top-->aut["AUT frame: domain1.com"];
+```
+
+**top** communicates directly and synchronously with the **spec frame** and the **AUT frame**. The **spec frame** runs the spec, which uses the driver to run commands and interact with the **AUT**.
+
+In a single test (`it` + hooks), the **AUT** must remain on the same origin or a cross-origin error will occur, as **top** can no longer interact with the **AUT** in that circumstance. Different tests can visit different origins. In this case, we change **top** to the new origin, which also runs the **spec frame** on that origin. This navigation causes the spec to run again. We skip any already-run tests and resume.
+
+## Frame architecture (multiple origins)
+
+Let’s say the primary origin is `domain1.com` and the secondary origin is `domain2.com`. The test has visited `domain1.com` and then issued a click that caused the **AUT** to navigate to `domain2.com`.
+
+Since the **AUT** is no longer on the same origin as **top**, they can no longer communicate synchronously. In order to facilitate cross-origin testing, we create another iframe we call the **spec bridge**. It exists as a sibling to the **AUT** (meaning they share the same parent frame, not to be confused with a DOM sibling). It contains a version of the driver tailored to cross-origin testing, with a different entry-point to the primary driver, but containing mostly the same code.
+
+The **spec bridge** is run on `domain2.com` to match the **AUT**. This and being a sibling allows the spec bridge to communicate directly with the **AUT**. The **spec bridge** communicates *asynchronously* with **top** via the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
+
+The **spec bridge** remains in the DOM from the moment it’s created until the browser is refreshed or closed, the same as the the **spec frame** and **AUT**.
+
+Here’s what the components look like now:
+
+```mermaid
+graph TD;
+    top["top frame: domain1.com"]-->specFrame["spec frame: domain1.com"];
+    top-->aut["AUT frame: domain2.com"];
+    top-->specBridge["spec bridge: domain2.com"];
+```
+
+## cy.origin()
+
+Refer to the [public documentation on cy.origin()](https://on.cypress.io/origin) for all details on the user-facing API.
+
+The main responsibilities of **cy.origin()** are to create the **spec bridge** for the specified origin and facilitate communication between the primary driver and the secondary driver in that **spec bridge**.
+
+## Cross-origin communication
+
+Communication between the **primary driver** and any **secondary drivers** occurs through the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).  We abstract over the postMessage API with **cross-origin communicators**.
+
+A **PrimaryOriginCommunicator** instance exists in the **primary driver** which receives messages from any **secondary drivers** and can send messages to either a single **secondary driver** for a particular origin or to all **secondary drivers** that currently exist.
+
+Each **secondary driver** has a **SpecBridgeCommunicator** instance that can receive from and send messages to the **primary driver**.
+
+One of the main responsibilities of the communicators is to prepare/preprocess data for serialization. All data going over the postMessage API gets serialized by the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). In order to either prevent or catch serialization errors and ensure all relevant data is properly transmitted, we preprocess data such as the subject, logs, snapshots, and errors themselves.
+
+## Automation / Proxy
+
+Browser automation APIs and the proxy play a small but critical role in facilitating cross-origin testing.
+
+The proxy intercepts http requests from all sources. In order to detect cross-origin navigation of **AUT**, it’s necessary to know that a request came specifically from the **AUT frame** and not **top**, a nested iframe, or elsewhere. To achieve this, we use the browser automation APIs to add a `X-Cypress-Is-AUT-Frame` header to any requests from the AUT.
+
+Allowing the proxy to know if a request is from the **AUT** enables us to do two things when it recognizes that it’s not the **primary origin**:
+
+- Delay the response. This allows us to communicate with the **primary driver** to set up the **spec bridge** and run the user’s callback function via **cy.origin()**. Then the driver notifies the proxy that it can allow the response through. This enables users to listen to the `window:before:load` event in the callback function, since the page will not load until after any such listeners are set up.
+- Inject code into the request that’s tailored to cross-origin testing.
+
+### Cross-origin navigation timing
+
+It’s possible for the user’s test to navigate to a different origin in two different ways.
+
+1. An action causes the navigation (click, submit, etc). In this case, delaying the response is necessary for the aforementioned reasons.
+2. The user explicitly navigates via **cy.visit()**. In this case, it’s not necessary to delay the response, since the navigation has not happened yet, and all setup can be done before the navigation occurs.
+
+## State syncing
+
+Since each **spec bridge / secondary driver** is a new instance and operates in its own execution context, all state held by the driver has to be manually synced. The need to serialize data between drivers means that not all data *can* be synced, so some rules have been enacted to maintain consistency.
+
+### Cypress.*.defaults()
+
+All **defaults()** (e.g. **Cypress.Screenshot.defaults()**) methods do not sync their data between origins. This is because callback functions cannot be properly serialized. We could shuttle message back-and-forth to call the callbacks in the **primary origin**, but then certain arguments like DOM elements could not be serialized when calling those callbacks. While some data accepted by **defaults()** methods are serializable, we feel it’s better to have clear, consistent behavior and not sync any data.
+
+This means that any global state set up by **defaults()** methods exists independently in each origin. Since a **spec bridge** persists throughout the spec run once it’s created, that global state persists as well between **cy.origin()** calls for the same origin.
+
+The consequence of this is that users will need to call any given **defaults()** method again inside the **cy.origin()** callback if they wish to have the same behavior in that **secondary origin** as in the **primary origin**.
+
+### Cypress.config() / Cypress.env()
+
+Config and env values are synced both ways between **primary** and **secondary** origins. All built-in config values are inherently serializable since they are passed between the server and the browser.
+
+It’s possible for users to set custom key/value pairs where the value could be unserializable. In that case, the value is not synced and it behaves similar to state set by **defaults()** methods, where it persists only in the execution context of that origin.
+
+The config and env values are synced into the **secondary driver** before the **cy.origin()** callback is called. They are synced back to the **primary driver** when the callback and any commands run inside of it are finished.
+
+### Internal state
+
+Various internal state values (used throughout the codebase via `Cypress.state()`, `cy.state()` and `state()`) are sent from the **primary driver** into the **secondary driver** before the **cy.origin()** callback is called. These include values such the viewport width, viewport height, and the stability of the page.
+
+A read-only version of the `runnable` is also sent. While the actual `runnable` instance is a singleton only used by the **primary driver**, certain stateful values it holds are necessary for various parts of the **secondary driver** to function correctly.
+
+The full, up-to-date list of state values sent can be found in the **cy.origin()** implementation.
+
+## Events
+
+All event listeners are only bound to the execution context of the origin in which they are defined. Events occurring in one origin do not trigger event handlers in a different origin. This is because some event handlers accept arguments that are not serializable. Even though some event handlers do rely on unserializable arguments, for consistency’s sake, events are bound to their origin.
+
+Similar to **defaults()** methods needing to be called again, some events may need to be rebound within the **cy.origin()** callback in order to achieve the same behavior in that **secondary origin** as in the **primary origin**.
+
+## Cookies
+
+Having the **AUT** on a different origin than **top** causes issues with cookies being set for the origin in the **AUT**. Cookies have a **SameSite** attribute that can be set to **Strict**, **Lax**, ****or **None**. If **Strict** or **Lax**, cookies will not be set when the site is in an iframe on a different origin from the **top frame**.
+
+In order to counteract this, we currently coerce the **SameSite** value of all cross-origin cookies to be **None**. This is not particularly ideal, since it could lead to unexpected behavior if cookies are set even though they should not be.
+
+There are plans to change the implementation so that coercing the cookies is not necessary, so this behavior will change, but cookies will still need special handling for them to work as expected with a site whose origin is secondary.
+
+## Unsupported APIs
+
+Certain APIs are currently not supported in the **cy.origin()** callback. Depending on the API, we may or may not implement support for them in the future.
+
+### cy.origin()
+
+Nesting **cy.origin()** inside the callback is not currently not supported, but support will likely be added in the future. In most use-cases, the desired functionality of nesting it can be achieved calling **cy.origin()** back-to-back at the top level of the test.
+
+### cy.session() / Cypress.session.*
+
+**cy.session()** and related APIs are likely not necessary inside the callback and should be used at the top-level of the test instead of in the **cy.origin()** callback. However, if there are use-cases discovered where it’s necessary, we may implement support for it.
+
+### cy.intercept()
+
+We will likely add support for **cy.intercept()** within the **cy.origin()** callback in the future.
+
+### Deprecated commands / methods
+
+All deprecated APIs are not supported in the **cy.origin()** callback and we do not plan to ever add support for them. If a user attempts to use one, we throw an error that points them to the preferred API that superseded it. The following are deprecated APIs that are not supported:
+
+- **cy.route()**: Superseded by **cy.intercept()**
+- **cy.server()**: Superseded by **cy.intercept()**
+- **Cypress.Server.defaults()**: Superseded by **cy.intercept()**
+- **Cypress.Cookies.preserveOnce()**: Superseded by sessions
diff --git a/packages/driver/cypress.config.ts b/packages/driver/cypress.config.ts
index faa4279bd1c7..a024f569481c 100644
--- a/packages/driver/cypress.config.ts
+++ b/packages/driver/cypress.config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   'projectId': 'ypt4pf',
   'hosts': {
     '*.foobar.com': '127.0.0.1',
+    '*.idp.com': '127.0.0.1',
   },
   'reporter': 'cypress-multi-reporters',
   'reporterOptions': {
diff --git a/packages/driver/cypress/e2e/commands/actions/check.cy.js b/packages/driver/cypress/e2e/commands/actions/check.cy.js
index 554e8656b361..323e6773cff0 100644
--- a/packages/driver/cypress/e2e/commands/actions/check.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/check.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../../support/utils')
 const { _, Promise, $ } = Cypress
 
 describe('src/cy/commands/actions/check', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#check', () => {
diff --git a/packages/driver/cypress/e2e/commands/actions/focus.cy.js b/packages/driver/cypress/e2e/commands/actions/focus.cy.js
index 57b31a7deb93..1a86f1048c45 100644
--- a/packages/driver/cypress/e2e/commands/actions/focus.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/focus.cy.js
@@ -6,18 +6,8 @@ const getActiveElement = () => {
 }
 
 describe('src/cy/commands/actions/focus', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#focus', () => {
diff --git a/packages/driver/cypress/e2e/commands/actions/hover.cy.js b/packages/driver/cypress/e2e/commands/actions/hover.cy.js
index 811e6799ff3c..f3b10a193e73 100644
--- a/packages/driver/cypress/e2e/commands/actions/hover.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/hover.cy.js
@@ -1,18 +1,6 @@
-const { $ } = Cypress
-
 describe('src/cy/commands/actions/hover', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#hover', () => {
diff --git a/packages/driver/cypress/e2e/commands/actions/scroll.cy.js b/packages/driver/cypress/e2e/commands/actions/scroll.cy.js
index 4726421baad5..cd6e456be732 100644
--- a/packages/driver/cypress/e2e/commands/actions/scroll.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/scroll.cy.js
@@ -1,19 +1,8 @@
-const { $ } = window.Cypress.$Cypress
-const { _ } = window.Cypress
+const { _, $ } = Cypress
 
 describe('src/cy/commands/actions/scroll', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/scrolling.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/scrolling.html')
 
     cy.viewport(600, 200)
   })
diff --git a/packages/driver/cypress/e2e/commands/actions/select.cy.js b/packages/driver/cypress/e2e/commands/actions/select.cy.js
index bc26bec2e98c..991db09398af 100644
--- a/packages/driver/cypress/e2e/commands/actions/select.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/select.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../../support/utils')
 const { _, $ } = Cypress
 
 describe('src/cy/commands/actions/select', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#select', () => {
@@ -563,7 +553,7 @@ describe('src/cy/commands/actions/select', () => {
           done()
         })
 
-        cy.get('select[name=fielset-disabled]').select('foo')
+        cy.get('select[name=fieldset-disabled]').select('foo')
       })
 
       it('throws when optgroup is disabled', (done) => {
diff --git a/packages/driver/cypress/e2e/commands/actions/submit.cy.js b/packages/driver/cypress/e2e/commands/actions/submit.cy.js
index 61f210a6a954..ce3ecda8f4d8 100644
--- a/packages/driver/cypress/e2e/commands/actions/submit.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/submit.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../../support/utils')
 const { _, $, Promise } = Cypress
 
 describe('src/cy/commands/actions/submit', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#submit', () => {
diff --git a/packages/driver/cypress/e2e/commands/actions/trigger.cy.js b/packages/driver/cypress/e2e/commands/actions/trigger.cy.js
index 72b20f692f6a..0e2e3c7f4b2d 100644
--- a/packages/driver/cypress/e2e/commands/actions/trigger.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/trigger.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../../support/utils')
 const { _, $ } = Cypress
 
 describe('src/cy/commands/actions/trigger', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#trigger', () => {
@@ -599,13 +589,10 @@ describe('src/cy/commands/actions/trigger', () => {
       })
 
       it('passes options.animationDistanceThreshold to cy.ensureElementIsNotAnimating', () => {
-        const $btn = cy.$$('button:first')
-
-        const { fromElWindow } = Cypress.dom.getElementCoordinatesByPosition($btn)
-
         cy.spy(cy, 'ensureElementIsNotAnimating')
 
-        cy.get('button:first').trigger('tap', { animationDistanceThreshold: 1000 }).then(() => {
+        cy.get('button:first').trigger('tap', { animationDistanceThreshold: 1000 }).then(($btn) => {
+          const { fromElWindow } = Cypress.dom.getElementCoordinatesByPosition($btn)
           const { args } = cy.ensureElementIsNotAnimating.firstCall
 
           expect(args[1]).to.deep.eq([fromElWindow, fromElWindow])
@@ -616,13 +603,10 @@ describe('src/cy/commands/actions/trigger', () => {
       it('passes config.animationDistanceThreshold to cy.ensureElementIsNotAnimating', () => {
         const animationDistanceThreshold = Cypress.config('animationDistanceThreshold')
 
-        const $btn = cy.$$('button:first')
-
-        const { fromElWindow } = Cypress.dom.getElementCoordinatesByPosition($btn)
-
         cy.spy(cy, 'ensureElementIsNotAnimating')
 
-        cy.get('button:first').trigger('mouseover').then(() => {
+        cy.get('button:first').trigger('mouseover').then(($btn) => {
+          const { fromElWindow } = Cypress.dom.getElementCoordinatesByPosition($btn)
           const { args } = cy.ensureElementIsNotAnimating.firstCall
 
           expect(args[1]).to.deep.eq([fromElWindow, fromElWindow])
diff --git a/packages/driver/cypress/e2e/commands/aliasing.cy.js b/packages/driver/cypress/e2e/commands/aliasing.cy.js
index e51684afcceb..8fa05133ae92 100644
--- a/packages/driver/cypress/e2e/commands/aliasing.cy.js
+++ b/packages/driver/cypress/e2e/commands/aliasing.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../support/utils')
 const { _, $ } = Cypress
 
 describe('src/cy/commands/aliasing', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/dom.html')
   })
 
   context('#as', () => {
diff --git a/packages/driver/cypress/e2e/commands/angular.cy.js b/packages/driver/cypress/e2e/commands/angular.cy.js
index 9e620c1d8856..089c35903016 100644
--- a/packages/driver/cypress/e2e/commands/angular.cy.js
+++ b/packages/driver/cypress/e2e/commands/angular.cy.js
@@ -2,7 +2,7 @@ const { assertLogLength } = require('../../support/utils')
 const { _, $ } = Cypress
 
 describe('src/cy/commands/angular', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/fixtures/angular.html')
   })
 
diff --git a/packages/driver/cypress/e2e/commands/assertions.cy.js b/packages/driver/cypress/e2e/commands/assertions.cy.js
index 86429d1dad34..6318a04a4e1b 100644
--- a/packages/driver/cypress/e2e/commands/assertions.cy.js
+++ b/packages/driver/cypress/e2e/commands/assertions.cy.js
@@ -35,20 +35,10 @@ const captureCommands = () => {
 }
 
 describe('src/cy/commands/assertions', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/jquery.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   let testCommands
 
   beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+    cy.visit('/fixtures/jquery.html')
 
     testCommands = captureCommands()
   })
@@ -70,6 +60,7 @@ describe('src/cy/commands/assertions', () => {
       .noop({ foo: 'bar' }).should('deep.eq', { foo: 'bar' })
       .then((obj) => {
         expect(testCommands()).to.eql([
+          { name: 'visit', snapshots: 1, retries: 0 },
           { name: 'noop', snapshots: 0, retries: 0 },
           { name: 'should', snapshots: 1, retries: 0 },
           { name: 'then', snapshots: 0, retries: 0 },
@@ -204,6 +195,7 @@ describe('src/cy/commands/assertions', () => {
         })
         .then(() => {
           expect(testCommands()).to.eql([
+            { name: 'visit', snapshots: 1, retries: 0 },
             // cy.get() has 2 snapshots, 1 for itself, and 1
             // for the .should(...) assertion.
 
@@ -1277,6 +1269,36 @@ describe('src/cy/commands/assertions', () => {
     })
   })
 
+  // TODO: this suite should be merged with the suite above
+  describe('message formatting', () => {
+    const expectMarkdown = (test, message, done) => {
+      cy.then(() => {
+        test()
+      })
+
+      cy.on('log:added', (attrs, log) => {
+        if (attrs.name === 'assert') {
+          cy.removeAllListeners('log:added')
+
+          expect(log.get('message')).to.eq(message)
+
+          done()
+        }
+      })
+    }
+
+    // https://github.com/cypress-io/cypress/issues/19116
+    it('text with backslashes', (done) => {
+      const text = '"<OE_D]dQ\\'
+
+      expectMarkdown(
+        () => expect(text).to.equal(text),
+        `expected **"<OE_D]dQ\\\\** to equal **"<OE_D]dQ\\\\**`,
+        done,
+      )
+    })
+  })
+
   context('chai overrides', () => {
     beforeEach(function () {
       this.$body = cy.$$('body')
@@ -1327,6 +1349,15 @@ describe('src/cy/commands/assertions', () => {
 
         cy.get('#escape-quotes').should('contain', 'shouldn\'t')
       })
+
+      // https://github.com/cypress-io/cypress/issues/19116
+      it('escapes backslashes', () => {
+        const $span = '<span id="escape-backslashes">"&lt;OE_D]dQ\\</span>'
+
+        cy.$$($span).appendTo(cy.$$('body'))
+
+        cy.get('#escape-backslashes').should('contain', '"<OE_D]dQ\\')
+      })
     })
 
     describe('#match', () => {
@@ -2997,11 +3028,10 @@ describe('src/cy/commands/assertions', () => {
     // should be taken.
     it('only snapshots once when failing to find DOM elements and not retrying', (done) => {
       cy.on('fail', (err) => {
-        expect(testCommands()).to.eql([{
-          name: 'get',
-          snapshots: 1,
-          retries: 0,
-        }])
+        expect(testCommands()).to.eql([
+          { name: 'visit', snapshots: 1, retries: 0 },
+          { name: 'get', snapshots: 1, retries: 0 },
+        ])
 
         done()
       })
diff --git a/packages/driver/cypress/e2e/commands/clock.cy.js b/packages/driver/cypress/e2e/commands/clock.cy.js
index 60838517063c..c16a8daa33eb 100644
--- a/packages/driver/cypress/e2e/commands/clock.cy.js
+++ b/packages/driver/cypress/e2e/commands/clock.cy.js
@@ -115,6 +115,7 @@ describe('src/cy/commands/clock', () => {
 
     // this test was written to catch a bug in lolex (dep, now @sinonjs/fake-timers) 3 and was fixed by lolex 4 upgrade,
     it(`doesn't override window.performance members`, () => {
+      cy.visit('/fixtures/empty.html')
       cy.clock()
       .then((clock) => {
         cy.window().then((win) => {
diff --git a/packages/driver/cypress/e2e/commands/commands.cy.js b/packages/driver/cypress/e2e/commands/commands.cy.js
index adb845aff904..2b0e6f463467 100644
--- a/packages/driver/cypress/e2e/commands/commands.cy.js
+++ b/packages/driver/cypress/e2e/commands/commands.cy.js
@@ -1,18 +1,8 @@
-const { _, $ } = Cypress
+const { _ } = Cypress
 
 describe('src/cy/commands/commands', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+  beforeEach(() => {
+    cy.visit('/fixtures/dom.html')
   })
 
   it('can invoke commands by name', () => {
@@ -43,7 +33,7 @@ describe('src/cy/commands/commands', () => {
     cy.command('get', 'body').then(() => {
       const names = cy.queue.names()
 
-      expect(names).to.deep.eq(['get', 'then'])
+      expect(names).to.deep.eq(['visit', 'get', 'then'])
     })
   })
 
diff --git a/packages/driver/cypress/e2e/commands/connectors.cy.js b/packages/driver/cypress/e2e/commands/connectors.cy.js
index 5968da419f53..fd4d23e3c5e0 100644
--- a/packages/driver/cypress/e2e/commands/connectors.cy.js
+++ b/packages/driver/cypress/e2e/commands/connectors.cy.js
@@ -3,18 +3,8 @@ const { _, Promise, $ } = Cypress
 
 describe('src/cy/commands/connectors', () => {
   describe('with jquery', () => {
-    before(() => {
-      cy
-      .visit('/fixtures/jquery.html')
-      .then(function (win) {
-        this.body = win.document.body.outerHTML
-      })
-    })
-
     beforeEach(function () {
-      const doc = cy.state('document')
-
-      $(doc.body).empty().html(this.body)
+      cy.visit('/fixtures/jquery.html')
     })
 
     context('#spread', () => {
@@ -90,7 +80,8 @@ describe('src/cy/commands/connectors', () => {
 
       it('does not insert a mocha callback', () => {
         cy.noop().then(() => {
-          expect(cy.queue.length).to.eq(2)
+          // queue: visit -> noop -> then
+          expect(cy.queue.length).to.eq(3)
         })
       })
 
@@ -1803,18 +1794,8 @@ describe('src/cy/commands/connectors', () => {
   })
 
   describe('without jquery', () => {
-    before(() => {
-      cy
-      .visit('/fixtures/dom.html')
-      .then(function (win) {
-        this.body = win.document.body.outerHTML
-      })
-    })
-
-    beforeEach(function () {
-      const doc = cy.state('document')
-
-      $(doc.body).empty().html(this.body)
+    beforeEach(() => {
+      cy.visit('/fixtures/dom.html')
     })
 
     context('#each', () => {
diff --git a/packages/driver/cypress/e2e/commands/files.cy.js b/packages/driver/cypress/e2e/commands/files.cy.js
index 1bf234c518e2..24c40296d594 100644
--- a/packages/driver/cypress/e2e/commands/files.cy.js
+++ b/packages/driver/cypress/e2e/commands/files.cy.js
@@ -161,6 +161,8 @@ describe('src/cy/commands/files', () => {
       defaultCommandTimeout: 50,
     }, () => {
       beforeEach(function () {
+        cy.visit('/fixtures/empty.html')
+
         this.logs = []
 
         cy.on('log:added', (attrs, log) => {
diff --git a/packages/driver/cypress/e2e/commands/misc.cy.js b/packages/driver/cypress/e2e/commands/misc.cy.js
index eaf41954a429..34f81050f1cc 100644
--- a/packages/driver/cypress/e2e/commands/misc.cy.js
+++ b/packages/driver/cypress/e2e/commands/misc.cy.js
@@ -2,18 +2,8 @@ const { assertLogLength } = require('../../support/utils')
 const { _, $, dom } = Cypress
 
 describe('src/cy/commands/misc', () => {
-  before(() => {
-    cy
-    .visit('/fixtures/jquery.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
+    cy.visit('/fixtures/jquery.html')
   })
 
   context('#end', () => {
diff --git a/packages/driver/cypress/e2e/commands/navigation.cy.js b/packages/driver/cypress/e2e/commands/navigation.cy.js
index 311eea7f6a64..f6643fb16cef 100644
--- a/packages/driver/cypress/e2e/commands/navigation.cy.js
+++ b/packages/driver/cypress/e2e/commands/navigation.cy.js
@@ -6,24 +6,8 @@ const { _, Promise, $ } = Cypress
 
 describe('src/cy/commands/navigation', () => {
   context('#reload', () => {
-    before(() => {
-      cy
-      .visit('/fixtures/generic.html')
-      .then(function (win) {
-        this.body = win.document.body.outerHTML
-      })
-    })
-
     beforeEach(function () {
-      const doc = cy.state('document')
-
-      this.win = cy.state('window')
-
-      $(doc.body).empty().html(this.body)
-    })
-
-    afterEach(function () {
-      cy.state('window', this.win)
+      cy.visit('/fixtures/generic.html')
     })
 
     it('calls into window.location.reload', () => {
@@ -288,24 +272,11 @@ describe('src/cy/commands/navigation', () => {
   })
 
   context('#go', () => {
-    before(() => {
-      cy
-      .visit('/fixtures/generic.html')
-      .then(function (win) {
-        this.body = win.document.body.outerHTML
-      })
-    })
-
-    beforeEach(function () {
-      const doc = cy.state('document')
-
-      $(doc.body).empty().html(this.body)
-    })
-
     // TODO: fix this
     it('sets timeout to Cypress.config(pageLoadTimeout)', {
       pageLoadTimeout: 4567,
     }, () => {
+      cy.visit('/fixtures/generic.html')
       const timeout = cy.spy(Promise.prototype, 'timeout')
 
       cy
@@ -508,7 +479,7 @@ describe('src/cy/commands/navigation', () => {
       })
 
       it('only logs once on error', function (done) {
-        cy.on('fail', (err) => {
+        cy.once('fail', (err) => {
           assertLogLength(this.logs, 1)
           expect(this.logs[0].get('error')).to.eq(err)
 
@@ -814,7 +785,7 @@ describe('src/cy/commands/navigation', () => {
     })
 
     // https://github.com/cypress-io/cypress/issues/1311
-    it(`window immediately resolves and doesn't reload when visiting the same URL with hashes`, () => {
+    it('window immediately resolves and doesn\'t reload when visiting the same URL with hashes', () => {
       const onLoad = cy.stub()
 
       cy
@@ -825,7 +796,7 @@ describe('src/cy/commands/navigation', () => {
         onLoad,
       })
       .then((win) => {
-        expect(win.bar).to.not.exist
+        expect(win.foo).to.equal('bar')
         expect(onLoad).not.to.have.been.called
       })
     })
@@ -971,7 +942,7 @@ describe('src/cy/commands/navigation', () => {
     })
 
     describe('location getter overrides', () => {
-      before(() => {
+      beforeEach(function () {
         cy
         .visit('/fixtures/jquery.html?foo=bar#dashboard?baz=quux')
         .window().as('win').then((win) => {
@@ -980,9 +951,7 @@ describe('src/cy/commands/navigation', () => {
           // overriding the location getters
           expect(win.location.href).to.include('/fixtures/jquery.html?foo=bar#dashboard?baz=quux')
         })
-      })
 
-      beforeEach(function () {
         this.win = cy.state('window')
 
         this.eq = (attr, str) => {
@@ -1440,10 +1409,25 @@ describe('src/cy/commands/navigation', () => {
       it('throws when attempting to visit a 2nd domain on different port', function (done) {
         cy.on('fail', (err) => {
           const { lastLog } = this
+          const experimentalMessage = Cypress.config('experimentalSessionAndOrigin') ? `You likely forgot to use \`cy.origin()\`:\n` : `In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:\n`
+
+          expect(err.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          ${experimentalMessage}
+          \`cy.visit('http://localhost:3500/fixtures/generic.html')\`
+          \`<commands targeting http://localhost:3500 go here>\`\n
+          \`cy.origin('http://localhost:3501', () => {\`
+          \`  cy.visit('http://localhost:3501/fixtures/generic.html')\`
+          \`  <commands targeting http://localhost:3501 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > port\n
+          You may only \`cy.visit()\` same-origin URLs within a single test.\n
+          The previous URL you visited was:\n
+            > 'http://localhost:3500'\n
+          You're attempting to visit this URL:\n
+            > 'http://localhost:3501'`)
 
-          expect(err.message).to.include('`cy.visit()` failed because you are attempting to visit a URL that is of a different origin.')
-          expect(err.message).to.include('The new URL is considered a different origin because the following parts of the URL are different:')
-          expect(err.message).to.include('> port')
           expect(err.docsUrl).to.eq('https://on.cypress.io/cannot-visit-different-origin-domain')
           assertLogLength(this.logs, 2)
           expect(lastLog.get('error')).to.eq(err)
@@ -1452,17 +1436,31 @@ describe('src/cy/commands/navigation', () => {
         })
 
         cy.visit('http://localhost:3500/fixtures/generic.html')
-
         cy.visit('http://localhost:3501/fixtures/generic.html')
       })
 
       it('throws when attempting to visit a 2nd domain on different protocol', function (done) {
         cy.on('fail', (err) => {
           const { lastLog } = this
+          const experimentalMessage = Cypress.config('experimentalSessionAndOrigin') ? `You likely forgot to use \`cy.origin()\`:\n` : `In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:\n`
+
+          expect(err.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          ${experimentalMessage}
+          \`cy.visit('http://localhost:3500/fixtures/generic.html')\`
+          \`<commands targeting http://localhost:3500 go here>\`\n
+          \`cy.origin('https://localhost:3502', () => {\`
+          \`  cy.visit('https://localhost:3502/fixtures/generic.html')\`
+          \`  <commands targeting https://localhost:3502 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > protocol, port\n
+          You may only \`cy.visit()\` same-origin URLs within a single test.\n
+          The previous URL you visited was:\n
+            > 'http://localhost:3500'\n
+          You're attempting to visit this URL:\n
+            > 'https://localhost:3502'`)
 
-          expect(err.message).to.include('`cy.visit()` failed because you are attempting to visit a URL that is of a different origin.')
-          expect(err.message).to.include('The new URL is considered a different origin because the following parts of the URL are different:')
-          expect(err.message).to.include('> protocol')
           expect(err.docsUrl).to.eq('https://on.cypress.io/cannot-visit-different-origin-domain')
           assertLogLength(this.logs, 2)
           expect(lastLog.get('error')).to.eq(err)
@@ -1471,16 +1469,31 @@ describe('src/cy/commands/navigation', () => {
         })
 
         cy.visit('http://localhost:3500/fixtures/generic.html')
-        cy.visit('https://localhost:3500/fixtures/generic.html')
+        cy.visit('https://localhost:3502/fixtures/generic.html')
       })
 
       it('throws when attempting to visit a 2nd domain on different superdomain', function (done) {
         cy.on('fail', (err) => {
           const { lastLog } = this
+          const experimentalMessage = Cypress.config('experimentalSessionAndOrigin') ? `You likely forgot to use \`cy.origin()\`:\n` : `In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:\n`
+
+          expect(err.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          ${experimentalMessage}
+          \`cy.visit('http://localhost:3500/fixtures/generic.html')\`
+          \`<commands targeting http://localhost:3500 go here>\`\n
+          \`cy.origin('http://foobar.com:3500', () => {\`
+          \`  cy.visit('http://www.foobar.com:3500/fixtures/generic.html')\`
+          \`  <commands targeting http://www.foobar.com:3500 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > superdomain\n
+          You may only \`cy.visit()\` same-origin URLs within a single test.\n
+          The previous URL you visited was:\n
+            > 'http://localhost:3500'\n
+          You're attempting to visit this URL:\n
+            > 'http://www.foobar.com:3500'`)
 
-          expect(err.message).to.include('`cy.visit()` failed because you are attempting to visit a URL that is of a different origin.')
-          expect(err.message).to.include('The new URL is considered a different origin because the following parts of the URL are different:')
-          expect(err.message).to.include('> superdomain')
           expect(err.docsUrl).to.eq('https://on.cypress.io/cannot-visit-different-origin-domain')
           assertLogLength(this.logs, 2)
           expect(lastLog.get('error')).to.eq(err)
@@ -1489,14 +1502,31 @@ describe('src/cy/commands/navigation', () => {
         })
 
         cy.visit('http://localhost:3500/fixtures/generic.html')
-        cy.visit('http://google.com:3500/fixtures/generic.html')
+        cy.visit('http://www.foobar.com:3500/fixtures/generic.html')
       })
 
       it('throws attempting to visit 2 unique ip addresses', function (done) {
         cy.on('fail', (err) => {
           const { lastLog } = this
+          const experimentalMessage = Cypress.config('experimentalSessionAndOrigin') ? `You likely forgot to use \`cy.origin()\`:\n` : `In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:\n`
+
+          expect(err.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          ${experimentalMessage}
+          \`cy.visit('http://127.0.0.1:3500/fixtures/generic.html')\`
+          \`<commands targeting http://127.0.0.1:3500 go here>\`\n
+          \`cy.origin('http://0.0.0.0:3500', () => {\`
+          \`  cy.visit('http://0.0.0.0:3500/fixtures/generic.html')\`
+          \`  <commands targeting http://0.0.0.0:3500 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > superdomain\n
+          You may only \`cy.visit()\` same-origin URLs within a single test.\n
+          The previous URL you visited was:\n
+            > 'http://127.0.0.1:3500'\n
+          You're attempting to visit this URL:\n
+            > 'http://0.0.0.0:3500'`)
 
-          expect(err.message).to.include('`cy.visit()` failed because you are attempting to visit a URL that is of a different origin.')
           expect(err.docsUrl).to.eq('https://on.cypress.io/cannot-visit-different-origin-domain')
           assertLogLength(this.logs, 2)
           expect(lastLog.get('error')).to.eq(err)
@@ -1506,22 +1536,7 @@ describe('src/cy/commands/navigation', () => {
 
         cy
         .visit('http://127.0.0.1:3500/fixtures/generic.html')
-        .visit('http://126.0.0.1:3500/fixtures/generic.html')
-      })
-
-      it('does not call resolve:url when throws attempting to visit a 2nd domain', (done) => {
-        const backend = cy.spy(Cypress, 'backend')
-
-        cy.on('fail', (err) => {
-          expect(backend).to.be.calledWithMatch('resolve:url', 'http://localhost:3500/fixtures/generic.html')
-          expect(backend).not.to.be.calledWithMatch('resolve:url', 'http://google.com:3500/fixtures/generic.html')
-
-          done()
-        })
-
-        cy
-        .visit('http://localhost:3500/fixtures/generic.html')
-        .visit('http://google.com:3500/fixtures/generic.html')
+        .visit('http://0.0.0.0:3500/fixtures/generic.html')
       })
 
       it('displays loading_network_failed when _resolveUrl throws', function (done) {
@@ -2134,31 +2149,57 @@ describe('src/cy/commands/navigation', () => {
         .get('#does-not-exist', { timeout: 200 }).should('have.class', 'foo')
       })
 
-      it('captures cross origin failures', function (done) {
-        cy.once('fail', (err) => {
+      it('displays cross origin failures when navigating to a cross origin', { pageLoadTimeout: 3000 }, function (done) {
+        cy.on('fail', (err) => {
           const { lastLog } = this
 
-          assertLogLength(this.logs, 2)
-          expect(err.message).to.include('Cypress detected a cross origin error happened on page load')
-          expect(err.docsUrl).to.eq('https://on.cypress.io/cross-origin-violation')
-          expect(lastLog.get('name')).to.eq('page load')
-          expect(lastLog.get('state')).to.eq('failed')
+          if (Cypress.config('experimentalSessionAndOrigin')) {
+            // When the experimentalSessionAndOrigin feature is enabled, we will timeout and display this message.
+            expect(err.message).to.include(stripIndent`\
+            Timed out after waiting \`3000ms\` for your remote page to load on origin(s):\n
+            - \`http://localhost:3500\`\n
+            A cross-origin request for \`http://www.foobar.com:3500/fixtures/secondary-origin.html\` was detected.\n
+            A command that triggers cross-origin navigation must be immediately followed by a \`cy.origin()\` command:\n
+            \`cy.origin(\'http://foobar.com:3500\', () => {\`
+            \`  <commands targeting http://www.foobar.com:3500 go here>\`
+            \`})\`\n
+            If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\` value in`)
+
+            expect(err.message).to.include(`packages/driver/cypress.config.ts`)
+            expect(err.message).to.include(`to wait longer.\n`)
+
+            expect(err.message).to.include(`Browsers will not fire the \`load\` event until all stylesheets and scripts are done downloading.\n`)
+            expect(err.message).to.include(`When this \`load\` event occurs, Cypress will continue running commands.`)
+
+            expect(err.docsUrl).to.eq('https://on.cypress.io/origin')
+            assertLogLength(this.logs, 10)
+          } else {
+            const error = Cypress.isBrowser('firefox') ? 'Permission denied to access property "document" on cross-origin object' : 'Blocked a frame with origin "http://localhost:3500" from accessing a cross-origin frame.'
+
+            // When the experimentalSessionAndOrigin feature is disabled, we will immediately and display this message.
+            expect(err.message).to.contain(stripIndent`\
+            Cypress detected a cross origin error happened on page load:\n
+              > ${error}\n
+            Before the page load, you were bound to the origin policy:\n
+              > http://localhost:3500\n
+            A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.\n
+            A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.\n
+            Cypress does not allow you to navigate to a different origin URL within a single test.\n
+            You may need to restructure some of your test code to avoid this problem.\n
+            Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false }`)
+
+            expect(err.message).to.contain(`packages/driver/cypress.config.ts`)
+            expect(err.docsUrl).to.eq('https://on.cypress.io/cross-origin-violation')
+            assertLogLength(this.logs, 7)
+          }
+
           expect(lastLog.get('error')).to.eq(err)
-          expect(cy.state('onPageLoadErr')).to.be.null
 
           done()
         })
 
-        cy
-        .visit('/fixtures/jquery.html')
-        .window({ log: false }).then((win) => {
-          const url = 'http://localhost:3501/fixtures/generic.html'
-
-          const $a = win.$(`<a href='${url}'>jquery</a>`)
-          .appendTo(win.document.body)
-
-          causeSynchronousBeforeUnload($a)
-        })
+        cy.visit('/fixtures/primary-origin.html')
+        cy.get('a[data-cy="cross-origin-secondary-link"]').click()
       })
 
       return null
@@ -2285,20 +2326,33 @@ describe('src/cy/commands/navigation', () => {
       })
     })
 
-    it('waits for stability at the end of the command queue when not stable', (done) => {
+    it('tests waiting on stability at the end of the command queue', (done) => {
       cy
       .visit('/fixtures/generic.html')
       .then((win) => {
-        cy.on('window:load', () => {
+        // We do not wait if the experimentalSessionAndOrigin feature is enabled
+        if (Cypress.config('experimentalSessionAndOrigin')) {
+          const onLoad = cy.spy()
+
+          cy.on('window:load', onLoad)
+
           cy.on('command:queue:end', () => {
+            expect(onLoad).not.have.been.called
             done()
           })
-        })
+        } else {
+          // We do wait if the experimentalSessionAndOrigin feature is not enabled
+          cy.on('window:load', () => {
+            cy.on('command:queue:end', () => {
+              done()
+            })
+          })
+        }
 
         cy.on('command:queue:before:end', () => {
-        // force us to become unstable immediately
-        // else the beforeunload event fires at the end
-        // of the tick which is too late
+          // force us to become unstable immediately
+          // else the beforeunload event fires at the end
+          // of the tick which is too late
           cy.isStable(false, 'testing')
 
           win.location.href = '/timeout?ms=100'
diff --git a/packages/driver/cypress/e2e/commands/net_stubbing.cy.ts b/packages/driver/cypress/e2e/commands/net_stubbing.cy.ts
index 60245c2bb6ee..dd5dae3b2617 100644
--- a/packages/driver/cypress/e2e/commands/net_stubbing.cy.ts
+++ b/packages/driver/cypress/e2e/commands/net_stubbing.cy.ts
@@ -1011,7 +1011,7 @@ describe('network stubbing', function () {
       // using "hosts" setting in the "cypress.json" file
       const corsUrl = 'http://diff.foobar.com:3501/no-cors'
 
-      before(() => {
+      beforeEach(() => {
         cy.visit('http://127.0.0.1:3500/fixtures/dom.html')
       })
 
@@ -1070,7 +1070,7 @@ describe('network stubbing', function () {
       // a different domain from the page own domain
       const corsUrl = 'http://diff.foobar.com:3501/cors'
 
-      before(() => {
+      beforeEach(() => {
         cy.visit('http://127.0.0.1:3500/fixtures/dom.html')
       })
 
@@ -1278,6 +1278,8 @@ describe('network stubbing', function () {
 
     // @see https://github.com/cypress-io/cypress/issues/15841
     it('prevents requests from reaching destination server', function () {
+      cy.visit('/fixtures/empty.html')
+
       const v = String(Date.now())
 
       // this test creates server-side state via /set-var to test if requests are being sent or not
@@ -1991,6 +1993,7 @@ describe('network stubbing', function () {
             .intercept(`${url}*`, (req) => {
               // @ts-ignore
               req.on(eventName, (res) => {
+                res.headers['content-type'] = 'application/json'
                 res.send({
                   statusCode: 200,
                   fixture: 'valid.json',
@@ -2616,6 +2619,8 @@ describe('network stubbing', function () {
     it('intercepts cached responses as expected', {
       browser: '!firefox', // TODO: why does firefox behave differently? transparently returns cached response
     }, function () {
+      cy.visit('/fixtures/empty.html')
+
       // use a queryparam to bust cache from previous runs of this test
       const url = `/fixtures/generic.html?t=${Date.now()}`
       let hits = 0
@@ -2688,6 +2693,7 @@ describe('network stubbing', function () {
 
           return Promise.delay(delay)
           .then(() => {
+            res.headers['content-type'] = 'text/plain'
             res.send('Promise.delay worked')
           })
         })
@@ -2731,6 +2737,7 @@ describe('network stubbing', function () {
         req.reply((res) => {
           this.start = Date.now()
 
+          res.headers['content-type'] = 'text/plain'
           res.setThrottle(kbps).send(payload)
         })
       }).then(() => {
@@ -2755,6 +2762,7 @@ describe('network stubbing', function () {
         req.reply((res) => {
           this.start = Date.now()
 
+          res.headers['content-type'] = 'text/plain'
           res.setThrottle(kbps).setDelay(delay).send({
             statusCode: 200,
             body: payload,
@@ -2929,6 +2937,7 @@ describe('network stubbing', function () {
       it('res.send(body)', function () {
         cy.intercept('/custom-headers*', function (req) {
           req.reply((res) => {
+            res.headers['content-type'] = 'text/plain'
             res.send('baz')
           })
         })
@@ -2985,6 +2994,7 @@ describe('network stubbing', function () {
       it('res.send(status, body)', function (done) {
         cy.intercept('/custom-headers*', function (req) {
           req.reply((res) => {
+            res.headers['content-type'] = 'text/plain'
             res.send(777, 'bar')
           })
         })
@@ -3047,6 +3057,7 @@ describe('network stubbing', function () {
 
         cy.intercept(`${url}*`, function (req) {
           req.reply((res) => {
+            res.headers['content-type'] = 'application/json'
             res.send({
               statusCode: 200,
               fixture: 'valid.json',
@@ -3090,6 +3101,7 @@ describe('network stubbing', function () {
           req.reply((res) => {
             this.start = Date.now()
 
+            res.headers['content-type'] = 'text/plain'
             // ensure .throttle and .delay are overridden
             res.setThrottle(1e6).setDelay(1).send({
               statusCode: 200,
diff --git a/packages/driver/cypress/e2e/commands/querying/querying.cy.js b/packages/driver/cypress/e2e/commands/querying/querying.cy.js
index 151198bccd5e..39b7050eb60c 100644
--- a/packages/driver/cypress/e2e/commands/querying/querying.cy.js
+++ b/packages/driver/cypress/e2e/commands/querying/querying.cy.js
@@ -1224,6 +1224,12 @@ describe('src/cy/commands/querying', () => {
       cy.contains(/\'/)
     })
 
+    // https://github.com/cypress-io/cypress/issues/19116
+    it('handles backslashes', () => {
+      $('<div id="backslashes">"&lt;OE_D]dQ\\</div>').appendTo(cy.$$('body'))
+      cy.get('#backslashes').contains('"<OE_D]dQ\\')
+    })
+
     describe('should(\'not.exist\')', () => {
       it('returns null when no content exists', () => {
         cy.contains('alksjdflkasjdflkajsdf').should('not.exist').then(($el) => {
diff --git a/packages/driver/cypress/e2e/commands/screenshot.cy.js b/packages/driver/cypress/e2e/commands/screenshot.cy.js
index 0045c2a7b24a..acb4837802e8 100644
--- a/packages/driver/cypress/e2e/commands/screenshot.cy.js
+++ b/packages/driver/cypress/e2e/commands/screenshot.cy.js
@@ -761,9 +761,9 @@ describe('src/cy/commands/screenshot', () => {
         cy.get('.short-element').within(() => {
           cy.screenshot({ capture: 'runner' })
         }).then(() => {
-          // the runner was captured
-          expect(Cypress.action.withArgs('cy:before:screenshot').args[0][1].appOnly).to.be.true
-          expect(Cypress.automation.withArgs('take:screenshot').args[0][1].capture).to.equal('viewport')
+          // the runner was captured ("appOnly === true" means to hide the runner UI)
+          expect(Cypress.action.withArgs('cy:before:screenshot').args[0][1].appOnly).to.be.false
+          expect(Cypress.automation.withArgs('take:screenshot').args[0][1].capture).to.equal('runner')
         })
       })
 
diff --git a/packages/driver/cypress/e2e/commands/sessions/utils.cy.js b/packages/driver/cypress/e2e/commands/sessions/utils.cy.js
new file mode 100644
index 000000000000..dcf0705a1144
--- /dev/null
+++ b/packages/driver/cypress/e2e/commands/sessions/utils.cy.js
@@ -0,0 +1,244 @@
+const {
+  getSessionDetails,
+  getConsoleProps,
+  navigateAboutBlank,
+} = require('@packages/driver/src/cy/commands/sessions/utils')
+
+describe('src/cy/commands/sessions/utils.ts', () => {
+  describe('.getSessionDetails', () => {
+    it('for one domain with neither cookies or local storage set', () => {
+      const sessionState = {
+        id: 'session1',
+      }
+
+      const details = getSessionDetails(sessionState)
+
+      expect(details.id).to.eq('session1')
+      expect(Object.keys(details.data)).to.have.length(0)
+    })
+
+    it('for one domain with only cookies set', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+        ],
+      }
+
+      const details = getSessionDetails(sessionState)
+
+      expect(details.id).to.eq('session1')
+      expect(Object.keys(details.data)).to.have.length(1)
+      expect(details.data).to.have.property('localhost')
+      expect(details.data.localhost).to.deep.eq({
+        cookies: 1,
+      })
+    })
+
+    it('for one domain with only local storage set', () => {
+      const sessionState = {
+        id: 'session1',
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+        ],
+      }
+
+      const details = getSessionDetails(sessionState)
+
+      expect(details.id).to.eq('session1')
+      expect(Object.keys(details.data)).to.have.length(1)
+      expect(details.data).to.have.property('localhost')
+      expect(details.data.localhost).to.deep.eq({
+        localStorage: 1,
+      })
+    })
+
+    it('for one domain with both cookies and localStorage', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+        ],
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+        ],
+      }
+
+      const details = getSessionDetails(sessionState)
+
+      expect(details.id).to.eq('session1')
+      expect(Object.keys(details.data)).to.have.length(1)
+      expect(details.data).to.have.property('localhost')
+      expect(details.data.localhost).to.deep.eq({
+        cookies: 1,
+        localStorage: 1,
+      })
+    })
+
+    it('for multiple domains', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+          { name: 'bar', value: 'b', path: '/', domain: 'localhost', secure: false, httpOnly: false, expiry: 456 },
+        ],
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+          { origin: 'http://example.com', value: { 'random': 'hi' } },
+        ],
+      }
+
+      const details = getSessionDetails(sessionState)
+
+      expect(details.id).to.eq('session1')
+      expect(Object.keys(details.data)).to.have.length(2)
+      expect(details.data).to.have.property('localhost')
+      expect(details.data.localhost).to.deep.eq({
+        cookies: 2,
+        localStorage: 1,
+      })
+
+      expect(details.data).to.have.property('example.com')
+      expect(details.data['example.com']).to.deep.eq({
+        localStorage: 1,
+      })
+    })
+  })
+
+  describe('.getConsoleProps', () => {
+    it('for one domain with neither cookies or localStorage set', () => {
+      const sessionState = {
+        id: 'session1',
+      }
+
+      const consoleProps = getConsoleProps(sessionState)
+
+      expect(consoleProps.id).to.eq('session1')
+      expect(consoleProps.table).to.have.length(0)
+    })
+
+    it('for one domain with only cookies set', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+        ],
+      }
+
+      const consoleProps = getConsoleProps(sessionState)
+
+      expect(consoleProps.id).to.eq('session1')
+      expect(consoleProps.table).to.have.length(1)
+      const cookiesTable = consoleProps.table[0]()
+
+      expect(cookiesTable.name).to.contain('Cookies - localhost (1)')
+      expect(cookiesTable.data).to.deep.eq(sessionState.cookies)
+    })
+
+    it('for one domain with only localStorage set', () => {
+      const sessionState = {
+        id: 'session1',
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+        ],
+      }
+      const consoleProps = getConsoleProps(sessionState)
+
+      expect(consoleProps.id).to.eq('session1')
+      expect(consoleProps.table).to.have.length(1)
+      const localStorageTable = consoleProps.table[0]()
+
+      expect(localStorageTable.name).to.contain('Storage - localhost (1)')
+      expect(localStorageTable.data).to.have.length(1)
+      expect(localStorageTable.data).to.deep.eq([{ key: 'stor-foo', value: 's-f' }])
+    })
+
+    it('for one domain with both cookies and localStorage set', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+        ],
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+        ],
+      }
+
+      const consoleProps = getConsoleProps(sessionState)
+
+      expect(consoleProps.id).to.eq('session1')
+      expect(consoleProps.table).to.have.length(2)
+      let table = consoleProps.table[0]()
+
+      expect(table.name).to.contain('Cookies - localhost (1)')
+      expect(table.data).to.have.length(1)
+      expect(table.data).to.deep.eq(sessionState.cookies)
+
+      table = consoleProps.table[1]()
+      expect(table.name).to.contain('Storage - localhost (1)')
+      expect(table.data).to.have.length(1)
+      expect(table.data).to.deep.eq([{ key: 'stor-foo', value: 's-f' }])
+    })
+
+    it('for multiple domains', () => {
+      const sessionState = {
+        id: 'session1',
+        cookies: [
+          { name: 'foo', value: 'f', path: '/', domain: 'localhost', secure: true, httpOnly: true, expiry: 123 },
+          { name: 'bar', value: 'b', path: '/', domain: 'localhost', secure: false, httpOnly: false, expiry: 456 },
+        ],
+        localStorage: [
+          { origin: 'localhost', value: { 'stor-foo': 's-f' } },
+          { origin: 'http://example.com', value: { 'random': 'hi' } },
+        ],
+      }
+
+      const consoleProps = getConsoleProps(sessionState)
+
+      expect(consoleProps.id).to.eq('session1')
+      expect(consoleProps.table).to.have.length(3)
+      let table = consoleProps.table[0]()
+
+      expect(table.name).to.contain('Cookies - localhost (2)')
+      expect(table.data).to.have.length(2)
+      expect(table.data).to.deep.eq(sessionState.cookies)
+
+      table = consoleProps.table[1]()
+      expect(table.name).to.contain('Storage - localhost (1)')
+      expect(table.data).to.have.length(1)
+      expect(table.data).to.deep.eq([{ key: 'stor-foo', value: 's-f' }])
+
+      table = consoleProps.table[2]()
+      expect(table.name).to.contain('Storage - example.com (1)')
+      expect(table.data).to.have.length(1)
+      expect(table.data).to.deep.eq([{ key: 'random', value: 'hi' }])
+    })
+  })
+
+  describe('.navigateAboutBlank', () => {
+    it('triggers session blank page visit', () => {
+      const stub = cy.stub(Cypress, 'action').log(false)
+      .callThrough()
+      .withArgs('cy:visit:blank')
+
+      cy.then(() => {
+        navigateAboutBlank()
+        navigateAboutBlank(true)
+        expect(stub).to.have.been.calledTwice
+        expect(stub.args[0]).to.deep.eq(['cy:visit:blank', { type: 'session' }])
+        expect(stub.args[1]).to.deep.eq(['cy:visit:blank', { type: 'session' }])
+      })
+    })
+
+    it('triggers session-lifecycle blank page visit', () => {
+      const stub = cy.stub(Cypress, 'action').log(false)
+      .callThrough()
+      .withArgs('cy:visit:blank')
+
+      cy.then(() => {
+        navigateAboutBlank(false)
+        expect(stub).to.have.been.calledWith('cy:visit:blank', { type: 'session-lifecycle' })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/commands/waiting.cy.js b/packages/driver/cypress/e2e/commands/waiting.cy.js
index 73ab6976121b..3134a9f38691 100644
--- a/packages/driver/cypress/e2e/commands/waiting.cy.js
+++ b/packages/driver/cypress/e2e/commands/waiting.cy.js
@@ -53,7 +53,7 @@ describe('src/cy/commands/waiting', () => {
     })
 
     describe('alias argument', () => {
-      before(() => {
+      beforeEach(() => {
         cy.visit('/fixtures/jquery.html')
       })
 
@@ -750,7 +750,7 @@ describe('src/cy/commands/waiting', () => {
     })
 
     describe('multiple alias arguments', () => {
-      before(() => {
+      beforeEach(() => {
         cy.visit('/fixtures/jquery.html')
       })
 
@@ -776,7 +776,7 @@ describe('src/cy/commands/waiting', () => {
     })
 
     describe('multiple separate alias waits', () => {
-      before(() => {
+      beforeEach(() => {
         cy.visit('/fixtures/jquery.html')
       })
 
@@ -1022,6 +1022,8 @@ describe('src/cy/commands/waiting', () => {
             done()
           })
 
+          cy.visit('/fixtures/empty.html')
+
           cy
           .server()
           .route(/foo/, {}).as('getFoo')
@@ -1042,6 +1044,10 @@ describe('src/cy/commands/waiting', () => {
       })
 
       describe('alias argument', () => {
+        beforeEach(() => {
+          cy.visit('/fixtures/empty.html')
+        })
+
         it('is a parent command', () => {
           cy
           .server()
@@ -1133,6 +1139,10 @@ describe('src/cy/commands/waiting', () => {
       })
 
       describe('timeouts', function () {
+        beforeEach(() => {
+          cy.visit('/fixtures/empty.html')
+        })
+
         it('sets default requestTimeout', {
           requestTimeout: 199,
         }, function (done) {
diff --git a/packages/driver/cypress/e2e/commands/window.cy.js b/packages/driver/cypress/e2e/commands/window.cy.js
index 27665aa2344e..a56a241b99b5 100644
--- a/packages/driver/cypress/e2e/commands/window.cy.js
+++ b/packages/driver/cypress/e2e/commands/window.cy.js
@@ -364,26 +364,16 @@ describe('src/cy/commands/window', () => {
   })
 
   context('#title', () => {
-    before(() => {
+    beforeEach(() => {
       cy
       .visit('/fixtures/generic.html')
       .then(function (win) {
         const h = $(win.document.head)
 
         h.find('script').remove()
-
-        this.head = h.prop('outerHTML')
-        this.body = win.document.body.outerHTML
       })
     })
 
-    beforeEach(function () {
-      const doc = cy.state('document')
-
-      $(doc.head).empty().html(this.head)
-      $(doc.body).empty().html(this.body)
-    })
-
     it('returns the pages title as a string', () => {
       const title = cy.$$('title').text()
 
diff --git a/packages/driver/cypress/e2e/commands/xhr.cy.js b/packages/driver/cypress/e2e/commands/xhr.cy.js
index 6aa0b8155c29..16718906f7f0 100644
--- a/packages/driver/cypress/e2e/commands/xhr.cy.js
+++ b/packages/driver/cypress/e2e/commands/xhr.cy.js
@@ -3,26 +3,16 @@ const { assertLogLength } = require('../../support/utils')
 const { _, $, Promise } = Cypress
 
 describe('src/cy/commands/xhr', () => {
-  before(() => {
+  beforeEach(function () {
     cy
     .visit('/fixtures/jquery.html')
     .then(function (win) {
       const h = $(win.document.head)
 
       h.find('script').remove()
-
-      this.head = h.prop('outerHTML')
-      this.body = win.document.body.outerHTML
     })
   })
 
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.head).empty().html(this.head)
-    $(doc.body).empty().html(this.body)
-  })
-
   context('#startXhrServer', () => {
     it('continues to be a defined properties', () => {
       cy
diff --git a/packages/driver/cypress/e2e/cy/snapshot.cy.js b/packages/driver/cypress/e2e/cy/snapshot.cy.js
index d793b10040a5..429e1337e88c 100644
--- a/packages/driver/cypress/e2e/cy/snapshot.cy.js
+++ b/packages/driver/cypress/e2e/cy/snapshot.cy.js
@@ -32,28 +32,16 @@ describe('driver/src/cy/snapshots', () => {
   })
 
   context('snapshot el', () => {
-    before(() => {
+    beforeEach(() => {
       cy
       .visit('/fixtures/generic.html')
       .then(function (win) {
         const h = $(win.document.head)
 
         h.find('script').remove()
-
-        this.head = h.prop('outerHTML')
-        this.body = win.document.body.outerHTML
       })
     })
 
-    beforeEach(function () {
-      const doc = cy.state('document')
-
-      $(doc.head).empty().html(this.head)
-      $(doc.body).empty().html(this.body)
-
-      this.$el = $('<span id=\'snapshot\'>snapshot</span>').appendTo(cy.$$('body'))
-    })
-
     it('does not clone scripts', function () {
       $('<script type=\'text/javascript\' />').appendTo(cy.$$('body'))
 
@@ -95,17 +83,20 @@ describe('driver/src/cy/snapshots', () => {
     })
 
     it('sets data-cypress-el attr', function () {
-      const attr = cy.spy(this.$el, 'attr')
+      const $el = $('<span id=\'snapshot\'>snapshot</span>').appendTo(cy.$$('body'))
+      const attr = cy.spy($el, 'attr')
 
-      cy.createSnapshot(null, this.$el)
+      cy.createSnapshot(null, $el)
 
       expect(attr).to.be.calledWith('data-cypress-el', 'true')
     })
 
     it('removes data-cypress-el attr', function () {
-      cy.createSnapshot(null, this.$el)
+      const $el = $('<span id=\'snapshot\'>snapshot</span>').appendTo(cy.$$('body'))
+
+      cy.createSnapshot(null, $el)
 
-      expect(this.$el.attr('data-cypress-el')).to.be.undefined
+      expect($el.attr('data-cypress-el')).to.be.undefined
     })
 
     // https://github.com/cypress-io/cypress/issues/8679
diff --git a/packages/driver/cypress/e2e/cypress/cy.cy.js b/packages/driver/cypress/e2e/cypress/cy.cy.js
index 40d86956b3d0..8caac130fd2d 100644
--- a/packages/driver/cypress/e2e/cypress/cy.cy.js
+++ b/packages/driver/cypress/e2e/cypress/cy.cy.js
@@ -1,20 +1,8 @@
 const { $ } = Cypress
 
 describe('driver/src/cypress/cy', () => {
-  let body
-
-  before(() => {
-    cy
-    .visit('/fixtures/dom.html')
-    .then((win) => {
-      body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(() => {
-    const doc = cy.state('document')
-
-    $(doc.body).empty().html(body)
+    cy.visit('/fixtures/dom.html')
   })
 
   // https://github.com/cypress-io/cypress/issues/7731
diff --git a/packages/driver/cypress/e2e/cypress/log.cy.js b/packages/driver/cypress/e2e/cypress/log.cy.js
index e1e3f681de8f..c534282bd670 100644
--- a/packages/driver/cypress/e2e/cypress/log.cy.js
+++ b/packages/driver/cypress/e2e/cypress/log.cy.js
@@ -1,4 +1,4 @@
-const { create } = require('@packages/driver/src/cypress/log')
+const { create, LogUtils } = require('@packages/driver/src/cypress/log')
 
 describe('src/cypress/log', function () {
   context('#snapshot', function () {
@@ -54,4 +54,51 @@ describe('src/cypress/log', function () {
       expect(result).to.equal(log)
     })
   })
+
+  context('countLogsByTests', () => {
+    it('returns zero if tests is empty', () => {
+      const tests = {}
+
+      expect(LogUtils.countLogsByTests(tests)).to.equal(0)
+    })
+
+    it('finds the highest id amongst the different types', () => {
+      const tests = {
+        a: {
+          agents: [{
+            id: 'log-idp.com-1',
+          }],
+          routes: [{
+            id: 'log-idp.com-2',
+          }],
+          commands: [{
+            id: 'log-idp.com-3',
+          }],
+          prevAttempts: [{
+            agents: [{
+              id: 'log-idp.com-4',
+            }],
+            routes: [{
+              id: 'log-idp.com-5',
+            }],
+            commands: [{
+              id: 'log-idp.com-6',
+            }],
+          }],
+        },
+      }
+
+      expect(LogUtils.countLogsByTests(tests)).to.equal(6)
+    })
+
+    it('returns zero if there are no agents, routes, or commands', () => {
+      const tests = {
+        a: {
+          notAThing: true,
+        },
+      }
+
+      expect(LogUtils.countLogsByTests(tests)).to.equal(0)
+    })
+  })
 })
diff --git a/packages/driver/cypress/e2e/cypress/proxy-logging.cy.ts b/packages/driver/cypress/e2e/cypress/proxy-logging.cy.ts
index b89a4bbdf798..7b24f550cc79 100644
--- a/packages/driver/cypress/e2e/cypress/proxy-logging.cy.ts
+++ b/packages/driver/cypress/e2e/cypress/proxy-logging.cy.ts
@@ -104,6 +104,8 @@ describe('Proxy Logging', () => {
 
     // @see https://github.com/cypress-io/cypress/issues/18757 and https://github.com/cypress-io/cypress/issues/17656
     it('xhr log has response body/status code when xhr response is logged first', (done) => {
+      cy.visit('/fixtures/empty.html')
+
       cy.window()
       .then({ timeout: 10000 }, (win) => {
         cy.on('log:changed', (log) => {
@@ -149,6 +151,8 @@ describe('Proxy Logging', () => {
 
     // @see https://github.com/cypress-io/cypress/issues/18757 and https://github.com/cypress-io/cypress/issues/17656
     it('xhr log has response body/status code when xhr response is logged second', (done) => {
+      cy.visit('/fixtures/empty.html')
+
       cy.window()
       .then({ timeout: 10000 }, (win) => {
         cy.on('log:changed', (log) => {
@@ -177,15 +181,22 @@ describe('Proxy Logging', () => {
           }
         })
 
-        const oldOnload = cy.state('server').options.onLoad
+        const xhr = new win.XMLHttpRequest()
 
-        cy.stub(cy.state('server').options, 'onLoad').log(false).callsFake(function (...args) {
-          setTimeout(() => {
-            oldOnload.call(this, ...args)
-          }, 500)
+        const logIncomingRequest = Cypress.ProxyLogging.logIncomingRequest
+        const updateRequestWithResponse = Cypress.ProxyLogging.updateRequestWithResponse
+
+        // To simulate the xhr call landing second, we send updateRequestWithResponse immediately after
+        // the call is intercepted
+        cy.stub(Cypress.ProxyLogging, 'logIncomingRequest').log(false).callsFake(function (...args) {
+          logIncomingRequest.call(this, ...args)
+          updateRequestWithResponse.call(this, {
+            requestId: args[0].requestId,
+            status: 404,
+          })
         })
 
-        const xhr = new win.XMLHttpRequest()
+        cy.stub(Cypress.ProxyLogging, 'updateRequestWithResponse').log(false).callsFake(function () {})
 
         xhr.open('GET', '/some-url')
         xhr.send()
@@ -460,6 +471,7 @@ describe('Proxy Logging', () => {
         }
 
         beforeEach(() => {
+          cy.visit('/fixtures/empty.html')
           cy.window()
           .then(({ XMLHttpRequest }) => {
             $XMLHttpRequest = XMLHttpRequest
diff --git a/packages/driver/cypress/e2e/dom/coordinates.cy.ts b/packages/driver/cypress/e2e/dom/coordinates.cy.ts
index f7d272ac1d06..abcc50232e02 100644
--- a/packages/driver/cypress/e2e/dom/coordinates.cy.ts
+++ b/packages/driver/cypress/e2e/dom/coordinates.cy.ts
@@ -1,25 +1,16 @@
+import $coordinates from '../../../src/dom/coordinates'
+import $elements from '../../../src/dom/elements'
+
 const { $ } = Cypress
 
 export {}
 
 describe('src/dom/coordinates', () => {
-  let doc: Document
-
-  before(() => {
-    return cy
-    .visit('/fixtures/generic.html')
-    .then(function (win) {
-      this.body = win.document.body.outerHTML
-    })
-  })
-
   beforeEach(function () {
-    doc = cy.state('document')
-
-    $(doc.body).empty().html(this.body)
-
-    this.$button = $('<button style=\'position: absolute; top: 25px; left: 50px; width: 100px; line-height: 50px; padding: 10px; margin: 10px; border: 10px solid black\'>foo</button>')
-    .appendTo(cy.$$('body'))
+    cy.visit('/fixtures/generic.html').then(() => {
+      this.$button = $('<button style=\'position: absolute; top: 25px; left: 50px; width: 100px; line-height: 50px; padding: 10px; margin: 10px; border: 10px solid black\'>foo</button>')
+      .appendTo(cy.$$('body'))
+    })
   })
 
   // this is necessary so that document.elementFromPoint
@@ -107,17 +98,17 @@ describe('src/dom/coordinates', () => {
 
   context('.getElementAtPointFromViewport', () => {
     it('returns same element based on x/y coords', function () {
-      expect(Cypress.dom.getElementAtPointFromViewport(doc, 100, 60)).to.eq(this.$button.get(0))
+      expect(Cypress.dom.getElementAtPointFromViewport(cy.state('document'), 100, 60)).to.eq(this.$button.get(0))
     })
 
     it('does not return if element is hidden', function () {
       this.$button.hide()
 
-      expect(Cypress.dom.getElementAtPointFromViewport(doc, 100, 60)).not.to.eq(this.$button.get(0))
+      expect(Cypress.dom.getElementAtPointFromViewport(cy.state('document'), 100, 60)).not.to.eq(this.$button.get(0))
     })
 
     it('returns null if no element was found', function () {
-      expect(Cypress.dom.getElementAtPointFromViewport(doc, 1e9, 1e9)).to.be.null
+      expect(Cypress.dom.getElementAtPointFromViewport(cy.state('document'), 1e9, 1e9)).to.be.null
     })
   })
 
@@ -233,6 +224,51 @@ describe('src/dom/coordinates', () => {
     })
   })
 
+  context('isAUTFrame', () => {
+    const { isAUTFrame } = $coordinates
+
+    // our test for a window is that it has a `window` that refers
+    // to itself
+    const getWindowLikeObject = () => {
+      const win = { parent: {} as any }
+
+      win.parent.window = win.parent
+
+      return win
+    }
+
+    it('returns true if parent is a window and not an iframe', () => {
+      const win = cy.state('window')
+
+      expect(isAUTFrame(win)).to.be.true
+    })
+
+    it('returns true if parent is a window and getting its frameElement property throws a cross-origin error', () => {
+      const win = getWindowLikeObject()
+      const err = new Error('cross-origin error')
+
+      err.name = 'SecurityError'
+
+      cy.stub($elements, 'getNativeProp').throws(err)
+
+      expect(isAUTFrame(win)).to.be.true
+    })
+
+    it('returns false if parent is not a window', () => {
+      const win = { parent: {} }
+
+      expect(isAUTFrame(win)).to.be.false
+    })
+
+    it('returns false if parent is an iframe', () => {
+      const win = getWindowLikeObject()
+
+      cy.stub($elements, 'getNativeProp').returns(true)
+
+      expect(isAUTFrame(win)).to.be.false
+    })
+  })
+
   context('span spanning multiple lines', () => {
     it('gets first dom rect in multiline text', () => {
       $(`\
diff --git a/packages/driver/cypress/e2e/dom/elements.cy.ts b/packages/driver/cypress/e2e/dom/elements.cy.ts
index ce3b286ecf57..a7a08d2c0388 100644
--- a/packages/driver/cypress/e2e/dom/elements.cy.ts
+++ b/packages/driver/cypress/e2e/dom/elements.cy.ts
@@ -135,38 +135,43 @@ describe('src/dom/elements', () => {
     })
 
     it('DOM element does not exist', () => {
-      cy.visit('/fixtures/dom.html')
-      const $el = $('foo-bar-baz')
+      cy.visit('/fixtures/dom.html').then(() => {
+        const $el = $('foo-bar-baz')
 
-      expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+        expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+      })
     })
 
     it('when html', () => {
-      cy.visit('/fixtures/dom.html')
-      const $el = $('html')
+      cy.visit('/fixtures/dom.html').then(() => {
+        const $el = $('html')
 
-      expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+        expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+      })
     })
 
     it('when body', () => {
-      cy.visit('/fixtures/dom.html')
-      const $el = $('body')
+      cy.visit('/fixtures/dom.html').then(() => {
+        const $el = $('body')
 
-      expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+        expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+      })
     })
 
     it('when document', () => {
-      cy.visit('/fixtures/dom.html')
-      const $el = $('document')
+      cy.visit('/fixtures/dom.html').then(() => {
+        const $el = $('document')
 
-      expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+        expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.true
+      })
     })
 
     it('when existing DOM element', () => {
-      cy.visit('/fixtures/dom.html')
-      const $el = $('input')
+      cy.visit('/fixtures/dom.html').then(() => {
+        const $el = $('input')
 
-      expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.false
+        expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.false
+      })
     })
   })
 
diff --git a/packages/driver/cypress/e2e/e2e/origin/basic_login.cy.ts b/packages/driver/cypress/e2e/e2e/origin/basic_login.cy.ts
new file mode 100644
index 000000000000..d843a0bb4dc0
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/basic_login.cy.ts
@@ -0,0 +1,247 @@
+describe('basic login', () => {
+  // Scenario, Token based auth. Visit site, redirect to IDP hosted on secondary origin, login and redirect back to site.
+  describe('visit primary first', () => {
+    it('logs in with idp redirect', () => {
+      cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+      cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]') // Stability is false, this command is prevented from running until stability is achieved.
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+    })
+
+    // Scenario, Token based auth. Visit site, manually redirect to IDP hosted on secondary origin, login and redirect back to site.
+    it('does not redirect', () => {
+      cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+      // Missing the call to go to idp.com
+      cy.window().then((win) => {
+        win.location.href = 'http://www.idp.com:3500/fixtures/auth/idp.html'
+      })
+
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('FJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]')
+      .invoke('text')
+      .should('equal', 'Welcome FJohnson')
+    })
+
+    it('visits foobar first', () => {
+      cy.visit('http://www.foobar.com:3500/fixtures/auth/index.html') // Establishes primary origin
+      cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]') // Stability is false, this command is prevented from running until stability is achieved.
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+    })
+  })
+
+  // Scenario, Token based auth. Visit IDP hosted on secondary origin, login and redirect back to site.
+  describe('visit secondary first', () => {
+    describe('How to determine primary origin', () => {
+      // NOTE: Enable to set the top origin to foobar before running the next test.
+      it.skip('reset top', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/auth/index.html')
+      })
+
+      // Primary established via base url
+      // TODO: baseUrl does not establish primary without a visit
+      it.skip('logs in with primary set via baseurl', { baseUrl: 'http://localhost:3500' }, () => {
+        cy.origin('http://idp.com:3500', () => { // primary origin is localhost
+          cy.visit('http://www.idp.com:3500/fixtures/auth/idp.html')
+          cy.get('[data-cy="username"]').type('FJohnson')
+          cy.get('[data-cy="login"]').click()
+        })
+
+        cy.get('[data-cy="welcome"]')
+        .invoke('text')
+        .should('equal', 'Welcome FJohnson')
+      })
+
+      it('reset top', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/auth/index.html')
+      })
+
+      it('logs in with primary set via visit', () => {
+        cy.visit('/fixtures/auth/index.html')
+        cy.origin('http://idp.com:3500', () => { // primary origin is localhost
+          cy.visit('http://www.idp.com:3500/fixtures/auth/idp.html')
+          cy.get('[data-cy="username"]').type('FJohnson')
+          cy.get('[data-cy="login"]').click()
+        })
+
+        cy.get('[data-cy="welcome"]')
+        .invoke('text')
+        .should('equal', 'Welcome FJohnson')
+      })
+    })
+
+    describe('session', () => {
+    // Custom login command that establishes a session
+      const login = (name) => {
+        cy.session(name, () => {
+          // Note, this assumes localhost is the primary origin, ideally we'd be able to specify this directly.
+          cy.origin('http://idp.com:3500', { args: name }, (name) => {
+            cy.visit('http://www.idp.com:3500/fixtures/auth/idp.html')
+            cy.get('[data-cy="username"]').type(name)
+            cy.get('[data-cy="login"]').click()
+          })
+
+          cy.url().should('contain', '/index.html')
+        }, {
+          validate: () => {
+            cy.window().then((win) => {
+              const cypressAuthToken = win.sessionStorage.getItem('cypressAuthToken')
+
+              return !!cypressAuthToken
+            })
+          },
+        })
+      }
+
+      // Scenario, Token based auth. Establish session using custom login command (login through IDP hosted on secondary origin), and verify to site.
+      it('establishes a session', () => {
+        login('BJohnson')
+        cy.visit('/fixtures/auth/index.html')
+        // Verify that the user has logged in on localhost
+        cy.get('[data-cy="welcome"]')
+        .invoke('text')
+        .should('equal', 'Welcome BJohnson')
+      })
+
+      // Scenario, Token based auth. use previously established session, and verify to site.
+      it('uses established session', () => {
+        login('BJohnson')
+        cy.visit('/fixtures/auth/index.html')
+        cy.get('[data-cy="welcome"]')
+        .invoke('text')
+        .should('equal', 'Welcome BJohnson')
+      })
+    })
+
+    // What we don't want them to do, but should still work
+    // Visit IDP first
+    it('logs in and runs the test in cy.origin', () => { // Setting the base url
+      cy.visit('http://www.idp.com:3500/fixtures/auth/idp.html') // Visit idp.com
+      cy.get('[data-cy="username"]').type('FJohnson')
+      cy.get('[data-cy="login"]').click()
+
+      cy.origin('http://localhost:3500', () => {
+        cy.get('[data-cy="welcome"]')
+        .invoke('text')
+        .should('equal', 'Welcome FJohnson')
+      })
+    })
+  })
+})
+
+describe('Multi-step Auth', () => {
+  // TODO: cy.origin does not work in cy.origin yet.
+  it.skip('final auth redirects back to localhost - nested', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-with-approval"]').click() // takes you to foobar.com.../approval
+    cy.url() //fail
+    cy.origin('http://foobar.com:3500', () => { // Parent origin is localhost
+      cy.get('[data-cy="approve-orig"]').click() // takes you to idp.com
+      cy.origin('http://idp.com:3500', () => { // Parent origin is foobar.com
+        cy.get('[data-cy="username"]').type('MarkyMark')
+        cy.get('[data-cy="login"]').click() // Takes you back to localhost
+      }) // Does not wait on foobar.com because there are no subsequent commands (would wait forever)
+    }) // Waits on localhost because there are subsequent commands
+
+    // Verify that the user has logged in
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome MarkyMark')
+  })
+
+  it('final-auth redirects back to localhost - flat', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-with-approval"]').click() // takes you to foobar.com.../approval
+    cy.origin('http://foobar.com:3500', () => { // Parent origin is localhost
+      cy.get('[data-cy="approve-orig"]').click() // takes you to idp.com
+    }) // Exits and moves on to the next command
+
+    cy.origin('http://idp.com:3500', () => { // Parent origin is localhost
+      cy.get('[data-cy="username"]').type('MarkyMark')
+      cy.get('[data-cy="login"]').click() // Takes you back to localhost
+    }) // Exits and moves on to the next command
+
+    // Verify that the user has logged in
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome MarkyMark')
+  })
+
+  // TODO: cy.origin does not work in cy.origin yet.
+  it.skip('final auth redirects back to localhost - nested - approval first', () => {
+    cy.origin('http://foobar.com:3500', () => { // parent origin is localhost
+      cy.visit('http://www.foobar.com:3500/fixtures/auth/approval.html')
+      cy.get('[data-cy="approve-orig"]').click() // takes you to idp.com
+      cy.origin('http://idp.com:3500', () => { // parent origin is foobar.com
+        cy.get('[data-cy="username"]').type('MarkyMark')
+        cy.get('[data-cy="login"]').click() // Takes you back to localhost
+      }) // Does not wait on foobar.com because there are no subsequent commands (would wait forever)
+    }) // Exits and moves on to the next command
+
+    // Verify that the user has logged in
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome MarkyMark')
+  })
+
+  // TODO: Switch to origin does not work in switch to origin yet.
+  it.skip('final auth redirects back to approval page - nested', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-with-approval"]').click() // takes you to foobar.com.../approval
+    cy.origin('http://foobar.com:3500', () => { // parent origin is localhost
+      cy.get('[data-cy="approve-me"]').click() // takes you to idp.com
+      cy.origin('http://idp.com:3500', () => { // parent origin is foobar.com
+        cy.get('[data-cy="username"]').type('MarkyMark')
+        cy.get('[data-cy="login"]').click() // Takes you back to foobar.com.../approval
+      }) // Exits and moves on to the next command
+
+      cy.get('[data-cy="login-success"]').click() // Takes you back to localhost
+    }) // Exits and moves on to the next command
+
+    // Verify that the user has logged in
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome MarkyMark')
+  })
+
+  it('final auth redirects back to approval page - flat', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-with-approval"]').click() // takes you to foobar.com.../approval
+    cy.origin('http://foobar.com:3500', () => { // parent origin is localhost
+      cy.get('[data-cy="approve-me"]').click() // takes you to idp.com
+    }) // waits on localhost forever, this breaks
+
+    cy.origin('http://idp.com:3500', () => { // parent origin is localhost
+      cy.get('[data-cy="username"]').type('MarkyMark')
+      cy.get('[data-cy="login"]').click() // Takes you back to foobar.com.../approval
+    }) // Exits and moves on to the next command
+
+    cy.origin('http://foobar.com:3500', () => { // parent origin is localhost
+      cy.get('[data-cy="login-success"]').click() // Takes you back to localhost
+    }) // Exits and moves on to the next command
+
+    // Verify that the user has logged in
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome MarkyMark')
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/actions.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/actions.cy.ts
new file mode 100644
index 000000000000..3ed50a18259d
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/actions.cy.ts
@@ -0,0 +1,809 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin actions', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+  })
+
+  it('.type()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').type('foo')
+      .should('have.value', 'foo')
+    })
+  })
+
+  it('.focus()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').focus()
+      .should('be.focused')
+    })
+  })
+
+  it('.blur()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').type('foo').blur()
+      .should('not.be.focused')
+    })
+  })
+
+  it('.clear()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input')
+      .type('foo').should('have.value', 'foo')
+      .clear().should('have.value', '')
+    })
+  })
+
+  it('.submit()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      const afterFormSubmitted = new Promise<void>((resolve) => {
+        cy.once('form:submitted', resolve)
+      })
+
+      cy.get('#input-type-submit').submit()
+      cy.wrap(afterFormSubmitted)
+    })
+  })
+
+  it('.click()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').then(($btn) => {
+        const onClick = new Promise<void>((resolve) => {
+          $btn.on('click', () => resolve())
+        })
+
+        cy.wrap($btn).click()
+        cy.wrap(onClick)
+      })
+    })
+  })
+
+  it('.dblclick()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').then(($btn) => {
+        const afterDblClick = new Promise<void>((resolve) => {
+          $btn.on('dblclick', () => resolve())
+        })
+
+        cy.wrap($btn).dblclick()
+        cy.wrap(afterDblClick)
+      })
+    })
+  })
+
+  it('.rightclick()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').then(($btn) => {
+        const afterContextmenu = new Promise<void>((resolve) => {
+          $btn.on('contextmenu', () => resolve())
+        })
+
+        cy.wrap($btn).rightclick()
+        cy.wrap(afterContextmenu)
+      })
+    })
+  })
+
+  it('.check()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get(':checkbox[name="colors"][value="blue"]')
+      .check().should('be.checked')
+    })
+  })
+
+  it('.uncheck()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get(':checkbox[name="colors"][value="blue"]')
+      .check().should('be.checked')
+      .uncheck().should('not.be.checked')
+    })
+  })
+
+  it('.select()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('select[name="foods"]')
+      .select('Japanese').should('have.value', 'Japanese')
+    })
+  })
+
+  it('.scrollIntoView()', () => {
+    cy.get('a[data-cy="scrolling-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#scroll-into-view-vertical h5')
+      .should('not.be.visible')
+      .scrollIntoView().should('be.visible')
+    })
+  })
+
+  it('.scrollTo()', () => {
+    cy.get('a[data-cy="scrolling-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#scroll-into-view-vertical h5').should('not.be.visible')
+      cy.get('#scroll-into-view-vertical').scrollTo(0, 300)
+      cy.get('#scroll-into-view-vertical h5').should('be.visible')
+    })
+  })
+
+  it('.trigger()', () => {
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').then(($btn) => {
+        const afterClick = new Promise<void>((resolve) => {
+          $btn.on('click', () => resolve())
+        })
+
+        cy.wrap($btn).trigger('click')
+        cy.wrap(afterClick)
+      })
+    })
+  })
+
+  it('.selectFile()', () => {
+    cy.get('a[data-cy="files-form-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap(Cypress.Buffer.from('foo')).as('foo')
+
+      cy.get('#basic')
+      .selectFile({ contents: '@foo', fileName: 'foo.txt' })
+      .should(($input) => {
+        const input = $input[0] as HTMLInputElement
+        const file = input!.files![0]
+
+        expect(file.name).to.equal('foo.txt')
+
+        return file.arrayBuffer()
+        .then((arrayBuffer) => {
+          const decoder = new TextDecoder('utf8')
+          const contents = decoder.decode(arrayBuffer)
+
+          expect(contents).to.equal('foo')
+        })
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    const { _ } = Cypress
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.get()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, $el } = findCrossOriginLogs('get', logs, 'foobar.com')
+
+        // make sure $el is in fact a jquery instance to keep the logs happy
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('get')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#button')
+
+        // The Yielded value here SHOULD be correct as it will be reified from its props as it should not be found in the current DOM state
+        expect(consoleProps.Yielded.tagName).to.equal('BUTTON')
+        expect(consoleProps.Yielded.getAttribute('id')).to.equal('button')
+      })
+    })
+
+    it('.alias()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').as('buttonAlias')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('get', logs, 'foobar.com')
+
+        // make sure $el is in fact a jquery instance to keep the logs happy
+        expect($el.jquery).to.be.ok
+
+        expect(alias).to.equal('buttonAlias')
+        expect(aliasType).to.equal('dom')
+        expect(consoleProps.Command).to.equal('get')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#button')
+
+        // The Yielded value here SHOULD be correct as it will be reified from its props as it should not be found in the current DOM state
+        expect(consoleProps.Yielded.tagName).to.equal('BUTTON')
+        expect(consoleProps.Yielded.getAttribute('id')).to.equal('button')
+      })
+    })
+
+    it('.click()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button-inside-a').click()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('click', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(alias).to.equal(undefined)
+        expect(aliasType).to.equal(undefined)
+
+        expect(consoleProps.Command).to.equal('click')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Selector).to.be.undefined
+        expect(consoleProps.Yielded).to.be.undefined
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        // TODO: test class list serialization
+        // expect(consoleProps['Applied To']).to.have.property('classList').that.contains(['my-custom-button-css', 'class2', '@class3'])
+        expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button-inside-a')
+        expect(consoleProps['Applied To'].innerHTML).to.contain('<span>click button</span>')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.dblclick()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').dblclick()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('dblclick', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('dblclick')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Selector).to.be.undefined
+        expect(consoleProps.Yielded).to.be.undefined
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button')
+        expect(consoleProps['Applied To'].innerHTML).to.contain('button')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'dblclick'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.rightclick()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').rightclick()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('rightclick', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('rightclick')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Selector).to.be.undefined
+        expect(consoleProps.Yielded).to.be.undefined
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.contain('button')
+        expect(consoleProps['Applied To'].innerHTML).to.contain('button')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.type()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('input#input').type('foo')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('type', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(alias).to.equal(undefined)
+        expect(aliasType).to.equal(undefined)
+
+        expect(consoleProps.Command).to.equal('type')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Typed).to.equal('foo')
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input')
+        expect(consoleProps['Applied To'].innerHTML).to.equals('')
+        expect(consoleProps['Applied To'].type).to.equal('text')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+        expect(consoleProps.table[2]).to.be.a('function')
+
+        const mouseEventsTable = consoleProps.table[1]()
+        const KeyboardEventsTable = consoleProps.table[2]()
+
+        expect(mouseEventsTable.name).to.equal('Mouse Events')
+        expect(KeyboardEventsTable.name).to.equal('Keyboard Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(mouseEventsTable.data).to.be.a('object')
+        expect(KeyboardEventsTable.data).to.be.a('object')
+
+        _.forEach(mouseEventsTable.data, (datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+
+        _.forEach(KeyboardEventsTable.data, (datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Events Fired').that.equals('keydown, keypress, beforeinput, textInput, input, keyup')
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+
+        expect(KeyboardEventsTable.data[1]).to.have.property('Details').that.equals('{ code: KeyF, which: 70 }')
+        expect(KeyboardEventsTable.data[1]).to.have.property('Typed').that.equals('f')
+
+        expect(KeyboardEventsTable.data[2]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }')
+        expect(KeyboardEventsTable.data[2]).to.have.property('Typed').that.equals('o')
+
+        expect(KeyboardEventsTable.data[3]).to.have.property('Details').that.equals('{ code: KeyO, which: 79 }')
+        expect(KeyboardEventsTable.data[3]).to.have.property('Typed').that.equals('o')
+      })
+    })
+
+    it('.submit()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('form#multiple-inputs-and-input-submit input[name="fname"]').type('foo')
+        cy.get('form#multiple-inputs-and-input-submit input[name="lname"]').type('bar')
+        cy.get('form#multiple-inputs-and-input-submit').submit()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('submit', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('submit')
+        expect(consoleProps.Elements).to.equal(1)
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.equal('multiple-inputs-and-input-submit')
+        expect(consoleProps['Applied To'].querySelector('input[name="fname"]')).to.be.ok
+        expect(consoleProps['Applied To'].querySelector('input[name="lname"]')).to.be.ok
+        expect(consoleProps['Applied To'].querySelector('input[type="submit"]')).to.be.ok
+
+        // make sure input values are passed along into the serialized snapshot/element
+        expect(consoleProps['Applied To'].querySelector('input[name="fname"]').value).to.equal('foo')
+        expect(consoleProps['Applied To'].querySelector('input[name="lname"]').value).to.equal('bar')
+        expect(consoleProps['Applied To'].querySelector('input[type="submit"]').value).to.equal('submit me')
+      })
+    })
+
+    it('.focus()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#input').focus()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('focus', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('focus')
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input')
+      })
+    })
+
+    it('.blur()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        // FIXME: snapshot shows the primary domain (before type). Should be secondary
+        cy.get('#input').type('foo').blur()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('blur', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('blur')
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input')
+      })
+    })
+
+    it('.clear()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        // FIXME: snapshot shows the primary domain. Should be secondary
+        cy.get('#input').type('foo').clear()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('clear', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('clear')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Options).to.be.undefined
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'].getAttribute('id')).to.equal('input')
+      })
+    })
+
+    it('.check()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get(':checkbox[name="colors"][value="blue"]').check()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('check', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('check')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.uncheck()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get(':checkbox[name="colors"][value="blue"]')
+        .check().uncheck()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('uncheck', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('uncheck')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Options).to.be.undefined
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.select()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        // TODO: wrong selected value is displayed in the snapshot after
+        cy.get('select[name="foods"]').select('Japanese')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('select', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('select')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Coords).to.have.property('x').that.is.a('number')
+        expect(consoleProps.Coords).to.have.property('y').that.is.a('number')
+
+        expect(consoleProps.Options).to.be.undefined
+        expect(consoleProps.Selected[0]).to.equal('Japanese')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('SELECT')
+
+        expect(consoleProps.table[1]).to.be.a('function')
+
+        const tableContents = consoleProps.table[1]()
+
+        expect(tableContents.name).to.equal('Mouse Events')
+        // can't exactly assert that is an Array because it is a Proxy object to an array
+        expect(tableContents.data).to.be.a('object')
+
+        tableContents.data.forEach((datum) => {
+          expect(datum).to.have.property('Active Modifiers').that.equals(null)
+          expect(datum).to.have.property('Event Type').that.is.oneOf(['pointerover', 'mouseover', 'pointermove', 'mousemove', 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', 'contextmenu'])
+          expect(datum).to.have.property('Prevented Default').that.equals(null)
+          expect(datum).to.have.property('Stopped Propagation').that.equals(null)
+          expect(datum).to.have.property('Target Element').that.deep.equals(consoleProps['Applied To'])
+        })
+      })
+    })
+
+    it('.scrollIntoView()', () => {
+      cy.get('a[data-cy="scrolling-link"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        // FIXME: snapshot of primary is showing for scrollIntoView
+        cy.get('#scroll-into-view-vertical h5')
+        .should('not.be.visible')
+        .scrollIntoView()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('scrollIntoView', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('scrollIntoView')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('H5')
+        expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('H5')
+      })
+    })
+
+    it('.scrollTo()', () => {
+      cy.get('a[data-cy="scrolling-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#scroll-into-view-vertical h5').should('not.be.visible')
+        cy.get('#scroll-into-view-vertical').scrollTo(0, 300)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, $el } = findCrossOriginLogs('scrollTo', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('scrollTo')
+        expect(consoleProps.X).to.equal(0)
+        expect(consoleProps.Y).to.equal(300)
+        expect(consoleProps['Scrolled Element']).to.have.property('tagName').that.equals('DIV')
+      })
+    })
+
+    it('.trigger()', () => {
+      cy.get('a[data-cy="dom-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').trigger('click')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, $el } = findCrossOriginLogs('trigger', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('trigger')
+        expect(consoleProps['Event options']).to.have.property('bubbles').that.is.a('boolean')
+        expect(consoleProps['Event options']).to.have.property('cancelable').that.is.a('boolean')
+        expect(consoleProps['Event options']).to.have.property('clientX').that.is.a('number')
+        expect(consoleProps['Event options']).to.have.property('clientY').that.is.a('number')
+        expect(consoleProps['Event options']).to.have.property('pageX').that.is.a('number')
+        expect(consoleProps['Event options']).to.have.property('pageY').that.is.a('number')
+        expect(consoleProps['Event options']).to.have.property('screenX').that.is.a('number')
+        expect(consoleProps['Event options']).to.have.property('screenY').that.is.a('number')
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('BUTTON')
+      })
+    })
+
+    it('.selectFile()', () => {
+      cy.get('a[data-cy="files-form-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#basic').selectFile({ contents: Cypress.Buffer.from('foo'), fileName: 'foo.txt' })
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('selectFile', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('selectFile')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Target).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Target).to.have.property('id').that.equals('basic')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/aliasing.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/aliasing.cy.ts
new file mode 100644
index 000000000000..cd36fef8fbd2
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/aliasing.cy.ts
@@ -0,0 +1,50 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin aliasing', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.as()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get(':checkbox[name="colors"][value="blue"]').as('checkbox')
+      cy.get('@checkbox').click().should('be.checked')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.as()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').as('buttonAlias')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { alias, aliasType, consoleProps, $el } = findCrossOriginLogs('get', logs, 'foobar.com')
+
+        // make sure $el is in fact a jquery instance to keep the logs happy
+        expect($el.jquery).to.be.ok
+
+        expect(alias).to.equal('buttonAlias')
+        expect(aliasType).to.equal('dom')
+        expect(consoleProps.Command).to.equal('get')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#button')
+
+        // The Yielded value here SHOULD be correct as it will be reified from its props as it should not be found in the current DOM state
+        expect(consoleProps.Yielded.tagName).to.equal('BUTTON')
+        expect(consoleProps.Yielded.getAttribute('id')).to.equal('button')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/assertions.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/assertions.cy.ts
new file mode 100644
index 000000000000..4a693c8fa5d6
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/assertions.cy.ts
@@ -0,0 +1,56 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin assertions', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.should() and .and()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get(':checkbox[name="colors"][value="blue"]')
+      .should('not.be.checked').and('not.be.disabled')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.should() and .and()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get(':checkbox[name="colors"][value="blue"]')
+        .should('not.be.checked').and('not.be.disabled')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const assertionLogs = findCrossOriginLogs('assert', logs, 'foobar.com')
+
+        expect(assertionLogs[0].consoleProps.Message).to.equal('expected <input> not to be checked')
+        expect(assertionLogs[1].consoleProps.Message).to.equal('expected <input> not to be disabled')
+
+        assertionLogs.forEach(({ $el, consoleProps }) => {
+          expect($el.jquery).to.be.ok
+
+          expect(consoleProps.Command).to.equal('assert')
+          expect(consoleProps.subject[0]).to.have.property('tagName').that.equals('INPUT')
+          expect(consoleProps.subject[0]).to.have.property('value').that.equals('blue')
+          expect(consoleProps.subject[0].getAttribute('name')).to.equal('colors')
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/connectors.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/connectors.cy.ts
new file mode 100644
index 000000000000..5790fb55920c
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/connectors.cy.ts
@@ -0,0 +1,119 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin connectors', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.each()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-name>[name="colors"]').each(($element, index) => {
+        expect($element.prop('type')).to.equal('checkbox')
+      })
+    })
+  })
+
+  it('.its()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').its('length').should('eq', 3)
+    })
+  })
+
+  it('.invoke()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').invoke('text').should('eq', 'button')
+    })
+  })
+
+  it('.spread()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const arr = ['foo', 'bar', 'baz']
+
+      cy.wrap(arr).spread((foo, bar, baz) => {
+        expect(foo).to.equal('foo')
+        expect(bar).to.equal('bar')
+        expect(baz).to.equal('baz')
+      })
+    })
+  })
+
+  it('.then()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').then(($list) => {
+        expect($list).to.have.length(3)
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.its()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').its('length')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('its', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('its')
+        expect(consoleProps.Property).to.equal('.length')
+        expect(consoleProps.Yielded).to.equal(3)
+
+        expect(consoleProps.Subject.length).to.equal(3)
+
+        // make sure subject elements are indexed in the correct order
+        expect(consoleProps.Subject[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[0]).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Subject[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[1]).to.have.property('id').that.equals('name')
+
+        expect(consoleProps.Subject[2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Subject[2]).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.invoke()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').invoke('text')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps, $el } = findCrossOriginLogs('invoke', logs, 'foobar.com')
+
+        expect($el.jquery).to.be.ok
+
+        expect(consoleProps.Command).to.equal('invoke')
+        expect(consoleProps.Function).to.equal('.text()')
+        expect(consoleProps.Yielded).to.equal('button')
+
+        expect(consoleProps.Subject).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps.Subject).to.have.property('id').that.equals('button')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/cookies.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/cookies.cy.ts
new file mode 100644
index 000000000000..7c69da0c2908
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/cookies.cy.ts
@@ -0,0 +1,177 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin cookies', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('.getCookie(), .getCookies(), and .setCookie()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.getCookies().should('be.empty')
+
+      cy.setCookie('foo', 'bar')
+
+      cy.getCookie('foo').should('have.property', 'value', 'bar')
+      cy.getCookies().should('have.length', 1)
+    })
+  })
+
+  it('.clearCookie()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.setCookie('foo', 'bar')
+      cy.getCookie('foo').should('not.be.null')
+      cy.clearCookie('foo')
+      cy.getCookie('foo').should('be.null')
+    })
+  })
+
+  it('.clearCookies()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.setCookie('foo', 'bar')
+      cy.setCookie('faz', 'baz')
+
+      cy.getCookies().should('have.length', 2)
+      cy.clearCookies()
+      cy.getCookies().should('be.empty')
+    })
+  })
+
+  context('#consoleProps', () => {
+    const { _ } = Cypress
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.getCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+        cy.setCookie('foo', 'bar')
+        cy.getCookie('foo')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('getCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('getCookie')
+        expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps.Yielded).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.getCookies()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+
+        cy.setCookie('foo', 'bar')
+        cy.getCookies()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // get the last 'getCookies' command, which is the one we care about for this test
+        const allGetCookieLogs = findCrossOriginLogs('getCookies', logs, 'foobar.com')
+
+        const { consoleProps } = allGetCookieLogs.pop() as any
+
+        expect(consoleProps.Command).to.equal('getCookies')
+        expect(consoleProps['Num Cookies']).to.equal(1)
+
+        // can't exactly assert on length() as this is a array proxy object
+        expect(consoleProps.Yielded.length).to.equal(1)
+        expect(consoleProps.Yielded[0]).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded[0]).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded[0]).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded[0]).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded[0]).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded[0]).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.setCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.getCookies().should('be.empty')
+
+        cy.setCookie('foo', 'bar')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('setCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('setCookie')
+        expect(consoleProps.Yielded).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps.Yielded).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps.Yielded).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('secure').that.equals(false)
+        expect(consoleProps.Yielded).to.have.property('name').that.equals('foo')
+        expect(consoleProps.Yielded).to.have.property('value').that.equals('bar')
+        expect(consoleProps.Yielded).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.clearCookie()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.setCookie('foo', 'bar')
+        cy.getCookie('foo').should('not.be.null')
+        cy.clearCookie('foo')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('clearCookie', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('clearCookie')
+        expect(consoleProps.Yielded).to.equal('null')
+        expect(consoleProps['Cleared Cookie']).to.have.property('domain').that.includes('foobar.com')
+        expect(consoleProps['Cleared Cookie']).to.have.property('expiry').that.is.a('number')
+        expect(consoleProps['Cleared Cookie']).to.have.property('httpOnly').that.equals(false)
+        expect(consoleProps['Cleared Cookie']).to.have.property('secure').that.equals(false)
+        expect(consoleProps['Cleared Cookie']).to.have.property('name').that.equals('foo')
+        expect(consoleProps['Cleared Cookie']).to.have.property('value').that.equals('bar')
+        expect(consoleProps['Cleared Cookie']).to.have.property('path').that.is.a('string')
+      })
+    })
+
+    it('.clearCookies()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.setCookie('foo', 'bar')
+        cy.setCookie('faz', 'baz')
+
+        cy.getCookies().should('have.length', 2)
+        cy.clearCookies()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('clearCookies', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('clearCookies')
+        expect(consoleProps['Num Cookies']).to.equal(2)
+
+        expect(consoleProps.Yielded).to.equal('null')
+
+        expect(consoleProps['Cleared Cookies'].length).to.equal(2)
+
+        expect(consoleProps['Cleared Cookies'][0]).to.have.property('name').that.equals('foo')
+        expect(consoleProps['Cleared Cookies'][0]).to.have.property('value').that.equals('bar')
+
+        expect(consoleProps['Cleared Cookies'][1]).to.have.property('name').that.equals('faz')
+        expect(consoleProps['Cleared Cookies'][1]).to.have.property('value').that.equals('baz')
+
+        _.forEach(consoleProps['Cleared Cookies'], (clearedCookie) => {
+          expect(clearedCookie).to.have.property('httpOnly').that.equals(false)
+          expect(clearedCookie).to.have.property('secure').that.equals(false)
+          expect(clearedCookie).to.have.property('path').that.is.a('string')
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/files.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/files.cy.ts
new file mode 100644
index 000000000000..d688ad1ed37f
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/files.cy.ts
@@ -0,0 +1,96 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin files', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('.fixture()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.fixture('example.json').then((json) => {
+        expect(json).to.be.an('object')
+        expect(json.example).to.be.true
+      })
+    })
+  })
+
+  it('.readFile()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.readFile('cypress/fixtures/example.json').then((json) => {
+        expect(json).to.be.an('object')
+        expect(json.example).to.be.true
+      })
+    })
+  })
+
+  it('.writeFile()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const contents = JSON.stringify({ foo: 'bar' })
+
+      cy.stub(Cypress, 'backend').resolves({
+        contents,
+        filePath: 'foo.json',
+      })
+
+      cy.writeFile('foo.json', contents).then(() => {
+        expect(Cypress.backend).to.be.calledWith(
+          'write:file',
+          'foo.json',
+          contents,
+          {
+            encoding: 'utf8',
+            flag: 'w',
+          },
+        )
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.readFile()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.readFile('cypress/fixtures/example.json')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('readFile', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('readFile')
+        expect(consoleProps['File Path']).to.include('cypress/fixtures/example.json')
+        expect(consoleProps.Contents).to.deep.equal({ example: true })
+      })
+    })
+
+    it('.writeFile()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const contents = JSON.stringify({ foo: 'bar' })
+
+        cy.stub(Cypress, 'backend').resolves({
+          contents,
+          filePath: 'foo.json',
+        })
+
+        cy.writeFile('foo.json', contents)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('writeFile', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('writeFile')
+        expect(consoleProps['File Path']).to.equal('foo.json')
+        expect(consoleProps.Contents).to.equal('{"foo":"bar"}')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/local_storage.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/local_storage.cy.ts
new file mode 100644
index 000000000000..77a1294480a3
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/local_storage.cy.ts
@@ -0,0 +1,52 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin local storage', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('.clearLocalStorage()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.window().then((win) => {
+        win.localStorage.setItem('foo', 'bar')
+        expect(win.localStorage.getItem('foo')).to.equal('bar')
+      })
+
+      cy.clearLocalStorage().should((localStorage) => {
+        expect(localStorage.length).to.equal(0)
+        expect(localStorage.getItem('foo')).to.be.null
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.clearLocalStorage()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.window().then((win) => {
+          win.localStorage.setItem('foo', 'bar')
+          expect(win.localStorage.getItem('foo')).to.equal('bar')
+        })
+
+        cy.clearLocalStorage()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('clearLocalStorage', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('clearLocalStorage')
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/location.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/location.cy.ts
new file mode 100644
index 000000000000..07dbc1f79ae0
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/location.cy.ts
@@ -0,0 +1,93 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin location', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('.hash()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.hash().should('be.empty')
+    })
+  })
+
+  it('.location()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.location().should((location) => {
+        expect(location.href).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+        expect(location.origin).to.equal('http://www.foobar.com:3500')
+      })
+    })
+  })
+
+  it('.url()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.url().should('equal', 'http://www.foobar.com:3500/fixtures/secondary-origin.html')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.hash()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.hash()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('hash', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('hash')
+      })
+    })
+
+    it('.location()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.location()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('location', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('location')
+
+        expect(consoleProps.Yielded).to.have.property('auth').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('authObj').that.is.undefined
+        expect(consoleProps.Yielded).to.have.property('hash').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('host').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('hostname').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('href').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('origin').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('originPolicy').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('pathname').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('port').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('protocol').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('search').that.is.a('string')
+        expect(consoleProps.Yielded).to.have.property('superDomain').that.is.a('string')
+      })
+    })
+
+    it('.url()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.url()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('url', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('url')
+
+        expect(consoleProps.Yielded).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/log.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/log.cy.ts
new file mode 100644
index 000000000000..859f714cce26
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/log.cy.ts
@@ -0,0 +1,69 @@
+import { assertLogLength } from '../../../../support/utils'
+
+context('cy.origin log', () => {
+  let logs: any = []
+  let lastTestLogId = ''
+
+  beforeEach(() => {
+    logs = []
+
+    cy.on('log:added', (attrs, log) => {
+      logs.push(log)
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('logs in primary and secondary origins', () => {
+    cy.origin<string>('http://foobar.com:3500', () => {
+      const afterLogAdded = new Promise<void>((resolve) => {
+        const listener = (attrs) => {
+          if (attrs.message === 'test log in cy.origin') {
+            expect(attrs.message).to.eq('test log in cy.origin')
+            cy.removeListener('log:added', listener)
+            resolve(attrs.id)
+          }
+        }
+
+        cy.on('log:added', listener)
+      })
+
+      cy.log('test log in cy.origin')
+      cy.wrap(afterLogAdded)
+    }).then((id) => {
+      lastTestLogId = id
+      // Verify the log is also fired in the primary origin.
+      expect(logs[6].get('message')).to.eq('test log in cy.origin')
+      // Verify the log has the same ID as was generated in the cross-origin
+      expect(logs[6].get('id')).to.equal(id)
+      assertLogLength(logs, 11)
+    })
+  })
+
+  it('has a different id in a second test', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const afterLogAdded = new Promise<void>((resolve) => {
+        const listener = (attrs) => {
+          if (attrs.message === 'test log in cy.origin') {
+            expect(attrs.message).to.eq('test log in cy.origin')
+            cy.removeListener('log:added', listener)
+            resolve(attrs.id)
+          }
+        }
+
+        cy.on('log:added', listener)
+      })
+
+      cy.log('test log in cy.origin')
+      cy.wrap(afterLogAdded)
+    }).then((id) => {
+      // Verify the log is also fired in the primary origin.
+      expect(logs[6].get('message')).to.eq('test log in cy.origin')
+      // Verify the log has the same ID as was generated in the cross-origin
+      expect(logs[6].get('id')).to.equal(id)
+      expect(logs[6].get('id')).to.not.equal(lastTestLogId)
+      assertLogLength(logs, 12)
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/misc.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/misc.cy.ts
new file mode 100644
index 000000000000..5aca750195f3
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/misc.cy.ts
@@ -0,0 +1,230 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin misc', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.end()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').end().should('be.null')
+    })
+  })
+
+  it('.exec()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.exec('echo foobar').its('stdout').should('contain', 'foobar')
+    })
+  })
+
+  it('.focused()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').click().focused().should('have.id', 'button')
+    })
+  })
+
+  it('.wrap()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap({ foo: 'bar' }).should('deep.equal', { foo: 'bar' })
+    })
+  })
+
+  it('.debug()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#button').debug().should('have.id', 'button')
+    })
+  })
+
+  it('.pause()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const afterPaused = new Promise<void>((resolve) => {
+        cy.once('paused', () => {
+          Cypress.emit('resume:all')
+          resolve()
+        })
+      })
+
+      cy.pause().wrap({}).should('deep.eq', {})
+      // pause is a noop in run mode, so only wait for it if in open mode
+      if (Cypress.config('isInteractive')) {
+        cy.wrap(afterPaused)
+      }
+    })
+  })
+
+  it('.task()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.task('return:arg', 'works').should('eq', 'works')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.exec()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.exec('echo foobar')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('exec', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('exec')
+        expect(consoleProps['Shell Used']).to.be.undefined
+        expect(consoleProps.Yielded).to.have.property('code').that.equals(0)
+        expect(consoleProps.Yielded).to.have.property('stderr').that.equals('')
+        expect(consoleProps.Yielded).to.have.property('stdout').that.equals('foobar')
+      })
+    })
+
+    it('.focused()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').click().focused()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('focused', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('focused')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('button')
+      })
+    })
+
+    it('.wrap()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const arr = ['foo', 'bar', 'baz']
+
+        cy.wrap(arr).spread((foo, bar, baz) => {
+          expect(foo).to.equal('foo')
+          expect(bar).to.equal('bar')
+          expect(baz).to.equal('baz')
+        })
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('wrap', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('wrap')
+        expect(consoleProps.Yielded[0]).to.equal('foo')
+        expect(consoleProps.Yielded[1]).to.equal('bar')
+        expect(consoleProps.Yielded[2]).to.equal('baz')
+      })
+    })
+
+    it('.debug()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#button').debug()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('debug', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('debug')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('BUTTON')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('button')
+      })
+    })
+
+    it('.pause()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterPaused = new Promise<void>((resolve) => {
+          cy.once('paused', () => {
+            Cypress.emit('resume:all')
+            resolve()
+          })
+        })
+
+        cy.pause().wrap({}).should('deep.eq', {})
+        // pause is a noop in run mode, so only wait for it if in open mode
+        if (Cypress.config('isInteractive')) {
+          cy.wrap(afterPaused)
+        }
+      })
+
+      cy.shouldWithTimeout(() => {
+        if (Cypress.config('isInteractive')) {
+          // if `isInteractive`, the .pause() will NOT show up in the command log in this case. Essentially a no-op.
+          return
+        }
+
+        const { consoleProps } = findCrossOriginLogs('pause', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('pause')
+        expect(consoleProps.Yielded).to.be.undefined
+      })
+    })
+
+    it('.task()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.task('return:arg', 'works')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('task', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('task')
+        expect(consoleProps.Yielded).to.equal('works')
+        expect(consoleProps.arg).to.equal('works')
+        expect(consoleProps.task).to.equal('return:arg')
+      })
+    })
+  })
+})
+
+it('verifies number of cy commands', () => {
+  // @ts-ignore
+  // remove 'getAll' and 'shouldWithTimeout' commands since they are custom commands we added for our own testing and are not actual cy commands
+  const actualCommands = Cypress._.reject(Object.keys(cy.commandFns), (command) => command === 'getAll' || command === 'shouldWithTimeout')
+  const expectedCommands = [
+    'check', 'uncheck', 'click', 'dblclick', 'rightclick', 'focus', 'blur', 'hover', 'scrollIntoView', 'scrollTo', 'select',
+    'selectFile', 'submit', 'type', 'clear', 'trigger', 'as', 'ng', 'should', 'and', 'clock', 'tick', 'spread', 'each', 'then',
+    'invoke', 'its', 'getCookie', 'getCookies', 'setCookie', 'clearCookie', 'clearCookies', 'pause', 'debug', 'exec', 'readFile',
+    'writeFile', 'fixture', 'clearLocalStorage', 'url', 'hash', 'location', 'end', 'noop', 'log', 'wrap', 'reload', 'go', 'visit',
+    'focused', 'get', 'contains', 'root', 'shadow', 'within', 'request', 'session', 'screenshot', 'task', 'find', 'filter', 'not',
+    'children', 'eq', 'closest', 'first', 'last', 'next', 'nextAll', 'nextUntil', 'parent', 'parents', 'parentsUntil', 'prev',
+    'prevAll', 'prevUntil', 'siblings', 'wait', 'title', 'window', 'document', 'viewport', 'server', 'route', 'intercept', 'origin',
+    'mount',
+  ]
+  const addedCommands = Cypress._.difference(actualCommands, expectedCommands)
+  const removedCommands = Cypress._.difference(expectedCommands, actualCommands)
+
+  if (addedCommands.length && removedCommands.length) {
+    throw new Error(`Commands have been added to and removed from Cypress.
+
+      The following command(s) were added: ${addedCommands.join(', ')}
+      The following command(s) were removed: ${removedCommands.join(', ')}
+
+      Update this test accordingly.`)
+  }
+
+  if (addedCommands.length) {
+    throw new Error(`The following command(s) have been added to Cypress: ${addedCommands.join(', ')}. Please add tests for the command(s) in cy.origin and add the command(s) to this test.`)
+  }
+
+  if (removedCommands.length) {
+    throw new Error(`The following command(s) have been removed from Cypress: ${removedCommands.join(', ')}. Please remove the command(s) from this test.`)
+  }
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/navigation.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/navigation.cy.ts
new file mode 100644
index 000000000000..7faee1d43d8b
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/navigation.cy.ts
@@ -0,0 +1,574 @@
+const { stripIndent } = require('common-tags')
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin navigation', () => {
+  it('.go()', () => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.visit('http://www.foobar.com:3500/fixtures/dom.html')
+
+      cy.go('back')
+      cy.location('pathname').should('include', 'secondary-origin.html')
+
+      cy.go('forward')
+      cy.location('pathname').should('include', 'dom.html')
+    })
+  })
+
+  it('.reload()', () => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get(':checkbox[name="colors"][value="blue"]').check().should('be.checked')
+      cy.reload()
+      cy.get(':checkbox[name="colors"][value="blue"]').should('not.be.checked')
+    })
+  })
+
+  context('.visit()', () => {
+    it('calls the correct load handlers', () => {
+      const primaryCyBeforeLoadSpy = cy.spy()
+      const primaryCyLoadSpy = cy.spy()
+      const primaryVisitBeforeLoadSpy = cy.spy()
+      const primaryVisitLoadSpy = cy.spy()
+
+      cy.on('window:before:load', primaryCyBeforeLoadSpy)
+      cy.on('window:load', primaryCyLoadSpy)
+
+      cy.visit('/fixtures/primary-origin.html', {
+        onBeforeLoad: primaryVisitBeforeLoadSpy,
+        onLoad: primaryVisitLoadSpy,
+      }).then(() => {
+        expect(primaryCyBeforeLoadSpy).to.be.calledOnce
+        expect(primaryCyLoadSpy).to.be.calledTwice // twice because it's also called for 'about:blank'
+        expect(primaryVisitBeforeLoadSpy).to.be.calledOnce
+        expect(primaryVisitLoadSpy).to.be.calledOnce
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        const secondaryCyBeforeLoadSpy = cy.spy()
+        const secondaryCyLoadSpy = cy.spy()
+        const secondaryVisitBeforeLoadSpy = cy.spy()
+        const secondaryVisitLoadSpy = cy.spy()
+
+        cy.on('window:before:load', secondaryCyBeforeLoadSpy)
+        cy.on('window:load', secondaryCyLoadSpy)
+
+        cy.visit('http://www.foobar.com:3500/fixtures/dom.html', {
+          onBeforeLoad: secondaryVisitBeforeLoadSpy,
+          onLoad: secondaryVisitLoadSpy,
+        }).then(() => {
+          expect(secondaryCyBeforeLoadSpy).to.be.calledOnce
+          expect(secondaryCyLoadSpy).to.be.calledOnce
+          expect(secondaryVisitBeforeLoadSpy).to.be.calledOnce
+          expect(secondaryVisitLoadSpy).to.be.calledOnce
+        })
+      }).then(() => {
+        expect(primaryCyBeforeLoadSpy).to.be.calledOnce
+        expect(primaryCyLoadSpy).to.be.calledTwice
+        expect(primaryVisitBeforeLoadSpy).to.be.calledOnce
+        expect(primaryVisitLoadSpy).to.be.calledOnce
+      })
+    })
+
+    it('supports visiting primary first', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    it('supports skipping visiting primary first', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    // TODO: we don't support nested cy.origin yet...
+    it.skip('supports nesting a third origin', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+
+        cy.origin('http://idp.com:3500', () => {
+          cy.visit('http://www.idp.com:3500/fixtures/dom.html')
+        })
+      })
+    })
+
+    it('supports navigating to secondary through button and then visiting', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+
+        cy.visit('http://www.foobar.com:3500/fixtures/dom.html')
+        cy.location('href').should('equal', 'http://www.foobar.com:3500/fixtures/dom.html')
+      })
+    })
+
+    it('supports relative urls within secondary', () => {
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('/fixtures/dom.html')
+        cy.location('href').should('equal', 'http://www.foobar.com:3500/fixtures/dom.html')
+      })
+    })
+
+    it('supports relative urls with path within secondary', () => {
+      cy.origin('http://www.foobar.com:3500/fixtures', () => {
+        cy.visit('/dom.html')
+        cy.location('href').should('equal', 'http://www.foobar.com:3500/fixtures/dom.html')
+      })
+    })
+
+    it('supports relative urls with hash within secondary', () => {
+      cy.origin('http://www.foobar.com:3500/#hash', () => {
+        cy.visit('/more-hash')
+        cy.location('href').should('equal', 'http://www.foobar.com:3500/#hash/more-hash')
+      })
+    })
+
+    it('supports relative urls with path and hash within secondary', () => {
+      cy.origin('http://www.foobar.com:3500/welcome/#hash', () => {
+        cy.visit('/more-hash')
+        cy.location('href').should('equal', 'http://www.foobar.com:3500/welcome/#hash/more-hash')
+      })
+    })
+
+    it('supports hash change within secondary', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html#hashchange')
+
+        cy.location('hash').should('equal', '#hashchange')
+      })
+    })
+
+    it('navigates back to primary', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.get('a[data-cy="cross-origin-secondary-link"]').should('have.text', 'http://www.foobar.com:3500/fixtures/secondary-origin.html')
+      cy.location('href').should('equal', 'http://localhost:3500/fixtures/primary-origin.html')
+    })
+
+    it('errors when visiting a new origin within origin', (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          You likely forgot to use \`cy.origin()\`:\n
+          \`cy.origin('http://foobar.com:3500', () => {\`
+          \`  cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')\`
+          \`  <commands targeting http://www.foobar.com:3500 go here>\`
+          \`})\`\n
+          \`cy.origin('http://idp.com:3500', () => {\`
+          \`  cy.visit('http://www.idp.com:3500/fixtures/dom.html')\`
+          \`  <commands targeting http://www.idp.com:3500 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > superdomain\n
+          You may only \`cy.visit()\` same-origin URLs within \`cy.origin()\`.\n
+          The previous URL you visited was:\n
+            > 'http://www.foobar.com:3500'\n
+          You're attempting to visit this URL:\n
+            > 'http://www.idp.com:3500'`)
+
+        done()
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        // this call should error since we can't visit a cross-origin
+        cy.visit('http://www.idp.com:3500/fixtures/dom.html')
+      })
+    })
+
+    // @ts-ignore
+    it('informs user to use cy.origin with experimental flag off', { experimentalSessionAndOrigin: false }, (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.equal(stripIndent`\
+          \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+          In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:\n
+          \`cy.visit('http://localhost:3500/fixtures/primary-origin.html')\`
+          \`<commands targeting http://localhost:3500 go here>\`\n
+          \`cy.origin('http://foobar.com:3500', () => {\`
+          \`  cy.visit('http://www.foobar.com:3500/fixtures/dom.html')\`
+          \`  <commands targeting http://www.foobar.com:3500 go here>\`
+          \`})\`\n
+          The new URL is considered a different origin because the following parts of the URL are different:\n
+            > superdomain\n
+          You may only \`cy.visit()\` same-origin URLs within a single test.\n
+          The previous URL you visited was:\n
+            > 'http://localhost:3500'\n
+          You're attempting to visit this URL:\n
+            > 'http://www.foobar.com:3500'`)
+
+        done()
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+
+      // this call should error since we can't visit a cross-origin
+      cy.visit('http://www.foobar.com:3500/fixtures/dom.html')
+    })
+
+    it('supports the query string option', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html', { qs: { foo: 'bar' } })
+
+        cy.location('search').should('equal', '?foo=bar')
+      })
+    })
+
+    it('can send a POST request', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/post-only', {
+          method: 'POST',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({
+            bar: 'baz',
+          }),
+        })
+
+        cy.contains('it worked!').contains('{"bar":"baz"}')
+      })
+    })
+
+    it('succeeds when the AUT window in the secondary is undefined', () => {
+      // manually remove the spec bridge iframe to ensure Cypress.state('window') is not already set
+      window.top?.document.getElementById('Spec\ Bridge:\ foobar.com')?.remove()
+
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    it('succeeds when the secondary is already defined but the AUT is still on the primary', () => {
+      // setup the secondary to be on the secondary origin
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+
+      // update the AUT to be on the primary origin
+      cy.visit('/fixtures/primary-origin.html')
+
+      // verify there aren't any issues when the AUT is on primary but the spec bridge is on secondary (cross-origin)
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    it('does not navigate to about:blank in secondary', () => {
+      const primaryCyLoadSpy = cy.spy()
+
+      cy.on('window:load', primaryCyLoadSpy)
+
+      cy.origin('http://foobar.com:3500', () => {
+        const secondaryCyLoadSpy = cy.spy()
+
+        cy.on('window:load', secondaryCyLoadSpy)
+
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html').then(() => {
+          expect(secondaryCyLoadSpy).to.have.been.calledOnce
+          expect(secondaryCyLoadSpy.args[0][0].location.href).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+        })
+      })
+
+      cy.then(() => {
+        expect(primaryCyLoadSpy).to.not.have.been.called
+      })
+    })
+
+    it('supports redirecting from primary to secondary in cy.origin', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('http://localhost:3500/redirect?href=http://www.foobar.com:3500/fixtures/secondary-origin.html')
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    it('supports redirecting from secondary to primary outside of cy.origin', () => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.visit('http://www.foobar.com:3500/redirect?href=http://localhost:3500/fixtures/generic.html')
+    })
+
+    it('errors when trying to redirect from secondary to primary in cy.origin', (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.equal(stripIndent`
+            \`cy.visit()\` failed because you are attempting to visit a URL from a previous origin inside of \`cy.origin()\`.\n
+            Instead of placing the \`cy.visit()\` inside of \`cy.origin()\`, the \`cy.visit()\` should be placed outside of the \`cy.origin()\` block.\n
+            \`<commands targeting http://localhost:3500 go here>\`\n
+            \`cy.origin('http://foobar.com:3500', () => {\`
+            \`  <commands targeting http://foobar.com:3500 go here>\`
+            \`})\`\n
+            \`cy.visit('http://www.foobar.com:3500/redirect?href=http://localhost:3500/fixtures/generic.html')\``)
+
+        done()
+      })
+
+      cy.visit('http://localhost:3500/fixtures/primary-origin.html')
+
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('/redirect?href=http://localhost:3500/fixtures/generic.html')
+      })
+    })
+
+    it('errors when trying to visit primary in cy.origin', (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.equal(stripIndent`
+            \`cy.visit()\` failed because you are attempting to visit a URL from a previous origin inside of \`cy.origin()\`.\n
+            Instead of placing the \`cy.visit()\` inside of \`cy.origin()\`, the \`cy.visit()\` should be placed outside of the \`cy.origin()\` block.\n
+            \`<commands targeting http://localhost:3500 go here>\`\n
+            \`cy.origin('http://foobar.com:3500', () => {\`
+            \`  <commands targeting http://foobar.com:3500 go here>\`
+            \`})\`\n
+            \`cy.visit('http://localhost:3500/fixtures/generic.html')\``)
+
+        done()
+      })
+
+      cy.visit('http://localhost:3500/fixtures/primary-origin.html')
+
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('http://localhost:3500/fixtures/generic.html')
+      })
+    })
+
+    it('errors when trying to redirect from primary to secondary outside of cy.origin', (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.equal(stripIndent`\
+            \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.\n
+            You likely forgot to use \`cy.origin()\`:\n
+            \`cy.visit('http://localhost:3500/fixtures/primary-origin.html')\`
+            \`<commands targeting http://localhost:3500 go here>\`\n
+            \`cy.origin('http://foobar.com:3500', () => {\`
+            \`  cy.visit('http://localhost:3500/redirect?href=http://www.foobar.com:3500/fixtures/generic.html')\`
+            \`  <commands targeting http://www.foobar.com:3500 go here>\`
+            \`})\`\n
+            The new URL is considered a different origin because the following parts of the URL are different:\n
+              > superdomain\n
+            You may only \`cy.visit()\` same-origin URLs within a single test.\n
+            The previous URL you visited was:\n
+              > 'http://localhost:3500'\n
+            You're attempting to visit this URL:\n
+              > 'http://www.foobar.com:3500'`)
+
+        done()
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+      cy.visit('http://localhost:3500/redirect?href=http://www.foobar.com:3500/fixtures/generic.html')
+    })
+
+    it('supports auth options and adding auth to subsequent requests', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/basic_auth', {
+          auth: {
+            username: 'cypress',
+            password: 'password123',
+          },
+        })
+
+        cy.get('body').should('have.text', 'basic auth worked')
+
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
+        })
+
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+
+      // attaches the auth options for the foobar origin even from another origin
+      cy.origin('http://www.idp.com:3500', () => {
+        cy.visit('/fixtures/primary-origin.html')
+
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
+        })
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+
+      // attaches the auth options for the foobar origin from the top-level
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/basic_auth'
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+    })
+
+    it('does not propagate the auth options across tests', (done) => {
+      cy.intercept('/basic_auth', (req) => {
+        req.on('response', (res) => {
+          // clear the www-authenticate header so the browser doesn't prompt for username/password
+          res.headers['www-authenticate'] = ''
+          expect(res.statusCode).to.equal(401)
+          done()
+        })
+      })
+
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/fixtures/primary-origin.html'
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
+        })
+      })
+    })
+
+    it('succeeds when visiting local file server first', { baseUrl: undefined }, () => {
+      cy.visit('cypress/fixtures/primary-origin.html')
+
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('/fixtures/secondary-origin.html')
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+    })
+
+    it('handles visit failures', { baseUrl: undefined }, (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.include('failed trying to load:\n\nhttp://www.foobar.com:3500/fixtures/secondary-origin.html')
+        expect(e.message).to.include('500: Internal Server Error')
+
+        done()
+      })
+
+      cy.intercept('*/secondary-origin.html', { statusCode: 500 })
+
+      cy.visit('cypress/fixtures/primary-origin.html')
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.visit('fixtures/secondary-origin.html')
+      })
+    })
+  })
+
+  it('supports navigating through changing the window.location.href', () => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/fixtures/dom.html'
+      })
+
+      cy.location('pathname').should('equal', '/fixtures/dom.html')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.go()', () => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/dom.html')
+
+        cy.go('back')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, ...attrs } = findCrossOriginLogs('go', logs, 'foobar.com')
+
+        expect(attrs.name).to.equal('go')
+        expect(attrs.message).to.equal('back')
+
+        expect(consoleProps.Command).to.equal('go')
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+
+    it('.reload()', () => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="dom-link"]').click()
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.reload()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, ...attrs } = findCrossOriginLogs('reload', logs, 'foobar.com')
+
+        expect(attrs.name).to.equal('reload')
+        expect(attrs.message).to.equal('')
+
+        expect(consoleProps.Command).to.equal('reload')
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+
+    it('visit()', () => {
+      cy.visit('/fixtures/primary-origin.html')
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.visit('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary origin')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, ...attrs } = findCrossOriginLogs('visit', logs, 'foobar.com')
+
+        expect(attrs.name).to.equal('visit')
+        expect(attrs.message).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+
+        expect(consoleProps.Command).to.equal('visit')
+        expect(consoleProps).to.have.property('Cookies Set').that.is.an('object')
+        expect(consoleProps).to.have.property('Redirects').that.is.an('object')
+        expect(consoleProps).to.have.property('Resolved Url').that.equals('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/network_requests.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/network_requests.cy.ts
new file mode 100644
index 000000000000..d4925cd4616f
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/network_requests.cy.ts
@@ -0,0 +1,74 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin network requests', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="request-link"]').click()
+  })
+
+  it('.request() to secondary origin', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.request('http://www.foobar.com:3500/fixtures/example.json').should((response) => {
+        expect(response.status).to.equal(200)
+        expect(response.allRequestResponses[0]['Request URL']).to.equal('http://www.foobar.com:3500/fixtures/example.json')
+      })
+    })
+  })
+
+  it('.request() to secondary origin with relative path', () => {
+    cy.origin('http://www.foobar.com:3500', () => {
+      cy.request('/fixtures/example.json').should((response) => {
+        expect(response.status).to.equal(200)
+        expect(response.allRequestResponses[0]['Request URL']).to.equal('http://www.foobar.com:3500/fixtures/example.json')
+      })
+    })
+  })
+
+  it('.request() to primary origin', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.request('http://localhost:3500/fixtures/example.json').should((response) => {
+        expect(response.status).to.equal(200)
+        expect(response.allRequestResponses[0]['Request URL']).to.equal('http://localhost:3500/fixtures/example.json')
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.request()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.request('http://www.foobar.com:3500/fixtures/example.json')
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps, renderProps } = findCrossOriginLogs('request', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('request')
+
+        expect(consoleProps.Request).to.have.property('Request Body').that.equals(null)
+        expect(consoleProps.Request).to.have.property('Request Headers').that.is.a('object')
+        expect(consoleProps.Request).to.have.property('Request URL').that.equals('http://www.foobar.com:3500/fixtures/example.json')
+        expect(consoleProps.Request).to.have.property('Response Body').that.is.a('string')
+        expect(consoleProps.Request).to.have.property('Response Headers').that.is.a('object')
+        expect(consoleProps.Request).to.have.property('Response Status').that.equals(200)
+
+        expect(consoleProps.Yielded).to.have.property('body').that.deep.equals({ example: true })
+        expect(consoleProps.Yielded).to.have.property('duration').that.is.a('number')
+        expect(consoleProps.Yielded).to.have.property('headers').that.is.a('object')
+        expect(consoleProps.Yielded).to.have.property('status').that.equals(200)
+
+        expect(renderProps).to.have.property('indicator').that.equals('successful')
+        expect(renderProps).to.have.property('message').that.equals('GET 200 http://www.foobar.com:3500/fixtures/example.json')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/querying.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/querying.cy.ts
new file mode 100644
index 000000000000..6aa1ba150fca
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/querying.cy.ts
@@ -0,0 +1,104 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin querying', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.get()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input')
+    })
+  })
+
+  it('.contains()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.contains('Nested Find')
+    })
+  })
+
+  it('.within()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').within(() => {
+        cy.get('#input')
+      })
+    })
+  })
+
+  it('.root()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.root().should('match', 'html')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.contains()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.contains('Nested Find')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('contains', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('contains')
+        expect(consoleProps['Applied To']).to.be.undefined
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Content).to.equal('Nested Find')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('nested-find')
+      })
+    })
+
+    it('.within()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').within(() => {
+          cy.get('#input')
+        })
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('within', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('within')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id')
+      })
+    })
+
+    it('.root()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.root()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('root', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('root')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('HTML')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/querying_shadow.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/querying_shadow.cy.ts
new file mode 100644
index 000000000000..43117e65f5c1
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/querying_shadow.cy.ts
@@ -0,0 +1,51 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin shadow dom', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="shadow-dom-link"]').click()
+  })
+
+  it('.shadow()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#shadow-element-1').shadow().find('p.shadow-1')
+      .should('have.text', 'Shadow Content 1')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.shadow()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#shadow-element-1').shadow()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('shadow', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('shadow')
+        expect(consoleProps.Elements).to.equal(1)
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('CY-TEST-ELEMENT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('shadow-element-1')
+
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/screenshot.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/screenshot.cy.ts
new file mode 100644
index 000000000000..0c074261173c
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/screenshot.cy.ts
@@ -0,0 +1,321 @@
+context('cy.origin screenshot', () => {
+  context('set viewport', () => {
+    beforeEach(() => {
+      this.serverResult = {
+        path: '/path/to/screenshot',
+        size: 12,
+        dimensions: { width: 20, height: 20 },
+        multipart: false,
+        pixelRatio: 1,
+        takenAt: new Date().toISOString(),
+        name: 'name',
+        blackout: [],
+        testAttemptIndex: 0,
+        duration: 100,
+      }
+
+      cy.viewport(600, 200)
+
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="screenshots-link"]').click()
+    })
+
+    it('captures the fullPage', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.screenshot({ capture: 'fullPage' })
+        .then(() => {
+          expect(automationStub).to.be.calledThrice
+          expect(automationStub.args[0][1].capture).to.equal('fullPage')
+          expect(automationStub.args[1][1].capture).to.equal('fullPage')
+          expect(automationStub.args[2][1].capture).to.equal('fullPage')
+        })
+      })
+    })
+
+    it('captures the runner', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.screenshot({ capture: 'runner' })
+        .then(() => {
+          expect(automationStub).to.be.calledOnce
+          expect(automationStub.args[0][1].capture).to.equal('runner')
+        })
+      })
+    })
+
+    it('captures the viewport', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.screenshot({ capture: 'viewport' })
+        .then(() => {
+          expect(automationStub).to.be.calledOnce
+          expect(automationStub.args[0][1].capture).to.equal('viewport')
+        })
+      })
+    })
+  })
+
+  context('without setting viewport', () => {
+    beforeEach(() => {
+      this.serverResult = {
+        path: '/path/to/screenshot',
+        size: 12,
+        dimensions: { width: 20, height: 20 },
+        multipart: false,
+        pixelRatio: 1,
+        takenAt: new Date().toISOString(),
+        name: 'name',
+        blackout: [],
+        testAttemptIndex: 0,
+        duration: 100,
+      }
+
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="screenshots-link"]').click()
+    })
+
+    it('supports multiple titles', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.screenshot()
+        .then(() => {
+          expect(automationStub.args[0][1].titles).to.deep.equal(['cy.origin screenshot', 'without setting viewport', 'supports multiple titles'])
+        })
+      })
+    })
+
+    it('supports the blackout option', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.screenshot({
+          blackout: ['.short-element'],
+          onBeforeScreenshot: ($el) => {
+            const $blackoutElement = $el.find('.__cypress-blackout')
+            const $shortElement = $el.find('.short-element')
+
+            expect($blackoutElement.outerHeight()).to.equal($shortElement.outerHeight())
+            expect($blackoutElement.outerWidth()).to.equal($shortElement.outerWidth())
+            expect($blackoutElement.offset()).to.deep.equal($shortElement.offset())
+          },
+        })
+      })
+    })
+
+    it('supports element screenshots', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.get('.tall-element').screenshot()
+        .then(() => {
+          expect(automationStub.args[0][1].clip.x).to.be.greaterThan(0)
+          expect(automationStub.args[0][1].clip.y).to.be.greaterThan(0)
+        })
+      })
+    })
+
+    it('supports screenshot retrying with appropriate naming', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        const automationStub = cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+
+        cy.state('runnable')._currentRetry = 2
+
+        cy.screenshot()
+        .then(() => {
+          expect(automationStub.args[0][1].testAttemptIndex).to.equal(2)
+        })
+      })
+    })
+
+    it('calls the onBeforeScreenshot callback', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+        const onBeforeScreenshot = cy.stub()
+
+        cy.screenshot({ onBeforeScreenshot })
+        cy.wrap(onBeforeScreenshot).should('be.called')
+      })
+    })
+
+    it('calls the onAfterScreenshot callback', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+        const onAfterScreenshot = cy.stub()
+
+        cy.screenshot({ onAfterScreenshot })
+        cy.wrap(onAfterScreenshot).should('be.called')
+      })
+    })
+
+    it('supports the Cypress.screenshot callbacks', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').resolves(serverResult)
+        const onAfterScreenshot = cy.stub()
+        const onBeforeScreenshot = cy.stub()
+
+        Cypress.Screenshot.defaults({
+          onBeforeScreenshot,
+          onAfterScreenshot,
+        })
+
+        cy.screenshot()
+        cy.wrap(onBeforeScreenshot).should('be.called')
+        cy.wrap(onAfterScreenshot).should('be.called')
+      })
+    })
+
+    it('supports pausing timers', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').returns(Cypress.Promise.delay(500, serverResult))
+
+        cy.window().then((win) => {
+        // Hide the element using setTimeout
+          win.setTimeout(() => {
+            (win.document.getElementsByClassName('tall-element')[0] as HTMLElement).style.display = 'none'
+          }, 50)
+        })
+
+        cy.screenshot({
+          onBeforeScreenshot: ($el) => {
+          // Set the timeout to be longer than the element hiding timeout so if the timer was
+          // not paused, it would've hidden the element but since we are pausing the
+          // timers, the style is still 'block'
+            setTimeout(() => {
+              expect($el.find('.tall-element').css('display')).to.equal('block')
+            }, 100)
+          },
+          onAfterScreenshot: ($el) => {
+          // Set the timeout to be longer than the element hiding timeout so when the timers
+          // are unpaused, this will run after the timeout to hide the element
+            setTimeout(() => {
+              expect($el.find('.tall-element').css('display')).to.equal('none')
+            }, 100)
+          },
+        })
+
+        cy.wait(200)
+      })
+    })
+
+    it('does not pause timers when disableTimersAndAnimations is false', () => {
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').returns(Cypress.Promise.delay(500, serverResult))
+
+        cy.window().then((win) => {
+        // Hide the element using setTimeout
+          win.setTimeout(() => {
+            (win.document.getElementsByClassName('tall-element')[0] as HTMLElement).style.display = 'none'
+          }, 50)
+        })
+
+        cy.screenshot({
+          disableTimersAndAnimations: false,
+          onBeforeScreenshot: ($el) => {
+          // Set the timeout to be longer than the element hiding timeout so it has time to run and hide the element
+            setTimeout(() => {
+              expect($el.find('.tall-element').css('display')).to.equal('none')
+            }, 100)
+          },
+        })
+
+        cy.wait(200)
+      })
+    })
+
+    it('handles errors thrown from setTimeout after the timer is paused', () => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('setTimeout error after screenshot')
+      })
+
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').returns(Cypress.Promise.delay(100, serverResult))
+
+        cy.window().then((win) => {
+        // Add a timeout error
+          win.setTimeout(() => {
+            throw new Error('setTimeout error after screenshot')
+          }, 50)
+        })
+
+        cy.screenshot()
+
+        // wait to ensure the timeout error has time to process
+        cy.wait(100)
+      })
+    })
+
+    it('handles errors thrown from setTimeout when the timer is NOT paused', () => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('setTimeout error during screenshot')
+        expect(err.message).to.include('The following error originated from your application code, not from Cypress.')
+        expect(err.docsUrl).to.deep.eq(['https://on.cypress.io/uncaught-exception-from-application'])
+      })
+
+      cy.origin('http://foobar.com:3500', { args: this.serverResult }, (serverResult) => {
+        cy.stub(Cypress, 'automation').withArgs('take:screenshot').returns(Cypress.Promise.delay(100, serverResult))
+
+        cy.window().then((win) => {
+        // Add a timeout error
+          win.setTimeout(() => {
+            throw new Error('setTimeout error during screenshot')
+          }, 50)
+        })
+
+        cy.screenshot({ disableTimersAndAnimations: false })
+
+        // wait to ensure the timeout error has time to process
+        cy.wait(100)
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    const { findCrossOriginLogs } = require('../../../../support/utils')
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="screenshots-link"]').click()
+    })
+
+    it('.screenshot()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.screenshot({ capture: 'fullPage' })
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('screenshot', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('screenshot')
+
+        expect(consoleProps).to.have.property('blackout')
+        expect(consoleProps).to.have.property('capture').that.equals('fullPage')
+        expect(consoleProps).to.have.property('dimensions').that.is.a('string')
+        expect(consoleProps).to.have.property('disableTimersAndAnimations').that.is.a('boolean')
+        expect(consoleProps).to.have.property('duration').that.is.a('string')
+        expect(consoleProps).to.have.property('multipart').that.is.a('boolean')
+        expect(consoleProps).to.have.property('name').to.be.null
+        expect(consoleProps).to.have.property('path').that.is.a('string')
+        expect(consoleProps).to.have.property('pixelRatio').that.is.a('number')
+        expect(consoleProps).to.have.property('scaled').that.is.a('boolean')
+        expect(consoleProps).to.have.property('size').that.is.a('string')
+        expect(consoleProps).to.have.property('specName').that.is.a('string')
+        expect(consoleProps).to.have.property('takenAt').that.is.a('string')
+        expect(consoleProps).to.have.property('testAttemptIndex').that.is.a('number')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/spies_stubs_clocks.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/spies_stubs_clocks.cy.ts
new file mode 100644
index 000000000000..ad06cd0f2f05
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/spies_stubs_clocks.cy.ts
@@ -0,0 +1,182 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin spies, stubs, and clock', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('spy()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const foo = { bar () { } }
+
+      cy.spy(foo, 'bar')
+      foo.bar()
+      expect(foo.bar).to.be.called
+    })
+  })
+
+  it('stub()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const foo = { bar () { } }
+
+      cy.stub(foo, 'bar')
+      foo.bar()
+      expect(foo.bar).to.be.called
+    })
+  })
+
+  context('resets stubs', () => {
+    it('creates the stub', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const stubEnv = cy.stub(Cypress, 'env').withArgs('foo').returns('bar')
+
+        expect(Cypress.env('foo')).to.equal('bar')
+        expect(stubEnv).to.be.calledOnce
+        // @ts-ignore
+        expect(Cypress.env.isSinonProxy).to.be.true
+      })
+    })
+
+    it('verifies the stub got restored', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        expect(Cypress.env('foo')).to.be.undefined
+        // @ts-ignore
+        expect(Cypress.env.isSinonProxy).to.be.undefined
+      })
+    })
+  })
+
+  context('resets spies', () => {
+    it('creates the spy', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const stubEnv = cy.spy(Cypress, 'env')
+
+        Cypress.env()
+        expect(stubEnv).to.be.calledOnce
+        // @ts-ignore
+        expect(Cypress.env.isSinonProxy).to.be.true
+      })
+    })
+
+    it('verifies the spy got restored', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        expect(Cypress.env.isSinonProxy).to.be.undefined
+      })
+    })
+  })
+
+  it('clock() and tick()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const now = Date.UTC(2022, 0, 12)
+
+      cy.clock(now)
+      cy.window().then((win) => {
+        expect(win.Date.now()).to.equal(now)
+      })
+
+      cy.tick(10000) // 10 seconds passed
+      cy.window().then((win) => {
+        expect(win.Date.now()).to.equal(now + 10000)
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    const { _ } = Cypress
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      // cy.clock only adds a log and does NOT update
+      cy.on('log:added', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('spy()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const foo = { bar () { } }
+
+        cy.spy(foo, 'bar')
+        foo.bar()
+        expect(foo.bar).to.be.called
+      })
+
+      cy.shouldWithTimeout(() => {
+        const spyLog = findCrossOriginLogs('spy-1', logs, 'foobar.com')
+
+        expect(spyLog.consoleProps.Command).to.equal('spy-1')
+        expect(spyLog.callCount).to.be.a('number')
+        expect(spyLog.functionName).to.equal('bar')
+      })
+    })
+
+    it('.stub()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const foo = { bar () { } }
+
+        cy.stub(foo, 'bar')
+        foo.bar()
+        expect(foo.bar).to.be.called
+      })
+
+      cy.shouldWithTimeout(() => {
+        const stubLog = findCrossOriginLogs('stub-1', logs, 'foobar.com')
+
+        expect(stubLog.consoleProps.Command).to.equal('stub-1')
+        expect(stubLog.callCount).to.be.a('number')
+        expect(stubLog.functionName).to.equal('bar')
+      })
+    })
+
+    it('.clock()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const now = Date.UTC(2022, 0, 12)
+
+        cy.clock(now)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const clockLog = findCrossOriginLogs('clock', logs, 'foobar.com')
+
+        expect(clockLog.name).to.equal('clock')
+
+        const consoleProps = clockLog.consoleProps()
+
+        expect(consoleProps.Command).to.equal('clock')
+        expect(consoleProps).to.have.property('Methods replaced').that.is.a('object')
+        expect(consoleProps).to.have.property('Now').that.is.a('number')
+      })
+    })
+
+    it('.tick()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const now = Date.UTC(2022, 0, 12)
+
+        cy.clock(now)
+
+        cy.tick(10000)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const tickLog = findCrossOriginLogs('tick', logs, 'foobar.com')
+
+        expect(tickLog.name).to.equal('tick')
+
+        const consoleProps = _.isFunction(tickLog.consoleProps) ? tickLog.consoleProps() : tickLog.consoleProps
+
+        expect(consoleProps.Command).to.equal('tick')
+        expect(consoleProps).to.have.property('Methods replaced').that.is.a('object')
+        expect(consoleProps).to.have.property('Now').that.is.a('number')
+        expect(consoleProps).to.have.property('Ticked').that.is.a('string')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/traversal.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/traversal.cy.ts
new file mode 100644
index 000000000000..7e8510170fba
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/traversal.cy.ts
@@ -0,0 +1,644 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin traversal', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.children()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').children().should('have.length', 3)
+    })
+  })
+
+  it('.closest()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').closest('form')
+    })
+  })
+
+  it('.eq()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').eq(1).should('have.id', 'name')
+    })
+  })
+
+  it('.filter()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-name>input')
+      .filter('[name="dogs"]').should('have.length', 4)
+    })
+  })
+
+  it('.find()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').find('input').should('have.length', 3)
+    })
+  })
+
+  it('.first()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').first().should('have.id', 'input')
+    })
+  })
+
+  it('.last()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').last().should('have.id', 'age')
+    })
+  })
+
+  it('.next()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').next().should('have.id', 'name')
+    })
+  })
+
+  it('.nextAll()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').nextAll().should('have.length', 2)
+    })
+  })
+
+  it('.nextUntil()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').nextUntil('#age').should('have.length', 1)
+    })
+  })
+
+  it('.not()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id>input').not('#age').should('have.length', 2)
+    })
+  })
+
+  it('.parent()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').parent().should('have.id', 'dom')
+    })
+  })
+
+  it('.parents()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').parents().should('have.length', 3)
+    })
+  })
+
+  it('.parentsUntil()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#by-id').parentsUntil('body').should('have.length', 1)
+    })
+  })
+
+  it('.prev()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#age').prev().should('have.id', 'name')
+    })
+  })
+
+  it('.prevAll()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#age').prevAll().should('have.length', 2)
+    })
+  })
+
+  it('.prevUntil()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#age').prevUntil('#input').should('have.length', 1)
+    })
+  })
+
+  it('.siblings()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('#input').siblings().should('have.length', 2)
+    })
+  })
+
+  context('#consoleProps', () => {
+    const { _ } = Cypress
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.children()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').children()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('children', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+        expect(consoleProps.Command).to.equal('children')
+        expect(consoleProps.Elements).to.equal(3)
+        expect(consoleProps.Selector).to.equal('')
+        expect(consoleProps.Yielded.length).to.equal(3)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name')
+        expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.closest()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').closest('form')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('closest', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+        expect(consoleProps.Command).to.equal('closest')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('form')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('by-id')
+        expect(consoleProps.Yielded.querySelector('input#input')).to.be.ok
+        expect(consoleProps.Yielded.querySelector('input#name')).to.be.ok
+        expect(consoleProps.Yielded.querySelector('input#age')).to.be.ok
+      })
+    })
+
+    it('.eq()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').eq(1)
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('eq', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To'].length).to.equal(3)
+        expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input')
+        expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name')
+        expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('eq')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('1')
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.filter()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-name>input')
+        .filter('[name="dogs"]')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('filter', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To'].length).to.equal(12)
+        expect(consoleProps.Command).to.equal('filter')
+        expect(consoleProps.Elements).to.equal(4)
+        expect(consoleProps.Selector).to.equal('[name="dogs"]')
+
+        expect(consoleProps.Yielded.length).to.equal(4)
+
+        _.forEach(consoleProps.Yielded, (yielded) => {
+          expect(yielded).to.have.property('tagName').that.equals('INPUT')
+          expect(yielded).to.have.property('name').that.equals('dogs')
+        })
+      })
+    })
+
+    it('.find()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').find('input')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('find', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+
+        expect(consoleProps.Command).to.equal('find')
+        expect(consoleProps.Elements).to.equal(3)
+        expect(consoleProps.Selector).to.equal('input')
+
+        expect(consoleProps.Yielded.length).to.equal(3)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name')
+        expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[2]).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.first()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').first()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('first', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To'].length).to.equal(3)
+        expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input')
+        expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name')
+        expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('first')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('input')
+      })
+    })
+
+    it('.last()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').last()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('last', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To'].length).to.equal(3)
+        expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input')
+        expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name')
+        expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('last')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.next()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#input').next()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('next', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Command).to.equal('next')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.nextAll()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#input').nextAll()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('nextAll', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Command).to.equal('nextAll')
+        expect(consoleProps.Elements).to.equal(2)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded.length).to.equal(2)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age')
+      })
+    })
+
+    it('.nextUntil()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#input').nextUntil('#age')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('nextUntil', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Command).to.equal('nextUntil')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#age')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.not()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id>input').not('#age')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('not', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To'].length).to.equal(3)
+        expect(consoleProps['Applied To'][0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][0]).to.have.property('id').that.equals('input')
+        expect(consoleProps['Applied To'][1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][1]).to.have.property('id').that.equals('name')
+        expect(consoleProps['Applied To'][2]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To'][2]).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('not')
+        expect(consoleProps.Elements).to.equal(2)
+        expect(consoleProps.Selector).to.equal('#age')
+
+        expect(consoleProps.Yielded.length).to.equal(2)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('input')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.parent()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').parent()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('parent', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+
+        expect(consoleProps.Command).to.equal('parent')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('dom')
+      })
+    })
+
+    it('.parents()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').parents()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('parents', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+
+        expect(consoleProps.Command).to.equal('parents')
+        expect(consoleProps.Elements).to.equal(3)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded.length).to.equal(3)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('DIV')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('dom')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('BODY')
+        expect(consoleProps.Yielded[2]).to.have.property('tagName').that.equals('HTML')
+      })
+    })
+
+    it('.parentsUntil()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#by-id').parentsUntil('body')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('parentsUntil', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('FORM')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('by-id')
+
+        expect(consoleProps.Command).to.equal('parentsUntil')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('body')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('DIV')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('dom')
+      })
+    })
+
+    it('.prev()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#age').prev()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('prev', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('prev')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.prevAll()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#age').prevAll()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('prevAll', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('prevAll')
+        expect(consoleProps.Elements).to.equal(2)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded.length).to.equal(2)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('input')
+      })
+    })
+
+    it('.prevUntil()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#age').prevUntil('#input')
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('prevUntil', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('age')
+
+        expect(consoleProps.Command).to.equal('prevUntil')
+        expect(consoleProps.Elements).to.equal(1)
+        expect(consoleProps.Selector).to.equal('#input')
+
+        expect(consoleProps.Yielded).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded).to.have.property('id').that.equals('name')
+      })
+    })
+
+    it('.siblings()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('#input').siblings()
+      })
+
+      cy.shouldWithTimeout(() => {
+        // in the case of some firefox browsers, the document state is left in a cross origin context when running these assertions
+        // set to  context to undefined to run the assertions
+        if (Cypress.isBrowser('firefox')) {
+          cy.state('document', undefined)
+        }
+
+        const { consoleProps } = findCrossOriginLogs('siblings', logs, 'foobar.com')
+
+        expect(consoleProps['Applied To']).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps['Applied To']).to.have.property('id').that.equals('input')
+
+        expect(consoleProps.Command).to.equal('siblings')
+        expect(consoleProps.Elements).to.equal(2)
+        expect(consoleProps.Selector).to.equal('')
+
+        expect(consoleProps.Yielded.length).to.equal(2)
+        expect(consoleProps.Yielded[0]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[0]).to.have.property('id').that.equals('name')
+        expect(consoleProps.Yielded[1]).to.have.property('tagName').that.equals('INPUT')
+        expect(consoleProps.Yielded[1]).to.have.property('id').that.equals('age')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/unsupported_commands.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/unsupported_commands.cy.ts
new file mode 100644
index 000000000000..facd558ef6e0
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/unsupported_commands.cy.ts
@@ -0,0 +1,66 @@
+context('cy.origin unsupported commands', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('cy.route() method is deprecated', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.route()` has been deprecated and its use is not supported in the `cy.origin()` callback. Consider using `cy.intercept()` (outside of the callback) instead.')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/intercept')
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.route('api')
+    })
+  })
+
+  it('cy.server() method is deprecated', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.server()` has been deprecated and its use is not supported in the `cy.origin()` callback. Consider using `cy.intercept()` (outside of the callback) instead.')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/intercept')
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.server()
+    })
+  })
+
+  it('cy.origin() is not yet supported', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.origin()` use is not currently supported in the `cy.origin()` callback, but is planned for a future release. Please 👍 the following issue and leave a comment with your use-case:')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/github-issue/20718')
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.origin('barbaz.com', () => {})
+    })
+  })
+
+  it('cy.intercept() is not supported', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.intercept()` use is not supported in the `cy.origin()` callback. Consider using it outside of the callback instead. Otherwise, please 👍 the following issue and leave a comment with your use-case:')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/github-issue/20720')
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.intercept('/foo')
+    })
+  })
+
+  it('cy.session() is not supported', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.session()` use is not supported in the `cy.origin()` callback. Consider using it outside of the callback instead. Otherwise, please 👍 the following issue and leave a comment with your use-case:')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/github-issue/20721')
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.session('/foo')
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/viewport.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/viewport.cy.ts
new file mode 100644
index 000000000000..26efb6f45a6a
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/viewport.cy.ts
@@ -0,0 +1,210 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin viewport', () => {
+  it('syncs the viewport from the primary to secondary', () => {
+    // change the viewport in the primary first
+    cy.viewport(320, 480)
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      const viewportChangedSpy = cy.spy()
+
+      cy.on('viewport:changed', viewportChangedSpy)
+
+      // changing the viewport to the same size shouldn't do anything
+      cy.viewport(320, 480).then(() => {
+        expect(viewportChangedSpy).not.to.be.called
+      })
+
+      cy.window().then((win) => {
+        expect(win.innerWidth).to.equal(320)
+        expect(win.innerHeight).to.equal(480)
+      })
+    })
+  })
+
+  context('with out pre-set viewport', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    })
+
+    context('.viewport()', () => {
+      it('changes the viewport', () => {
+        cy.origin('http://foobar.com:3500', () => {
+          cy.window().then((win) => {
+            expect(win.innerHeight).to.equal(660)
+            expect(win.innerWidth).to.equal(1000)
+          })
+
+          cy.viewport(320, 480)
+
+          cy.window().then((win) => {
+            expect(win.innerHeight).to.equal(480)
+            expect(win.innerWidth).to.equal(320)
+          })
+        })
+      })
+
+      it('resets the viewport between tests', () => {
+        cy.origin('http://foobar.com:3500', () => {
+          cy.window().then((win) => {
+            expect(win.innerHeight).to.equal(660)
+            expect(win.innerWidth).to.equal(1000)
+          })
+        })
+      })
+
+      context('cy.on(\'viewport:changed\')', () => {
+        it('calls viewport:changed handler in cy.origin', () => {
+          cy.origin('http://foobar.com:3500', () => {
+            const viewportChangedSpy = cy.spy()
+
+            cy.on('viewport:changed', viewportChangedSpy)
+
+            cy.viewport(320, 480).then(() => {
+              expect(viewportChangedSpy).to.be.calledOnce
+            })
+          })
+        })
+
+        it('does NOT call viewport:changed handler of primary', () => {
+          const viewportChangedSpy = cy.spy()
+
+          cy.on('viewport:changed', viewportChangedSpy)
+
+          cy.origin('http://foobar.com:3500', () => {
+            cy.viewport(320, 480)
+          }).then(() => {
+            expect(viewportChangedSpy).not.to.be.called
+          })
+        })
+      })
+
+      context('Cypress.on(\'viewport:changed\')', () => {
+        let viewportChangedSpyPrimary
+
+        before(() => {
+          viewportChangedSpyPrimary = cy.spy()
+          cy.origin('http://foobar.com:3500', () => {
+          // using global since a function can't be passed to cy.origin
+          // and we need to be able to remove the listener in the 'after' hook
+            globalThis.viewportChangedSpySecondary = cy.spy()
+          })
+        })
+
+        after(() => {
+          Cypress.off('viewport:changed', viewportChangedSpyPrimary)
+          cy.origin('http://foobar.com:3500', () => {
+            Cypress.off('viewport:changed', globalThis.viewportChangedSpySecondary)
+          })
+
+          delete globalThis.viewportChangedSpySecondary
+        })
+
+        it('calls viewport:changed handler in cy.origin', () => {
+          cy.origin('http://foobar.com:3500', () => {
+            Cypress.on('viewport:changed', globalThis.viewportChangedSpySecondary)
+
+            cy.viewport(320, 480).then(() => {
+              expect(globalThis.viewportChangedSpySecondary).to.be.calledOnce
+            })
+          })
+        })
+
+        it('does NOT call viewport:changed handler of primary', () => {
+          Cypress.on('viewport:changed', viewportChangedSpyPrimary)
+
+          cy.origin('http://foobar.com:3500', () => {
+            cy.viewport(320, 480)
+          }).then(() => {
+            expect(viewportChangedSpyPrimary).not.to.be.called
+          })
+        })
+      })
+
+      it('syncs the viewport from the secondary to primary', () => {
+        const viewportChangedSpy = cy.spy()
+
+        cy.on('viewport:changed', viewportChangedSpy)
+
+        cy.origin('http://foobar.com:3500', () => {
+        // change the viewport in the secondary first
+          cy.viewport(320, 480)
+
+          cy.window().then((win) => {
+            win.location.href = 'http://localhost:3500/fixtures/primary-origin.html'
+          })
+        })
+
+        // changing the viewport to the same size shouldn't do anything
+        cy.viewport(320, 480).then(() => {
+          expect(viewportChangedSpy).not.to.be.called
+        })
+
+        cy.window().then((win) => {
+          expect(win.innerWidth).to.equal(320)
+          expect(win.innerHeight).to.equal(480)
+        })
+      })
+
+      it('syncs the viewport across multiple origins', () => {
+        cy.origin('http://foobar.com:3500', () => {
+          cy.viewport(320, 480)
+          cy.window().then((win) => {
+            expect(win.innerWidth).to.equal(320)
+            expect(win.innerHeight).to.equal(480)
+          })
+        })
+
+        cy.window().then((win) => {
+          win.location.href = 'http://www.idp.com:3500/fixtures/primary-origin.html'
+        })
+
+        cy.origin('http://idp.com:3500', () => {
+          const viewportChangedSpy = cy.spy()
+
+          cy.on('viewport:changed', viewportChangedSpy)
+
+          // changing the viewport to the same size shouldn't do anything
+          cy.viewport(320, 480).then(() => {
+            expect(viewportChangedSpy).not.to.be.called
+          })
+
+          cy.window().then((win) => {
+            expect(win.innerWidth).to.equal(320)
+            expect(win.innerHeight).to.equal(480)
+          })
+        })
+      })
+    })
+
+    context('#consoleProps', () => {
+      let logs: Map<string, any>
+
+      beforeEach(() => {
+        logs = new Map()
+
+        cy.on('log:changed', (attrs, log) => {
+          logs.set(attrs.id, log)
+        })
+      })
+
+      it('.viewport()', () => {
+        cy.origin('http://foobar.com:3500', () => {
+          cy.viewport(320, 480)
+        })
+
+        cy.shouldWithTimeout(() => {
+          const { consoleProps } = findCrossOriginLogs('viewport', logs, 'foobar.com')
+
+          expect(consoleProps.Command).to.equal('viewport')
+          expect(consoleProps.Width).to.equal(320)
+          expect(consoleProps.Height).to.equal(480)
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/waiting.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/waiting.cy.ts
new file mode 100644
index 000000000000..d6f48af7acf9
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/waiting.cy.ts
@@ -0,0 +1,43 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin waiting', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('.wait()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      const delay = cy.spy(Cypress.Promise, 'delay')
+
+      cy.wait(50).then(() => {
+        expect(delay).to.be.calledWith(50, 'wait')
+      })
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.wait()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.wait(200)
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('wait', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('wait')
+        expect(consoleProps).to.have.property('Waited For').to.equal('200ms before continuing')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/window.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/window.cy.ts
new file mode 100644
index 000000000000..c878244d2e34
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/window.cy.ts
@@ -0,0 +1,77 @@
+import { findCrossOriginLogs } from '../../../../support/utils'
+
+context('cy.origin window', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="dom-link"]').click()
+  })
+
+  it('.window()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.window().should('have.property', 'top')
+    })
+  })
+
+  it('.document()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+    })
+  })
+
+  it('.title()', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.title().should('include', 'DOM Fixture')
+    })
+  })
+
+  context('#consoleProps', () => {
+    let logs: Map<string, any>
+
+    beforeEach(() => {
+      logs = new Map()
+
+      cy.on('log:changed', (attrs, log) => {
+        logs.set(attrs.id, log)
+      })
+    })
+
+    it('.window()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.window()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('window', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('window')
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+
+    it('.document()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.document()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('document', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('document')
+        expect(consoleProps.Yielded).to.be.null
+      })
+    })
+
+    it('.title()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.title()
+      })
+
+      cy.shouldWithTimeout(() => {
+        const { consoleProps } = findCrossOriginLogs('title', logs, 'foobar.com')
+
+        expect(consoleProps.Command).to.equal('title')
+        expect(consoleProps.Yielded).to.equal('DOM Fixture')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/config_env.cy.ts b/packages/driver/cypress/e2e/e2e/origin/config_env.cy.ts
new file mode 100644
index 000000000000..b0c767511650
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/config_env.cy.ts
@@ -0,0 +1,271 @@
+['config', 'env'].forEach((fnName) => {
+  describe(`cy.origin- Cypress.${fnName}()`, () => {
+    const USED_KEYS = {
+      foo: 'cy-origin-foo',
+      bar: 'cy-origin-bar',
+      baz: 'cy-origin-baz',
+      qux: 'cy-origin-qux',
+      quux: 'cy-origin-quux',
+      unserializable: 'cy-origin-unserializable',
+      error: 'cy-origin-error',
+    }
+
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    })
+
+    afterEach(() => {
+      // @ts-ignore
+      window.top.__cySkipValidateConfig = true
+    })
+
+    if (fnName === 'config') {
+      it(`throws if mutating read-only config values with Cypress.config()`, () => {
+        return new Promise<void>((resolve) => {
+          // @ts-ignore
+          window.top.__cySkipValidateConfig = false
+          cy.on('fail', (err) => {
+            expect(err.message).to.include('`Cypress.config()` cannot mutate option `chromeWebSecurity` because it is a read-only property.')
+            resolve()
+          })
+
+          cy.origin('http://foobar.com:3500', () => {
+            // @ts-ignore
+            Cypress.config('chromeWebSecurity', false)
+          })
+        })
+      })
+    }
+
+    context('serializable', () => {
+      it(`syncs initial Cypress.${fnName}() from the primary origin to the secondary (synchronously)`, () => {
+        Cypress[fnName](USED_KEYS.foo, 'bar')
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const bar = Cypress[fnName](USED_KEYS.foo)
+
+          expect(bar).to.equal('bar')
+        })
+      })
+
+      it(`syncs serializable values in the Cypress.${fnName}() again to the secondary even after spec bridge is created`, () => {
+        Cypress[fnName](USED_KEYS.foo, 'baz')
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const baz = Cypress[fnName](USED_KEYS.foo)
+
+          expect(baz).to.equal('baz')
+        })
+      })
+
+      it(`syncs serializable Cypress.${fnName}() values outwards from secondary (synchronously)`, () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          Cypress[fnName](USED_KEYS.bar, 'baz')
+        }).then(() => {
+          const baz = Cypress[fnName](USED_KEYS.bar)
+
+          expect(baz).to.equal('baz')
+        })
+      })
+
+      it(`syncs serializable Cypress.${fnName}() values outwards from secondary even if the value is undefined`, () => {
+        Cypress[fnName](USED_KEYS.foo, 'bar')
+
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          Cypress[fnName](USED_KEYS.foo, undefined)
+        }).then(() => {
+          expect(Cypress[fnName]('foo')).to.be.undefined
+        })
+      })
+
+      it(`syncs serializable Cypress.${fnName}() values outwards from secondary (commands/async)`, () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          cy.then(() => {
+            Cypress[fnName](USED_KEYS.bar, 'quux')
+          })
+        }).then(() => {
+          const quux = Cypress[fnName](USED_KEYS.bar)
+
+          expect(quux).to.equal('quux')
+        })
+      })
+
+      it(`persists Cypress.${fnName}() changes made in the secondary, assuming primary has not overwritten with a serializable value`, () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const quux = Cypress[fnName](USED_KEYS.bar)
+
+          expect(quux).to.equal('quux')
+        })
+      })
+
+      it(`does NOT sync Cypress.${fnName}() changes made in the secondary after the command queue is finished and the callback window is closed`, {
+        [USED_KEYS.baz]: undefined,
+        env: {
+          [USED_KEYS.baz]: undefined,
+        },
+      }, () => {
+        return new Promise<void>((resolve) => {
+          cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+            setTimeout(() => {
+              // this value STILL gets set, but will be blown away on the next origin with whatever exists in the primary
+              Cypress[fnName](USED_KEYS.baz, 'qux')
+            }, 100)
+
+            Cypress[fnName](USED_KEYS.baz, 'quux')
+          }).then(() => {
+            const quux = Cypress[fnName](USED_KEYS.baz)
+
+            expect(quux).to.equal('quux')
+            resolve()
+          })
+        })
+      })
+
+      it('overwrites different values in secondary if one exists in the primary', {
+        [USED_KEYS.baz]: 'quux',
+        env: {
+          [USED_KEYS.baz]: 'quux',
+        },
+      }, () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          // in previous test, 'baz' was set to 'qux' after the callback window was closed.
+          // this should be overwritten by 'quux' that exists in the primary
+          const quux = Cypress[fnName](USED_KEYS.baz)
+
+          expect(quux).to.equal('quux')
+        })
+      })
+
+      it(`overwrites different values in secondary, even if the Cypress.${fnName}() value does not exist in the primary`, {
+        [USED_KEYS.baz]: undefined,
+        env: {
+          [USED_KEYS.baz]: undefined,
+        },
+      }, () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const isNowUndefined = Cypress[fnName](USED_KEYS.baz)
+
+          expect(isNowUndefined).to.be.undefined
+        })
+      })
+    })
+
+    context('unserializable', () => {
+      const unserializableFunc = () => undefined
+
+      it('does not sync unserializable values from the primary to the secondary', () => {
+        Cypress[fnName](USED_KEYS.unserializable, unserializableFunc)
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const isUndefined = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isUndefined).to.be.undefined
+        })
+      })
+
+      it('does not overwrite unserializable values in the primary when none exist in the secondary', () => {
+        Cypress[fnName](USED_KEYS.unserializable, unserializableFunc)
+        cy.origin('http://foobar.com:3500', () => undefined)
+
+        const isFunc = Cypress[fnName](USED_KEYS.unserializable)
+
+        expect(isFunc).to.equal(unserializableFunc)
+      })
+
+      it('overwrites unserializable values in the primary when serializable values of same key exist in secondary', () => {
+        Cypress[fnName](USED_KEYS.unserializable, unserializableFunc)
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          Cypress[fnName](USED_KEYS.unserializable, undefined)
+        }).then(() => {
+          const isNowUndefined = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isNowUndefined).to.be.undefined
+        })
+      })
+
+      it('overwrites unserializable values in the secondary when serializable values of same key exist in primary', () => {
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const unserializableFuncSecondary = () => undefined
+
+          Cypress[fnName](USED_KEYS.unserializable, unserializableFuncSecondary)
+        }).then(() => {
+          Cypress[fnName](USED_KEYS.unserializable, undefined)
+        })
+
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const isUndefined = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isUndefined).to.be.undefined
+        }).then(() => {
+          const isUndefined = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isUndefined).to.be.undefined
+        })
+      })
+
+      it('does not overwrite unserializable values in the primary when unserializable values of same key exist in secondary', () => {
+        Cypress[fnName](USED_KEYS.unserializable, unserializableFunc)
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const unserializableFuncSecondary = () => undefined
+
+          Cypress[fnName](USED_KEYS.unserializable, unserializableFuncSecondary)
+        }).then(() => {
+          const isFunc = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isFunc).to.equal(unserializableFunc)
+        })
+      })
+
+      it('does not try to merge objects that contain unserializable values', () => {
+        const partiallyUnserializableObject = {
+          a: 1,
+          b: document.createElement('h1'),
+        }
+
+        Cypress[fnName](USED_KEYS.unserializable, partiallyUnserializableObject)
+
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const doesNotContainPartialAProperty = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(doesNotContainPartialAProperty?.a).to.be.undefined
+
+          Cypress[fnName](USED_KEYS.unserializable, {
+            a: 3,
+            c: document.createElement('h1'),
+          })
+        }).then(() => {
+          const isPartiallyUnserializableObject = Cypress[fnName](USED_KEYS.unserializable)
+
+          expect(isPartiallyUnserializableObject.a).to.equal(1)
+        })
+      })
+    })
+
+    context('structuredClone()', () => {
+      it('(firefox) uses native structuredClone in firefox and does NOT serialize Error objects in config', {
+        browser: 'firefox',
+      }, function () {
+        Cypress[fnName](USED_KEYS.error, new Error('error'))
+
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const isUndefined = Cypress[fnName](USED_KEYS.error)
+
+          expect(isUndefined).to.be.undefined
+        })
+      })
+
+      // NOTE: chrome 98 and above uses a native structuredClone() method, but that method CAN clone Error objects
+      it('(chromium) uses ponyfilled or native structuredClone that can serialize Error objects in config', {
+        browser: { family: 'chromium' },
+      }, () => {
+        Cypress[fnName](USED_KEYS.error, new Error('error'))
+
+        cy.origin('http://foobar.com:3500', { args: { fnName, USED_KEYS } }, ({ fnName, USED_KEYS }) => {
+          const isErrorObj = Cypress[fnName](USED_KEYS.error)
+
+          // We preserve the error structure, but on preprocessing to the spec bridge, the error is converted to a flat object
+          expect(isErrorObj).to.be.an.instanceof(Object)
+          expect(isErrorObj.message).to.eq('error')
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/cookie_login.cy.ts b/packages/driver/cypress/e2e/e2e/origin/cookie_login.cy.ts
new file mode 100644
index 000000000000..6e83a9c354d9
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/cookie_login.cy.ts
@@ -0,0 +1,95 @@
+describe('cy.origin - cookie login', () => {
+  const verifyLoggedIn = (username) => {
+    cy.get('h1')
+    .invoke('text')
+    .should('equal', `Welcome, ${username}!`)
+  }
+
+  it('works in a session', () => {
+    cy.session('ZJohnson', () => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('[data-cy="cookie-login"]').click()
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="username"]').type('ZJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+    }, {
+      validate () {
+        cy.getCookie('user').its('value').should('equal', 'ZJohnson')
+      },
+    })
+
+    cy.visit('/welcome')
+    verifyLoggedIn('ZJohnson')
+  })
+
+  describe('SameSite handling', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('[data-cy="cookie-login"]').click()
+    })
+
+    it('works with no SameSite, no Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="username"]').type('AJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('AJohnson')
+    })
+
+    it('works with SameSite=None, Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="sameSite"]').select('None')
+        cy.get('[data-cy="secure"]').check()
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('BJohnson')
+    })
+
+    it('works with SameSite=None, no Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="sameSite"]').select('None')
+        cy.get('[data-cy="username"]').type('CJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('CJohnson')
+    })
+
+    it('works with SameSite=Lax, Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="sameSite"]').select('Lax')
+        cy.get('[data-cy="secure"]').check()
+        cy.get('[data-cy="username"]').type('DJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('DJohnson')
+    })
+
+    it('works with SameSite=Strict, Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="sameSite"]').select('Strict')
+        cy.get('[data-cy="secure"]').check()
+        cy.get('[data-cy="username"]').type('EJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('EJohnson')
+    })
+
+    it('works with invalid SameSite, Secure', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="sameSite"]').select('Invalid')
+        cy.get('[data-cy="secure"]').check()
+        cy.get('[data-cy="username"]').type('FJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      verifyLoggedIn('FJohnson')
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/cypress_api.cy.ts b/packages/driver/cypress/e2e/e2e/origin/cypress_api.cy.ts
new file mode 100644
index 000000000000..ef8466b486d7
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/cypress_api.cy.ts
@@ -0,0 +1,244 @@
+const { assertLogLength } = require('../../../support/utils')
+
+describe('cy.origin Cypress API', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  context('Commands', () => {
+    it('adds a custom command', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        Cypress.Commands.add('foo', () => 'bar')
+
+        // @ts-ignore
+        cy.foo().should('equal', 'bar')
+      })
+
+      // persists added command through spec bridge
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        cy.foo().should('equal', 'bar')
+      })
+    })
+
+    it('overwrites an existing command in the spec bridge', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        Cypress.Commands.overwrite('foo', () => 'baz')
+
+        // @ts-ignore
+        cy.foo().should('equal', 'baz')
+      })
+
+      // persists overwritten command through spec bridge
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        cy.foo().should('equal', 'baz')
+      })
+    })
+  })
+
+  context('Keyboard', () => {
+    it('does NOT sync defaults', () => {
+      const defaults = Cypress.Keyboard.defaults({
+        keystrokeDelay: 30,
+      })
+
+      cy.origin('http://foobar.com:3500', { args: defaults }, (primaryKeyboardDefaults) => {
+        const crossOriginKeyboardDefaults = Cypress.Keyboard.defaults({})
+
+        expect(crossOriginKeyboardDefaults).to.not.deep.equal(primaryKeyboardDefaults)
+      })
+    })
+
+    it('allows a user to configure defaults', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const crossOriginKeyboardDefaults = Cypress.Keyboard.defaults({
+          keystrokeDelay: 60,
+        })
+
+        expect(crossOriginKeyboardDefaults).to.deep.include({
+          keystrokeDelay: 60,
+        })
+      })
+
+      // persists default configuration changes through spec bridge
+      cy.origin('http://foobar.com:3500', () => {
+        const crossOriginKeyboardDefaults = Cypress.Keyboard.defaults({})
+
+        expect(crossOriginKeyboardDefaults).to.deep.include({
+          keystrokeDelay: 60,
+        })
+      })
+    })
+  })
+
+  context('Screenshot', () => {
+    it('does NOT sync defaults', () => {
+      Cypress.Screenshot.defaults({
+        blackout: ['foo'],
+        overwrite: true,
+        onBeforeScreenshot: () => undefined,
+        onAfterScreenshot: () => undefined,
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        const crossOriginScreenshotDefaults = Cypress.Screenshot.defaults({})
+
+        expect(crossOriginScreenshotDefaults).to.not.deep.include({
+          blackout: ['foo'],
+          overwrite: true,
+          onBeforeScreenshot: () => undefined,
+          onAfterScreenshot: () => undefined,
+        })
+      })
+    })
+
+    it('allows a user to configure defaults', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const crossOriginScreenshotDefaults = Cypress.Screenshot.defaults({
+          blackout: ['foo'],
+          overwrite: true,
+        })
+
+        expect(crossOriginScreenshotDefaults).to.deep.include({
+          blackout: ['foo'],
+          overwrite: true,
+        })
+      })
+
+      // persists default configuration changes through spec bridge
+      cy.origin('http://foobar.com:3500', () => {
+        const crossOriginScreenshotDefaults = Cypress.Screenshot.defaults({})
+
+        expect(crossOriginScreenshotDefaults).to.deep.include({
+          blackout: ['foo'],
+          overwrite: true,
+        })
+      })
+    })
+  })
+
+  context('dom', () => {
+    it('provides a sanity check that the dom API exists on Cypress.*', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="dom-check"]').then(($el) => {
+          expect(Cypress.dom.isAttached($el)).to.be.true
+        })
+      })
+    })
+  })
+
+  context('properties', () => {
+    it('has arch property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.arch }, (theArch) => {
+        expect(Cypress.arch).to.equal(theArch)
+      })
+    })
+
+    it('has browser property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.browser }, (theBrowser) => {
+        expect(Cypress.browser).to.deep.equal(theBrowser)
+      })
+    })
+
+    it('has currentTest property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.currentTest }, (theCurrentTest) => {
+        expect(Cypress.currentTest).to.deep.equal(theCurrentTest)
+      })
+    })
+
+    it('has platform property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.platform }, (thePlatform) => {
+        expect(Cypress.platform).to.equal(thePlatform)
+      })
+    })
+
+    it('has testingType property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.testingType }, (theTestingType) => {
+        expect(Cypress.testingType).to.deep.equal(theTestingType)
+      })
+    })
+
+    it('has spec property synced from primary', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.spec }, (theSpec) => {
+        expect(Cypress.spec).to.deep.equal(theSpec)
+      })
+    })
+  })
+
+  context('methods', () => {
+    it('isCy()', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        expect(Cypress.isCy(cy)).to.be.true
+      })
+    })
+
+    it('isBrowser()', () => {
+      cy.origin('http://foobar.com:3500', { args: Cypress.browser }, (theBrowser) => {
+        expect(Cypress.isBrowser(theBrowser.name)).to.equal(true)
+      })
+    })
+
+    it('log()', () => {
+      const logs: Cypress.Log[] = []
+
+      cy.on('log:added', (attrs, log: Cypress.Log) => {
+        logs.push(log)
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        Cypress.log({
+          name: 'log',
+          message: 'test log',
+        })
+      })
+      .then(() => {
+        assertLogLength(logs, 3)
+        expect(logs[1].get('name')).to.equal('log')
+        expect(logs[1].get('message')).to.equal('test log')
+      })
+    })
+  })
+
+  context('not supported', () => {
+    it('throws an error when a user attempts to configure Cypress.Server.defaults() inside of cy.origin', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`Cypress.Server.*` has been deprecated and its use is not supported in the `cy.origin()` callback. Consider using `cy.intercept()` (outside of the callback) instead.')
+        expect(err.docsUrl).to.equal('https://on.cypress.io/intercept')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        Cypress.Server.defaults({})
+      })
+    })
+
+    it('throws an error when a user attempts to configure Cypress.Cookies.preserveOnce() inside of cy.origin', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`Cypress.Cookies.preserveOnce` use is not supported in the `cy.origin()` callback. Consider using `cy.session()` (outside of the callback) instead.')
+        expect(err.docsUrl).to.equal('https://on.cypress.io/session')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        // @ts-ignore
+        Cypress.Cookies.preserveOnce({})
+      })
+    })
+
+    it('throws an error when a user attempts to call Cypress.session.clearAllSavedSessions() inside of cy.origin', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`Cypress.session.*` methods are not supported in the `cy.switchToDomain()` callback. Consider using them outside of the callback instead.')
+        expect(err.docsUrl).to.equal('https://on.cypress.io/session-api')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        Cypress.session.clearAllSavedSessions()
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/events.cy.ts b/packages/driver/cypress/e2e/e2e/origin/events.cy.ts
new file mode 100644
index 000000000000..aeb2f367884a
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/events.cy.ts
@@ -0,0 +1,152 @@
+describe('cy.origin', () => {
+  it('window:before:load event', () => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.on('window:before:load', (win: {testPrimaryOriginBeforeLoad: boolean}) => {
+      win.testPrimaryOriginBeforeLoad = true
+    })
+
+    cy.window().its('testPrimaryOriginBeforeLoad').should('be.true')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    cy.origin('http://foobar.com:3500', () => {
+      cy.on('window:before:load', (win: {testSecondaryWindowBeforeLoad: boolean}) => {
+        win.testSecondaryWindowBeforeLoad = true
+      })
+
+      cy.window().its('testSecondaryWindowBeforeLoad').should('be.true')
+      cy.window().its('testPrimaryOriginBeforeLoad').should('be.undefined')
+      cy
+      .get('[data-cy="window-before-load"]')
+      .invoke('text')
+      .should('equal', 'Window Before Load Called')
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+
+    cy.window().its('testPrimaryOriginBeforeLoad').should('be.true')
+    cy.window().its('testSecondaryWindowBeforeLoad').should('be.undefined')
+  })
+
+  describe('post window load events', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    })
+
+    it('form:submitted', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterFormSubmitted = new Promise<void>((resolve) => {
+          Cypress.once('form:submitted', (e) => {
+            const $form = cy.$$('form')
+
+            expect(e.target).to.eq($form.get(0))
+            resolve()
+          })
+        })
+
+        cy.get('form').submit()
+        cy.wrap(afterFormSubmitted)
+      })
+    })
+
+    it('window:before:unload', () => {
+      cy.origin('http://www.foobar.com:3500', () => {
+        const afterWindowBeforeUnload = new Promise<void>((resolve) => {
+          Cypress.once('window:before:unload', () => {
+            expect(location.host).to.equal('foobar.com:3500')
+            resolve()
+          })
+        })
+
+        cy.visit('/fixtures/primary-origin.html')
+
+        cy.wrap(afterWindowBeforeUnload)
+      })
+    })
+
+    it('window:unload', () => {
+      cy.origin('http://www.foobar.com:3500', () => {
+        const afterWindowUnload = new Promise<void>((resolve) => {
+          Cypress.once('window:unload', () => {
+            expect(location.host).to.equal('foobar.com:3500')
+            resolve()
+          })
+        })
+
+        cy.visit('/fixtures/primary-origin.html')
+
+        cy.wrap(afterWindowUnload)
+      })
+    })
+
+    it('window:alert', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterWindowAlert = new Promise<void>((resolve) => {
+          Cypress.once('window:alert', (text) => {
+            expect(location.host).to.equal('foobar.com:3500')
+            expect(`window:alert ${text}`).to.equal('window:alert the alert text')
+            resolve()
+          })
+        })
+
+        cy.get('[data-cy="alert"]').click()
+        cy.wrap(afterWindowAlert)
+      })
+    })
+
+    it('window:confirm', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterWindowConfirm = new Promise<void>((resolve) => {
+          Cypress.once('window:confirm', (text) => {
+            expect(location.host).to.equal('foobar.com:3500')
+            expect(`window:confirm ${text}`).to.equal('window:confirm the confirm text')
+            resolve()
+          })
+        })
+
+        cy.get('[data-cy="confirm"]').click()
+        cy.wrap(afterWindowConfirm)
+      })
+    })
+
+    it('window:confirmed - true when no window:confirm listeners return false', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterWindowConfirmed = new Promise<void>((resolve) => {
+          Cypress.once('window:confirmed', (text, returnedFalse) => {
+            expect(location.host).to.equal('foobar.com:3500')
+            expect(`window:confirmed ${text} - ${returnedFalse}`).to.equal('window:confirmed the confirm text - true')
+            resolve()
+          })
+        })
+
+        Cypress.on('window:confirm', () => {})
+        Cypress.on('window:confirm', () => {
+          return true
+        })
+
+        cy.get('[data-cy="confirm"]').click()
+        cy.wrap(afterWindowConfirmed)
+      })
+    })
+
+    it('window:confirmed - false when any window:confirm listeners return false', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterWindowConfirmed = new Promise<void>((resolve) => {
+          Cypress.once('window:confirmed', (text, returnedFalse) => {
+            expect(location.host).to.equal('foobar.com:3500')
+            expect(`window:confirmed ${text} - ${returnedFalse}`).to.equal('window:confirmed the confirm text - false')
+            resolve()
+          })
+        })
+
+        Cypress.on('window:confirm', () => {
+          return false
+        })
+
+        Cypress.on('window:confirm', () => {})
+
+        cy.get('[data-cy="confirm"]').click()
+        cy.wrap(afterWindowConfirmed)
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/logging.cy.ts b/packages/driver/cypress/e2e/e2e/origin/logging.cy.ts
new file mode 100644
index 000000000000..b6b57c3a0c2d
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/logging.cy.ts
@@ -0,0 +1,148 @@
+describe('cy.origin logging', () => {
+  const { _ } = Cypress
+
+  it('groups callback commands on a passing test', () => {
+    const logs: any[] = []
+
+    cy.on('log:added', (attrs) => {
+      logs.push(attrs)
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]').invoke('text')
+    })
+
+    cy.log('after').should(() => {
+      const originLog = _.find(logs, { name: 'origin' })
+      const getLog = _.find(logs, { name: 'get', message: '[data-cy="dom-check"]' })
+      const invokeLog = _.find(logs, { name: 'invoke', message: '.text()' })
+      const newUrlLog = _.find(logs, { name: 'new url' })
+      const logLog = _.find(logs, { name: 'log' })
+
+      expect(originLog.groupStart).to.be.true
+      expect(getLog.group).to.equal(originLog.id)
+      expect(invokeLog.group).to.equal(originLog.id)
+      expect(newUrlLog.group).to.equal(originLog.id)
+      expect(logLog.group).to.be.undefined // ensure the group has ended
+    })
+  })
+
+  it('logs cy.origin as group when failing with validation failure', (done) => {
+    const logs: any[] = []
+
+    cy.on('log:added', (attrs) => {
+      logs.push(attrs)
+    })
+
+    cy.on('fail', () => {
+      const originLog = _.find(logs, { name: 'origin' })
+
+      expect(originLog.groupStart).to.be.true
+
+      done()
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    // @ts-ignore
+    cy.origin(false, () => {})
+  })
+
+  it('logs cy.origin as group when failing with serialization failure', (done) => {
+    const logs: any[] = []
+
+    cy.on('log:added', (attrs) => {
+      logs.push(attrs)
+    })
+
+    cy.on('fail', () => {
+      const originLog = _.find(logs, { name: 'origin' })
+
+      expect(originLog.groupStart).to.be.true
+
+      done()
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    const options = { args: { div: Cypress.$('div') } }
+
+    cy.origin('http://foobar.com:3500', options, () => {})
+  })
+
+  it('groups callback commands when failing with inner command failure', (done) => {
+    const logs: any[] = []
+
+    cy.on('log:added', (attrs) => {
+      logs.push(attrs)
+    })
+
+    cy.on('fail', () => {
+      const originLog = _.find(logs, { name: 'origin' })
+      const getLog = _.find(logs, { name: 'get', message: '[data-cy="dom-check"]' })
+      const invokeLog = _.find(logs, { name: 'invoke', message: '.text()' })
+      const newUrlLog = _.find(logs, { name: 'new url' })
+      const failingGetLog = _.find(logs, { name: 'get', message: '#does-not-exist' })
+
+      expect(originLog.groupStart).to.be.true
+      expect(getLog.group).to.equal(originLog.id)
+      expect(invokeLog.group).to.equal(originLog.id)
+      expect(newUrlLog.group).to.equal(originLog.id)
+      expect(failingGetLog.group).to.equal(originLog.id)
+
+      done()
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]').invoke('text')
+      cy.get('#does-not-exist', { timeout: 1 })
+    })
+
+    cy.log('after')
+  })
+
+  it('groups callback commands when failing with async failure', (done) => {
+    const logs: any[] = []
+
+    cy.on('log:added', (attrs) => {
+      logs.push(attrs)
+    })
+
+    cy.on('fail', () => {
+      const originLog = _.find(logs, { name: 'origin' })
+      const getLog = _.find(logs, { name: 'get', message: '[data-cy="dom-check"]' })
+      const invokeLog = _.find(logs, { name: 'invoke', message: '.text()' })
+      const newUrlLog = _.find(logs, { name: 'new url' })
+
+      expect(originLog.groupStart).to.be.true
+      expect(getLog.group).to.equal(originLog.id)
+      expect(invokeLog.group).to.equal(originLog.id)
+      expect(newUrlLog.group).to.equal(originLog.id)
+
+      done()
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]').invoke('text').then(() => {
+        setTimeout(() => {
+          throw new Error('async error')
+        })
+      })
+
+      cy.wait(300)
+    })
+
+    cy.log('after')
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/navigation.cy.ts b/packages/driver/cypress/e2e/e2e/origin/navigation.cy.ts
new file mode 100644
index 000000000000..e84fb90e7ee5
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/navigation.cy.ts
@@ -0,0 +1,540 @@
+import { assertLogLength } from '../../../support/utils'
+
+// makes logs coming from secondary origin work with `assertLogLength`
+const reifyLogs = (logs) => {
+  return logs.map((attrs) => {
+    return {
+      get (name) {
+        return attrs[name]
+      },
+    }
+  })
+}
+
+describe('navigation events', () => {
+  let logs: any = []
+
+  beforeEach(() => {
+    logs = []
+
+    cy.on('log:added', (attrs, log) => {
+      logs.push(log)
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  describe('navigation:changed', () => {
+    it('navigation:changed via hashChange', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterNavigationChanged = new Promise<void>((resolve) => {
+          const listener = () => {
+            cy.location().should((loc) => {
+              expect(loc.host).to.equal('www.foobar.com:3500')
+              expect(loc.pathname).to.equal('/fixtures/secondary-origin.html')
+              expect(loc.hash).to.equal('#hashChange')
+            })
+
+            resolve()
+          }
+
+          cy.once('navigation:changed', listener)
+        })
+
+        cy.get('a[data-cy="hashChange"]').click()
+        cy.wrap(afterNavigationChanged)
+      })
+    })
+
+    it('navigates forward and back using history', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const onLoad = (cb) => {
+          const onNavChanged = (event) => {
+            if (event === 'page navigation event (\'load\')') {
+              cy.off('navigation:changed', onNavChanged)
+              cb()
+            }
+          }
+
+          cy.on('navigation:changed', onNavChanged)
+        }
+
+        cy.get('a[data-cy="cross-origin-page"]').click()
+        .window().then((win) => {
+          return new Promise<void>((resolve) => {
+            onLoad(resolve)
+
+            win.history.back()
+          }).then(() => {
+            return new Promise<void>((resolve) => {
+              onLoad(resolve)
+
+              win.history.forward()
+            })
+          })
+        })
+      })
+    })
+  })
+
+  describe('window:load', () => {
+    it('reloads', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const logs: any[] = []
+
+        cy.on('log:added', (attrs, log) => {
+          logs.push(log)
+        })
+
+        const afterWindowLoad = new Promise<void>((resolve) => {
+          let times = 0
+          const listener = (win) => {
+            times++
+            expect(win.location.host).to.equal('www.foobar.com:3500')
+            expect(win.location.pathname).to.equal('/fixtures/secondary-origin.html')
+
+            if (times === 2) {
+              cy.removeListener('window:load', listener)
+              resolve()
+            }
+          }
+
+          cy.on('window:load', listener)
+        })
+
+        cy.get('button[data-cy="reload"]').click()
+        cy.wrap(afterWindowLoad).then(() => {
+          return logs.map((log) => ({ name: log.get('name') }))
+        })
+      })
+      .then(reifyLogs)
+      .then((secondaryLogs) => {
+        assertLogLength(secondaryLogs, 9)
+        expect(secondaryLogs[5].get('name')).to.eq('page load')
+      })
+    })
+
+    it('navigates to a new page', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const logs: any[] = []
+
+        cy.on('log:added', (attrs, log) => {
+          logs.push(log)
+        })
+
+        const afterWindowLoad = new Promise<void>((resolve) => {
+          let times = 0
+          const listener = (win) => {
+            times++
+            if (times === 1) {
+              expect(win.location.host).to.equal('www.foobar.com:3500')
+              expect(win.location.pathname).to.equal('/fixtures/secondary-origin.html')
+            }
+
+            if (times === 2) {
+              cy.removeListener('window:load', listener)
+              expect(win.location.host).to.equal('www.foobar.com:3500')
+              expect(win.location.pathname).to.equal('/fixtures/primary-origin.html')
+              resolve()
+            }
+          }
+
+          cy.on('window:load', listener)
+        })
+
+        cy.get('a[data-cy="cross-origin-page"]').click()
+        cy.get('a[data-cy="cross-origin-secondary-link').invoke('text').should('equal', 'http://www.foobar.com:3500/fixtures/secondary-origin.html')
+        cy.wrap(afterWindowLoad).then(() => {
+          return logs.map((log) => ({ name: log.get('name'), message: log.get('message') }))
+        })
+      })
+      .then(reifyLogs)
+      .then((secondaryLogs) => {
+        assertLogLength(secondaryLogs, 13)
+        expect(secondaryLogs[5].get('name')).to.eq('page load')
+        expect(secondaryLogs[6].get('name')).to.eq('new url')
+        expect(secondaryLogs[6].get('message')).to.eq('http://www.foobar.com:3500/fixtures/primary-origin.html')
+      })
+    })
+  })
+
+  describe('url:changed', () => {
+    it('reloads', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterUrlChanged = new Promise<void>((resolve) => {
+          cy.once('url:changed', (url) => {
+            expect(url).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+            resolve()
+          })
+        })
+
+        cy.get('button[data-cy="reload"]').click()
+        cy.wrap(afterUrlChanged)
+      })
+    })
+
+    it('navigates to a new page', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const afterUrlChanged = new Promise<void>((resolve) => {
+          let times = 0
+          const listener = (url) => {
+            times++
+            if (times === 1) {
+              expect(url).to.equal('http://www.foobar.com:3500/fixtures/secondary-origin.html')
+            }
+
+            if (times === 2) {
+              cy.removeListener('url:changed', listener)
+              expect(url).to.equal('http://www.foobar.com:3500/fixtures/primary-origin.html')
+              resolve()
+            }
+          }
+
+          cy.on('url:changed', listener)
+        })
+
+        cy.get('a[data-cy="cross-origin-page"]').click()
+        cy.wrap(afterUrlChanged)
+      })
+    })
+
+    // TODO: this test should re revisited with the cypress in cypress tests available in 10.0
+    // https://github.com/cypress-io/cypress/issues/20973
+    it.skip('the runner url updates appropriately', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('a[data-cy="cross-origin-page"]').click()
+      })
+    })
+  })
+})
+
+// @ts-ignore / session support is needed for visiting about:blank between tests
+describe('event timing', () => {
+  it('does not timeout when receiving a delaying:html event after cy.origin has started, but before the spec bridge is ready', () => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.log('inside cy.origin foobar')
+    })
+
+    // This command is run from localhost against the cross-origin aut. Updating href is one of the few allowed commands. See https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#location
+    cy.window().then((win) => {
+      win.location.href = 'http://www.idp.com:3500/fixtures/primary-origin.html'
+    })
+
+    cy.origin('http://idp.com:3500', () => {
+      cy.log('inside cy.origin idp')
+    })
+  })
+})
+
+// @ts-ignore / session support is needed for visiting about:blank between tests
+describe('delayed navigation', { defaultCommandTimeout: 2000 }, () => {
+  it('localhost -> localhost', () => {
+    cy.visit('/fixtures/auth/delayedNavigate.html')
+    cy.get('[data-cy="to-localhost"]').click()
+    cy.get('[data-cy="login-idp"]')
+  })
+
+  it('localhost -> foobar, delay in', () => {
+    cy.visit('/fixtures/auth/delayedNavigate.html')
+    cy.get('[data-cy="to-foobar"]').click()
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="login-idp"]')
+    })
+  })
+
+  it('foobar -> localhost, delay out', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.origin('http://foobar.com:3500', () => {
+      cy.visit('http://www.foobar.com:3500/fixtures/auth/delayedNavigate.html')
+      cy.get('[data-cy="to-localhost"]').click()
+    })
+
+    cy.get('[data-cy="login-idp"]')
+  })
+
+  it('foobar -> idp, delay out', () => {
+    cy.visit('/fixtures/auth/index.html')
+    cy.origin('http://foobar.com:3500', () => {
+      cy.visit('http://www.foobar.com:3500/fixtures/auth/delayedNavigate.html')
+      cy.get('[data-cy="to-idp"]').click()
+    })
+
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="login-idp"]')
+    })
+  })
+})
+
+// @ts-ignore / session support is needed for visiting about:blank between tests
+describe('errors', () => {
+  it('never calls cy.origin', { pageLoadTimeout: 5000 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+      expect(err.message).to.include(`\n- \`http://localhost:3500\`\n`)
+      expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/idp.html?redirect=http%3A%2F%2Flocalhost%3A3500%2Ffixtures%2Fauth%2Findex.html\` was detected.`)
+      expect(err.message).to.include(`A command that triggers cross-origin navigation must be immediately followed by a \`cy.origin()\` command:`)
+      expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+      expect(err.message).to.include(`If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\``)
+      expect(err.message).to.include(`packages/driver/cypress.config.ts\` to wait longer`)
+
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-foobar"]').click() // Timeout on page load here, we never reach the expected origin
+    cy.get('[data-cy="login-foobar"]')
+  })
+
+  it('never redirects to the cross-origin', { defaultCommandTimeout: 50 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out retrying after 50ms: Expected to find element: \`[data-cy="username"]\`, but never found it`)
+      expect(err.message).to.include(`The command was expected to run against origin \`http://idp.com:3500\` but the application is at origin \`http://localhost:3500\`.`)
+      expect(err.message).to.include(`This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly.`)
+      //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-idp"]')
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson') // Timeout here on command, cannot find element
+      cy.get('[data-cy="login"]').click()
+    })
+
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('redirects to the wrong cross-origin', { pageLoadTimeout: 5000 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+      expect(err.message).to.include(`\n- \`http://idp.com:3500\`\n`)
+      expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/idp.html?redirect=http%3A%2F%2Flocalhost%3A3500%2Ffixtures%2Fauth%2Findex.html\` was detected.`)
+      expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-foobar"]').click() // Timeout on page load here, we never reach the expected origin
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson')
+      cy.get('[data-cy="login"]').click()
+    })
+
+    // Verify that the user has logged in on localhost
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('never returns to the primary origin', { defaultCommandTimeout: 50 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out retrying after 50ms: Expected to find element: \`[data-cy="welcome"]\`, but never found it`)
+      expect(err.message).to.include(`The command was expected to run against origin \`http://localhost:3500\` but the application is at origin \`http://idp.com:3500\`.`)
+      //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-idp"]').click()
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson')
+    }) // cy.origin is stable so the command exits
+
+    // Verify that the user has logged in on localhost
+    cy.get('[data-cy="welcome"]') // Timeout here on command, cannot find element
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('redirects to an unexpected cross-origin', { pageLoadTimeout: 5000 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+      expect(err.message).to.include(`\n- \`http://localhost:3500\`\n`)
+      expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/index.html\` was detected.`)
+      expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-idp"]').click()
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson')
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/fixtures/auth/index.html'
+      })
+    })
+
+    // Verify that the user has logged in on localhost
+    cy.get('[data-cy="welcome"]') // Stability is false, this command is prevented from running until stability is achieved.
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('redirects to an unexpected cross-origin and calls another command in the cy.origin command', { pageLoadTimeout: 5000 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+      expect(err.message).to.include(`\n- \`http://idp.com:3500\`\n`)
+      expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/index.html\` was detected.`)
+      expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html')
+    cy.get('[data-cy="login-idp"]').click()
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson')
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/fixtures/auth/index.html'
+      })
+
+      cy.get('[data-cy="welcome"]') // Timeout here on command, cannot find element
+    })
+
+    // Verify that the user has logged in on localhost
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('fails in cy.origin when a command is run after we return to localhost', { defaultCommandTimeout: 50 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out retrying after 50ms: Expected to find element: \`[data-cy="cannot_find"]\`, but never found it`)
+      expect(err.message).to.include(`The command was expected to run against origin \`http://idp.com:3500\` but the application is at origin \`http://localhost:3500\`.`)
+      //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+    cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="username"]').type('BJohnson')
+      cy.get('[data-cy="login"]').click()
+      cy.get('[data-cy="cannot_find"]') // Timeout here on command stability achieved by primary origin, this command times out.
+    })
+
+    // Verify that the user has logged in on localhost
+    cy.get('[data-cy="welcome"]')
+    .invoke('text')
+    .should('equal', 'Welcome BJohnson')
+  })
+
+  it('fails with a normal timeout', { defaultCommandTimeout: 50 }, (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include(`Timed out retrying after 50ms: Expected to find element: \`[data-cy="cannot_find"]\`, but never found it`)
+      //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+      expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+      expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+      expect(err.message).not.to.include(`The command was expected to run against origin:`)
+      done()
+    })
+
+    cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+    cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+    cy.origin('http://idp.com:3500', () => {
+      cy.get('[data-cy="cannot_find"]') // Timeout here on command stability achieved by primary origin, this command times out.
+    })
+  })
+
+  describe('Pre established spec bridge', () => {
+    // These next three tests test and edge case where we want to prevent a load event from an established spec bridge that is not part of the test.
+    // This test removes the foobar spec bridge, navigates to idp, then navigates to foobar and attempts to access selectors on localhost.
+    it('times out in cy.origin with foobar spec bridge undefined', { pageLoadTimeout: 5000 }, (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+        expect(err.message).to.include(`\n- \`http://localhost:3500\`\n`)
+        expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/index.html\` was detected.`)
+        expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+
+        expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+        expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+        done()
+      })
+
+      cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+      cy.window().then(() => {
+      // Force remove the spec bridge
+        window?.top?.document.getElementById('Spec Bridge: foobar.com')?.remove()
+      })
+
+      cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/fixtures/auth/index.html'
+        })//
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]') // Stability is false, this command is prevented from running until stability is achieved.
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+    })
+
+    // this test just needs to establish the foobar spec bridge.
+    it('establishes foobar spec bridge', () => {
+      cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+      cy.get('[data-cy="login-foobar"]').click() // Takes you to idp.com
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]')
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+    })
+
+    // This test is the same as the first test but the foobar spec bridge has been established and we expect it to behave the same as the first test.
+    // The primary origin should ignore the load event from the foobar spec bridge and load should timeout in the idp cy.origin command..
+    it('times out in cy.origin with foobar spec bridge defined', { pageLoadTimeout: 5000 }, (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.include(`Timed out after waiting \`5000ms\` for your remote page to load on origin(s):`)
+        expect(err.message).to.include(`\n- \`http://localhost:3500\`\n`)
+        expect(err.message).to.include(`A cross-origin request for \`http://www.foobar.com:3500/fixtures/auth/index.html\` was detected.`)
+        expect(err.message).to.include(`\`cy.origin(\'http://foobar.com:3500\', () => {\`\n\`  <commands targeting http://www.foobar.com:3500 go here>\`\n\`})\`\n`)
+
+        expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+        expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+        done()
+      })
+
+      cy.visit('/fixtures/auth/index.html') // Establishes primary origin
+      cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/fixtures/auth/index.html'
+        })
+      })
+
+      // Verify that the user has logged in on localhost
+      cy.get('[data-cy="welcome"]') // Stability is false, this command is prevented from running until stability is achieved.
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/origin.cy.ts b/packages/driver/cypress/e2e/e2e/origin/origin.cy.ts
new file mode 100644
index 000000000000..4703b3531682
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/origin.cy.ts
@@ -0,0 +1,251 @@
+describe('cy.origin', () => {
+  it('passes viewportWidth/Height state to the secondary origin', () => {
+    const expectedViewport = [320, 480]
+
+    cy.viewport(320, 480).then(() => {
+      const primaryViewport = [cy.state('viewportWidth'), cy.state('viewportHeight')]
+
+      expect(primaryViewport).to.deep.equal(expectedViewport)
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+
+    cy.origin('http://foobar.com:3500', { args: expectedViewport }, (expectedViewport) => {
+      const secondaryViewport = [cy.state('viewportWidth'), cy.state('viewportHeight')]
+
+      expect(secondaryViewport).to.deep.equal(expectedViewport)
+    })
+  })
+
+  context('withBeforeEach', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    })
+
+    it('runs commands in secondary origin', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy
+        .get('[data-cy="dom-check"]')
+        .invoke('text')
+        .should('equal', 'From a secondary origin')
+      })
+
+      cy.log('after cy.origin')
+    })
+
+    it('passes runnable state to the secondary origin', () => {
+      const runnable = cy.state('runnable')
+      const expectedRunnable = {
+        clearTimeout: null,
+        isPending: null,
+        resetTimeout: null,
+        timeout: null,
+        id: runnable.id,
+        _currentRetry: runnable._currentRetry,
+        _timeout: 4000,
+        type: 'test',
+        title: 'passes runnable state to the secondary origin',
+        titlePath: [
+          'cy.origin',
+          'withBeforeEach',
+          'passes runnable state to the secondary origin',
+        ],
+        parent: {
+          id: runnable.parent.id,
+          type: 'suite',
+          title: 'withBeforeEach',
+          titlePath: [
+            'withBeforeEach',
+          ],
+          parent: {
+            id: runnable.parent.parent.id,
+            type: 'suite',
+            title: '',
+            titlePath: undefined,
+            ctx: {},
+          },
+          ctx: {},
+        },
+        ctx: {},
+      }
+
+      cy.origin('http://foobar.com:3500', { args: expectedRunnable }, (expectedRunnable) => {
+        const actualRunnable = cy.state('runnable')
+
+        expect(actualRunnable.titlePath()).to.deep.equal(expectedRunnable.titlePath)
+        expectedRunnable.titlePath = actualRunnable.titlePath
+
+        expect(actualRunnable.title).to.equal(expectedRunnable.title)
+        expect(actualRunnable.id).to.equal(expectedRunnable.id)
+        expect(actualRunnable.ctx).to.deep.equal(expectedRunnable.ctx)
+        expect(actualRunnable._timeout).to.equal(expectedRunnable._timeout)
+        expect(actualRunnable.type).to.equal(expectedRunnable.type)
+        expect(actualRunnable.callback).to.exist
+        expect(actualRunnable.timeout).to.exist
+        expect(actualRunnable.parent.title).to.equal(expectedRunnable.parent.title)
+        expect(actualRunnable.parent.type).to.equal(expectedRunnable.parent.type)
+      })
+    })
+
+    it('handles querying nested elements', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy
+        .get('form button')
+        .invoke('text')
+        .should('equal', 'Submit')
+      })
+
+      cy.log('after cy.origin')
+    })
+
+    it('sets up window.Cypress in secondary origin', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy
+        .get('[data-cy="cypress-check"]')
+        .invoke('text')
+        .should('equal', 'Has window.Cypress')
+      })
+    })
+
+    describe('data argument', () => {
+      it('passes object to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: { foo: 'foo', bar: 'bar' } }, ({ foo, bar }) => {
+          expect(foo).to.equal('foo')
+          expect(bar).to.equal('bar')
+        })
+      })
+
+      it('passes array to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: ['foo', 'bar'] }, ([foo, bar]) => {
+          expect(foo).to.equal('foo')
+          expect(bar).to.equal('bar')
+        })
+      })
+
+      it('passes string to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: 'foo' }, (foo) => {
+          expect(foo).to.equal('foo')
+        })
+      })
+
+      it('passes number to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: 1 }, (num) => {
+          expect(num).to.equal(1)
+        })
+      })
+
+      it('passes boolean to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: true }, (bool) => {
+          expect(bool).to.be.true
+        })
+      })
+
+      it('passes mixed types to callback function', () => {
+        cy.origin('http://foobar.com:3500', { args: { foo: 'foo', num: 1, bool: true } }, ({ foo, num, bool }) => {
+          expect(foo).to.equal('foo')
+          expect(num).to.equal(1)
+          expect(bool).to.be.true
+        })
+      })
+    })
+
+    describe('errors', () => {
+      it('propagates secondary origin errors to the primary that occur within the test', (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.include('variable is not defined')
+          expect(err.message).to.include(`Variables must either be defined within the \`cy.origin()\` command or passed in using the args option.`)
+          expect(err.stack).to.include(`Variables must either be defined within the \`cy.origin()\` command or passed in using the args option.`)
+          //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+          expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+          expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+          expect(err.codeFrame).to.exist
+          expect(err.codeFrame!.frame).to.include('cy.origin')
+          done()
+        })
+
+        const variable = 'string'
+
+        cy.origin('http://foobar.com:3500', () => {
+          cy.log(variable)
+        })
+      })
+
+      it('propagates thrown errors in the secondary origin back to the primary w/ done', (done) => {
+        cy.on('fail', (e) => {
+          expect(e.message).to.equal('oops')
+          done()
+        })
+
+        cy.origin('http://foobar.com:3500', () => {
+          throw 'oops'
+        })
+      })
+
+      it('propagates thrown errors in the secondary origin back to the primary w/o done', () => {
+        return new Promise((resolve) => {
+          cy.on('fail', (e) => {
+            expect(e.message).to.equal('oops')
+            resolve(undefined)
+          })
+
+          cy.origin('http://foobar.com:3500', () => {
+            throw 'oops'
+          })
+        })
+      })
+
+      it('receives command failures from the secondary origin', (done) => {
+        const timeout = 50
+
+        cy.on('fail', (err) => {
+          expect(err.message).to.include(`Timed out retrying after ${timeout}ms: Expected to find element: \`#doesnt-exist\`, but never found it`)
+          //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+          expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+          expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+          done()
+        })
+
+        cy.origin('http://foobar.com:3500', { args: timeout }, (timeout) => {
+          cy.get('#doesnt-exist', {
+            timeout,
+          })
+        })
+      })
+
+      it('receives command failures from the secondary origin with the default timeout', { defaultCommandTimeout: 50 }, (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.include(`Timed out retrying after 50ms: Expected to find element: \`#doesnt-exist\`, but never found it`)
+          //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+          expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+          expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+          done()
+        })
+
+        cy.origin('http://foobar.com:3500', () => {
+          cy.get('#doesnt-exist')
+        })
+      })
+
+      it('has non serializable arguments', (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.include(`This is likely because the arguments specified are not serializable. Note that functions and DOM objects cannot be serialized.`)
+          expect(err.stack).to.include(`This is likely because the arguments specified are not serializable. Note that functions and DOM objects cannot be serialized.`)
+          //  make sure that the secondary origin failures do NOT show up as spec failures or AUT failures
+          expect(err.message).not.to.include(`The following error originated from your test code, not from Cypress`)
+          expect(err.message).not.to.include(`The following error originated from your application code, not from Cypress`)
+          expect(err.codeFrame).to.exist
+          expect(err.codeFrame!.frame).to.include('cy.origin')
+          done()
+        })
+
+        const variable = () => {}
+
+        cy.origin('http://idp.com:3500', { args: variable }, (variable) => {
+          variable()
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/rerun.cy.ts b/packages/driver/cypress/e2e/e2e/origin/rerun.cy.ts
new file mode 100644
index 000000000000..de020668585a
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/rerun.cy.ts
@@ -0,0 +1,31 @@
+// @ts-ignore
+describe('cy.origin - rerun', { }, () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('successfully reruns tests', () => {
+    // @ts-ignore
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]')
+    })
+    .then(() => {
+      const top = window.top!
+
+      // @ts-ignore
+      if (!top.hasRunOnce) {
+        // @ts-ignore
+        top.hasRunOnce = true
+
+        // cause a rerun event to occur by triggering a hash change
+        top.dispatchEvent(new Event('hashchange'))
+
+        return
+      }
+
+      // this only executes after the test has been rerun
+      expect(true).to.be.true
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/stability.cy.ts b/packages/driver/cypress/e2e/e2e/origin/stability.cy.ts
new file mode 100644
index 000000000000..26486e41c651
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/stability.cy.ts
@@ -0,0 +1,34 @@
+describe('stability', () => {
+  describe('before each transitions', () => {
+    describe('transitioning from a before block to an it block while unstable', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/auth/index.html')
+        cy.window().then((win) => {
+          win.location.href = 'http://localhost:3500/timeout?ms=1000'
+        })
+      })
+
+      it('fails if the page does not load within the page load timeout', { defaultCommandTimeout: 50, pageLoadTimeout: 500 }, (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.include(`Timed out after waiting \`500ms\` for your remote page to load.`)
+          done()
+        })
+
+        cy.get('[data-cy="login-idp"]').click() // Takes you to idp.com
+      })
+
+      it('waits for the page to load before running the command', { defaultCommandTimeout: 50 }, () => {
+        cy.get('body').invoke('text').should('equal', 'timeout')
+      })
+
+      it('will retry and fail the command after the page loads', { defaultCommandTimeout: 50 }, (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.include(`Timed out retrying after 50ms: expected 'timeout' to equal 'not timeout'`)
+          done()
+        })
+
+        cy.get('body').invoke('text').should('equal', 'not timeout')
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/uncaught_errors.cy.ts b/packages/driver/cypress/e2e/e2e/origin/uncaught_errors.cy.ts
new file mode 100644
index 000000000000..9c5d14a2a79a
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/uncaught_errors.cy.ts
@@ -0,0 +1,464 @@
+describe('cy.origin - uncaught errors', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="errors-link"]').click()
+  })
+
+  describe('sync errors', () => {
+    it('appropriately reports negative assertions', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('AssertionError')
+        expect(err.message).to.include('expected true to be false')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.then(() => {
+          expect(true).to.be.false
+        })
+      })
+    })
+
+    it('fails the current test/command if sync errors are thrown from the cy.origin callback', (done) => {
+      const uncaughtExceptionSpy = cy.spy()
+      const r = cy.state('runnable')
+
+      cy.on('uncaught:exception', uncaughtExceptionSpy)
+      cy.on('fail', (err, runnable) => {
+        // TODO: we likely need to change the messaging around this error to make it clear to cy.origin users that
+        // this behavior is configurable with 'uncaught:exception', but it MUST be declared inside the cy.origin callback
+        // and that 'uncaught:exception' will NOT be triggered outside that callback (inside the primary origin)
+        // https://github.com/cypress-io/cypress/issues/20969
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('sync error')
+        expect(err.message).to.include('The following error originated from your application code, not from Cypress.')
+        expect(err.message).to.not.include('https://on.cypress.io/uncaught-exception-from-application')
+        expect(err.docsUrl).to.deep.eq(['https://on.cypress.io/uncaught-exception-from-application'])
+
+        // lastly, make sure the `uncaught:exception' handler is NOT called in the primary
+        expect(uncaughtExceptionSpy).not.to.be.called
+        expect(runnable).to.be.equal(r)
+
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('.trigger-sync-error').click()
+      })
+    })
+
+    it('returns false from cy.on(uncaught:exception), resulting in cy:fail to not be called in the primary and passes the test', () => {
+      const uncaughtExceptionSpy = cy.spy()
+      const failureSpy = cy.spy()
+
+      cy.on('uncaught:exception', uncaughtExceptionSpy)
+
+      cy.on('fail', failureSpy)
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.on('uncaught:exception', () => false)
+        cy.get('.trigger-sync-error').click()
+      }).then(() => {
+        expect(uncaughtExceptionSpy).not.to.be.called
+        expect(failureSpy).not.to.be.called
+      })
+    })
+
+    it('returns true from cy.on(uncaught:exception), resulting in cy:fail to be called in the primary', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('sync error')
+        expect(err.message).to.include('The following error originated from your application code, not from Cypress.')
+        expect(err.message).to.not.include('https://on.cypress.io/uncaught-exception-from-application')
+        expect(err.docsUrl).to.deep.eq(['https://on.cypress.io/uncaught-exception-from-application'])
+
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.once('uncaught:exception', () => true)
+        cy.get('.trigger-sync-error').click()
+      })
+    })
+
+    // if we mutate the error, the app's listeners for 'error' or
+    // 'unhandledrejection' will have our wrapped error instead of the original
+    it('original error is not mutated for "error" in the origin', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.once('uncaught:exception', () => false)
+
+        cy.get('.trigger-sync-error').click()
+        cy.get('.error-one').invoke('text').should('equal', 'sync error')
+        cy.get('.error-two').invoke('text').should('equal', 'sync error')
+      })
+    })
+  })
+
+  describe('async errors', () => {
+    it('fails the current test/command if async errors are thrown from the cy.origin callback', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('setTimeout error')
+        expect(err.message).to.include('The following error originated from your test code, not from Cypress.')
+        // ensure error doesn't get wrapped twice
+        expect(err.message).not.to.include('> The following error originated')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        setTimeout(() => {
+          throw new Error('setTimeout error')
+        }, 50)
+
+        // add the cy.wait here to keep commands streaming in, forcing the
+        // cy.origin callback window to be open long enough for the error to occur
+        cy.wait(250)
+      })
+    })
+
+    it('fails the current test/command if async errors are thrown from the secondary origin AUT', (done) => {
+      const uncaughtExceptionSpy = cy.spy()
+      const r = cy.state('runnable')
+
+      cy.on('uncaught:exception', uncaughtExceptionSpy)
+
+      cy.on('fail', (err, runnable) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('async error')
+        expect(err.message).to.include('The following error originated from your application code, not from Cypress.')
+        // ensure error doesn't get wrapped twice
+        expect(err.message).not.to.include('> The following error originated')
+        expect(err.message).to.not.include('https://on.cypress.io/uncaught-exception-from-application')
+        expect(err.docsUrl).to.deep.eq(['https://on.cypress.io/uncaught-exception-from-application'])
+
+        expect(uncaughtExceptionSpy).not.to.be.called
+        expect(runnable).to.be.equal(r)
+
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('.trigger-async-error').click()
+
+        // add the cy.wait here to keep commands streaming in,
+        // forcing the cy.origin callback window to be open long enough for an async error to occur
+        cy.wait(1000)
+      })
+    })
+
+    it('passes the current test/command if async errors are thrown from the secondary origin AUT, but the cy.origin callback is finished running', () => {
+      const uncaughtExceptionSpy = cy.spy()
+      const failureSpy = cy.spy()
+
+      cy.on('uncaught:exception', uncaughtExceptionSpy)
+
+      cy.on('fail', failureSpy)
+
+      cy.origin('http://foobar.com:3500', () => {
+        // the async error here should be thrown AFTER the current command and test has finished, resulting in a passed test with no fail being triggered in the primary
+        cy.get('.trigger-async-error').click()
+      }).then(() => {
+        expect(uncaughtExceptionSpy).not.to.be.called
+        expect(failureSpy).not.to.be.called
+      })
+    })
+
+    it('fails the current test/command if async errors are thrown from the cy.origin callback after it is finished running', (done) => {
+      cy.once('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('setTimeout error')
+        expect(err.message).to.include('The following error originated from your test code, not from Cypress.')
+        // ensure error doesn't get wrapped twice
+        expect(err.message).not.to.include('> The following error originated')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        setTimeout(() => {
+          throw new Error('setTimeout error')
+        }, 50)
+      })
+
+      cy.wait(250)
+    })
+  })
+
+  describe('unhandled rejections', () => {
+    it('unhandled rejection triggers uncaught:exception and has promise as third argument', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        const r = cy.state('runnable')
+
+        const afterUncaughtException = new Promise<void>((resolve) => {
+          cy.once('uncaught:exception', (err, runnable, promise) => {
+            expect(err.stack).to.include('promise rejection')
+            expect(err.stack).to.include('one')
+            expect(err.stack).to.include('two')
+            expect(err.stack).to.include('three')
+            expect(runnable).to.be.equal(r)
+            expect(promise).to.be.a('promise')
+
+            resolve()
+
+            return false
+          })
+        })
+
+        cy.get('.trigger-unhandled-rejection').click()
+        cy.wrap(afterUncaughtException)
+      })
+    })
+
+    it('original error is not mutated for "unhandledrejection"', () => {
+      cy.origin('http://foobar.com:3500', () => {
+        cy.once('uncaught:exception', () => false)
+
+        cy.get('.trigger-unhandled-rejection').click()
+        cy.get('.error-one').invoke('text').should('equal', 'promise rejection')
+        cy.get('.error-two').invoke('text').should('equal', 'promise rejection')
+      })
+    })
+
+    it('fails the current test/command if a promise is rejected from the test code in cy.origin', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('rejected promise')
+        expect(err.message).to.include('The following error originated from your test code, not from Cypress. It was caused by an unhandled promise rejection.')
+        expect(err.message).to.not.include('https://on.cypress.io/uncaught-exception-from-application')
+
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        Promise.reject(new Error('rejected promise'))
+
+        // add the cy.wait here to keep commands streaming in, forcing the
+        // cy.origin callback window to be open long enough for the error to occur
+        cy.wait(250)
+      })
+    })
+
+    it('fails the current test/command if a promise is rejected from the cy.origin callback after it is finished running', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.eq('Error')
+        expect(err.message).to.include('rejected promise')
+        expect(err.message).to.include('The following error originated from your test code, not from Cypress. It was caused by an unhandled promise rejection.')
+        expect(err.message).to.not.include('https://on.cypress.io/uncaught-exception-from-application')
+
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        Promise.reject(new Error('rejected promise'))
+      })
+
+      cy.wait(250)
+    })
+  })
+
+  describe('unserializable errors', () => {
+    it('handles users throwing dom elements', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('CypressError')
+        expect(err.message).to.equal('`cy.origin()` could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw document.createElement('h1')
+      })
+    })
+
+    it('handles users throwing functions', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('CypressError')
+        expect(err.message).to.equal('`cy.origin()` could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw () => undefined
+      })
+    })
+
+    it('handles users throwing symbols', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('CypressError')
+        expect(err.message).to.equal('`cy.origin()` could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw Symbol('foo')
+      })
+    })
+
+    it('handles users throwing promises', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('CypressError')
+        expect(err.message).to.equal('`cy.origin()` could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw new Promise(() => {})
+      })
+    })
+  })
+
+  describe('serializable errors', () => {
+    it('handles users throwing complex errors/classes', (done) => {
+      cy.on('fail', (err: any) => {
+        expect(err.name).to.equal('CustomError')
+        expect(err.message).to.equal('custom error')
+        expect(err._name).to.equal('CustomError')
+        expect(err.foo).to.equal('bar')
+
+        const { writable } = Object.getOwnPropertyDescriptor(err, 'name') as PropertyDescriptor
+
+        // After serialization, read-only properties are now writable
+        expect(writable).to.be.true
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        class CustomError extends Error {
+          private _name = 'CustomError'
+          get name () {
+            return this._name
+          }
+          set name (name: string) {
+            this._name = name
+          }
+        }
+
+        const customErrorInstance = new CustomError('custom error')
+
+        // @ts-ignore
+        customErrorInstance.foo = 'bar'
+
+        const { writable } = Object.getOwnPropertyDescriptor(CustomError, 'name') as PropertyDescriptor
+
+        // make sure the name property is read-only before serializing it through postMessage
+        expect(writable).to.be.false
+
+        cy.then(() => {
+          throw customErrorInstance
+        })
+      })
+    })
+
+    it('handles users throwing complex objects/classes', (done) => {
+      cy.on('fail', (err: any) => {
+        expect(err.customMethod).to.be.undefined
+        expect(err.customProp).to.equal('foobar')
+        expect(err._metasyntaticList).to.deep.equal(['foo', 'bar'])
+        expect(err.metasyntaticList).to.deep.equal(['foo', 'bar'])
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        class FooBar {
+          private _metasyntaticList = ['foo']
+          get metasyntaticList (): string[] {
+            return this._metasyntaticList
+          }
+          set metasyntaticList (itemsToAdd: string[]) {
+            this._metasyntaticList = this._metasyntaticList.concat(itemsToAdd)
+          }
+        }
+
+        const foobarInstance: any = new FooBar
+
+        foobarInstance.customProp = 'foobar'
+        foobarInstance.metasyntaticList = ['bar']
+        foobarInstance.customMethod = () => undefined
+
+        throw foobarInstance
+      })
+    })
+
+    it('handles users throwing strings', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal(`oops`)
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw 'oops'
+      })
+    })
+
+    it('handles users throwing arrays', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal('why would anyone do this?,this is odd')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw ['why would anyone do this?', 'this is odd']
+      })
+    })
+
+    it('handles users throwing numbers', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal('2')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw 2
+      })
+    })
+
+    it('handles users throwing booleans', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal('true')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw true
+      })
+    })
+
+    it('handles users throwing null', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal('null')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw null
+      })
+    })
+
+    it('handles users throwing undefined', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('Error')
+        expect(err.message).to.equal('undefined')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw undefined
+      })
+    })
+
+    it('handles throwing of arbitrary data types that are serializable but cannot be mapped to an error', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.name).to.equal('CypressError')
+        expect(err.message).to.equal('`cy.origin()` could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.')
+        done()
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        throw new Date()
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/validation.cy.ts b/packages/driver/cypress/e2e/e2e/origin/validation.cy.ts
new file mode 100644
index 000000000000..da326175f05d
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/validation.cy.ts
@@ -0,0 +1,358 @@
+describe('cy.origin', () => {
+  describe('successes', () => {
+    it('succeeds on a localhost domain name', () => {
+      cy.origin('localhost', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://localhost/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://localhost') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on an ip address', () => {
+      cy.origin('127.0.0.1', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://127.0.0.1/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://127.0.0.1') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    // TODO: $Location does not support ipv6
+    // https://github.com/cypress-io/cypress/issues/20970
+    it.skip('succeeds on an ipv6 address', () => {
+      cy.origin('0000:0000:0000:0000:0000:0000:0000:0001', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://[::1]/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://[::1]') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a unicode domain', () => {
+      cy.origin('はじめよう.みんな', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://xn--p8j9a0d9c9a.xn--q9jyb4c/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://xn--p8j9a0d9c9a.xn--q9jyb4c') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a complete origin', () => {
+      cy.origin('http://foobar1.com:3500', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `http://foobar1.com:3500/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ http://foobar1.com:3500') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a complete origin using https', () => {
+      cy.origin('https://foobar2.com:3500', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar2.com:3500/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar2.com:3500') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a hostname and port', () => {
+      cy.origin('foobar3.com:3500', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar3.com:3500/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar3.com:3500') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a protocol and hostname', () => {
+      cy.origin('http://foobar4.com', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `http://foobar4.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ http://foobar4.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a subdomain', () => {
+      cy.origin('app.foobar5.com', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar5.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar5.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds when only domain is passed', () => {
+      cy.origin('foobar6.com', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar6.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar6.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a url with path', () => {
+      cy.origin('http://www.foobar7.com/login', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `http://foobar7.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ http://foobar7.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a url with a hash', () => {
+      cy.origin('http://www.foobar8.com/#hash', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `http://foobar8.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ http://foobar8.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a url with a path and hash', () => {
+      cy.origin('http://www.foobar9.com/login/#hash', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `http://foobar9.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ http://foobar9.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a domain with path', () => {
+      cy.origin('foobar10.com/login', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar10.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar10.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a domain with a hash', () => {
+      cy.origin('foobar11.com/#hash', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar11.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar11.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a domain with a path and hash', () => {
+      cy.origin('foobar12.com/login/#hash', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar12.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar12.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a public suffix with a subdomain', () => {
+      cy.origin('app.foobar.herokuapp.com', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://foobar.herokuapp.com/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://foobar.herokuapp.com') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('succeeds on a machine name', () => {
+      cy.origin('machine-name', () => undefined)
+      cy.then(() => {
+        const expectedSrc = `https://machine-name/__cypress/spec-bridge-iframes`
+        const iframe = window.top?.document.getElementById('Spec\ Bridge:\ https://machine-name') as HTMLIFrameElement
+
+        expect(iframe.src).to.equal(expectedSrc)
+      })
+    })
+
+    it('finds the right spec bridge with a subdomain', () => {
+      cy.visit('/fixtures/auth/index.html')
+      cy.window().then((win) => {
+        win.location.href = 'http://baz.foobar.com:3500/fixtures/auth/idp.html'
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="username"]').type('TJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      cy.get('[data-cy="welcome"]')
+      .invoke('text')
+      .should('equal', 'Welcome TJohnson')
+    })
+
+    it('finds the correct spec bridge even if a previous spec bridge host is a subset of the current host', () => {
+      // Establish a spec bridge with a 'bar.com' host prior to loading 'foobar.com'
+      cy.origin('http://www.bar.com:3500', () => undefined)
+
+      cy.origin('http://www.app.foobar.com:3500', () => {
+        cy.visit('/fixtures/primary-origin.html')
+      })
+    })
+
+    it('uses cy.origin twice', () => {
+      cy.visit('/fixtures/auth/index.html')
+      cy.get('[data-cy="login-idp"]').click()
+      cy.origin('http://idp.com:3500', () => {
+        cy.get('[data-cy="username"]').type('BJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      cy.get('[data-cy="welcome"]')
+      .invoke('text')
+      .should('equal', 'Welcome BJohnson')
+
+      cy.get('[data-cy="logout"]').click()
+
+      cy.window().then((win) => {
+        win.location.href = 'http://baz.foobar.com:3500/fixtures/auth/idp.html'
+      })
+
+      cy.origin('http://foobar.com:3500', () => {
+        cy.get('[data-cy="username"]').type('TJohnson')
+        cy.get('[data-cy="login"]').click()
+      })
+
+      cy.get('[data-cy="welcome"]')
+      .invoke('text')
+      .should('equal', 'Welcome TJohnson')
+    })
+
+    it('creates a spec bridge for https://idp.com:3502', () => {
+      cy.visit('/fixtures/auth/index.html')
+      cy.origin('idp.com:3502', () => {
+        cy.visit('https://www.idp.com:3502/fixtures/auth/index.html')
+        cy.get('[data-cy="login-idp"]').invoke('text').should('equal', 'Login IDP')
+      })
+    })
+
+    it('creates a spec bridge for http://idp.com:3500', () => {
+      cy.visit('/fixtures/auth/index.html')
+      cy.origin('http://idp.com:3500', () => {
+        cy.visit('http://www.idp.com:3500/fixtures/auth/index.html')
+        cy.get('[data-cy="login-idp"]').invoke('text').should('equal', 'Login IDP')
+      })
+    })
+  })
+
+  describe('errors', () => {
+    // @ts-ignore
+    it('errors if experimental flag is not enabled', { experimentalSessionAndOrigin: false }, (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires enabling the experimentalSessionAndOrigin flag')
+
+        done()
+      })
+
+      // @ts-ignore
+      cy.origin()
+    })
+
+    it('errors if passed a non-string for the origin argument', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires the first argument to be either a url (`https://www.example.com/path`) or a domain name (`example.com`). Query parameters are not allowed. You passed: ``')
+
+        done()
+      })
+
+      // @ts-ignore
+      cy.origin()
+    })
+
+    it('errors if query params are provided', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires the first argument to be either a url (`https://www.example.com/path`) or a domain name (`example.com`). Query parameters are not allowed. You passed: `http://www.foobar.com?foo=bar`')
+
+        done()
+      })
+
+      cy.origin('http://www.foobar.com?foo=bar', () => undefined)
+    })
+
+    it('errors passing non-array to callback function', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires the \'options\' argument to be an object. You passed: `foo`')
+
+        done()
+      })
+
+      // @ts-ignore
+      cy.origin('foobar.com', 'foo', () => {})
+    })
+
+    it('errors passing in invalid config object to callback function', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.include('`cy.origin()` detected extraneous keys in your options configuration.')
+        expect(err.message).to.include('The extraneous keys detected were:')
+        expect(err.message).to.include('> `foo, bar`')
+        expect(err.message).to.include('Valid keys include the following:')
+        expect(err.message).to.include('> `args`')
+
+        done()
+      })
+
+      cy.origin('foobar.com', {
+        // @ts-ignore
+        foo: 'foo',
+        bar: 'bar',
+      }, () => {})
+    })
+
+    it('errors if passed a non-serializable args value', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.include('arguments specified are not serializable')
+
+        if (Cypress.browser.family === 'chromium') {
+          expect(err.message).to.include('HTMLDivElement object could not be cloned')
+        } else if (Cypress.browser.family === 'firefox') {
+          expect(err.message).to.include('The object could not be cloned')
+        }
+
+        done()
+      })
+
+      const el = document.createElement('div')
+
+      cy.origin('foobar.com', { args: ['foo', '1', el] }, () => {})
+    })
+
+    it('errors if last argument is absent', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires the last argument to be a function. You passed: ``')
+
+        done()
+      })
+
+      // @ts-ignore
+      cy.origin('foobar.com')
+    })
+
+    it('errors if last argument is not a function', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.equal('`cy.origin()` requires the last argument to be a function. You passed: `{}`')
+
+        done()
+      })
+
+      // @ts-ignore
+      cy.origin('foobar.com', {})
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/origin/yield.cy.ts b/packages/driver/cypress/e2e/e2e/origin/yield.cy.ts
new file mode 100644
index 000000000000..be04412b54d8
--- /dev/null
+++ b/packages/driver/cypress/e2e/e2e/origin/yield.cy.ts
@@ -0,0 +1,257 @@
+import { assertLogLength } from '../../../support/utils'
+
+describe('cy.origin yields', () => {
+  let logs: any = []
+
+  beforeEach(() => {
+    logs = []
+
+    cy.on('log:added', (attrs, log) => {
+      logs.push(log)
+    })
+
+    cy.visit('/fixtures/primary-origin.html')
+    cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+  })
+
+  it('yields a value', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy
+      .get('[data-cy="dom-check"]')
+      .invoke('text')
+    }).should('equal', 'From a secondary origin')
+  })
+
+  it('yields the cy value even if a return is present', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy
+      .get('[data-cy="dom-check"]')
+      .invoke('text')
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve('text')
+        }, 50)
+      })
+    }).should('equal', 'From a secondary origin')
+  })
+
+  it('errors if a cy command is present and it returns a sync value', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 5)
+      expect(logs[4].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` failed because you are mixing up async and sync code.')
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy
+      .get('[data-cy="dom-check"]')
+      .invoke('text')
+
+      return 'text'
+    })
+  })
+
+  it('yields synchronously', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      return 'From a secondary origin'
+    }).should('equal', 'From a secondary origin')
+  })
+
+  it('yields asynchronously', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      return new Promise((resolve: (val: string) => any, reject) => {
+        setTimeout(() => {
+          resolve('From a secondary origin')
+        }, 50)
+      })
+    }).should('equal', 'From a secondary origin')
+  })
+
+  it('succeeds if subject cannot be serialized and is not accessed synchronously', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      return {
+        symbol: Symbol(''),
+      }
+    }).then((obj) => {
+      return 'object not accessed'
+    }).should('equal', 'object not accessed')
+  })
+
+  it('throws if subject cannot be serialized and is accessed synchronously', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 7)
+      expect(logs[6].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      return {
+        symbol: Symbol(''),
+      }
+    }).then((obj) => {
+      // @ts-ignore
+      return obj.symbol // This will fail accessing the symbol
+    })
+  })
+
+  it('succeeds if subject cannot be serialized and is not accessed', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]')
+    })
+    .then(() => {
+      return 'object not accessed'
+    })
+    .should('equal', 'object not accessed')
+  })
+
+  it('throws if subject cannot be serialized and is accessed', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 8)
+      expect(logs[7].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin<JQuery>('http://foobar.com:3500', () => {
+      cy.get('[data-cy="dom-check"]')
+    })
+    .then((subject) => subject.text())
+    .should('equal', 'From a secondary origin')
+  })
+
+  it('throws if an object contains a function', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 8)
+      expect(logs[7].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin<{ key: Function }>('http://foobar.com:3500', () => {
+      cy.wrap({
+        key: () => {
+          return 'whoops'
+        },
+      })
+    })
+    .then((subject) => subject.key())
+    .should('equal', 'whoops')
+  })
+
+  it('throws if an object contains a symbol', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 8)
+      expect(logs[7].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap({
+        key: Symbol('whoops'),
+      })
+    })
+    .should('equal', undefined)
+  })
+
+  it('throws if an object is a function', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 8)
+      expect(logs[7].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to functions not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap(() => {
+        return 'text'
+      })
+    })
+    .then((obj) => {
+      // @ts-ignore
+      obj()
+    })
+  })
+
+  it('throws if an object is a symbol', (done) => {
+    cy.on('fail', (err) => {
+      assertLogLength(logs, 8)
+      expect(logs[7].get('error')).to.eq(err)
+      expect(err.message).to.include('`cy.origin()` could not serialize the subject due to symbols not being supported by the structured clone algorithm.')
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap(Symbol('symbol'))
+    })
+    .should('equal', 'symbol')
+  })
+
+  // NOTE: Errors can only be serialized on chromium browsers.
+  it('yields an error if an object contains an error', (done) => {
+    const isChromium = Cypress.isBrowser({ family: 'chromium' })
+
+    cy.on('fail', (err) => {
+      if (!isChromium) {
+        assertLogLength(logs, 8)
+        expect(logs[7].get('error')).to.eq(err)
+        expect(err.message).to.include('`cy.origin()` could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.')
+      }
+
+      done()
+    })
+
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap({
+        key: new Error('Boom goes the dynamite'),
+      })
+    })
+    .its('key.message')
+    .should('equal', 'Boom goes the dynamite').then(() => {
+      done()
+    })
+  })
+
+  it('yields an object containing valid types', () => {
+    cy.origin('http://foobar.com:3500', () => {
+      cy.wrap({
+        array: [
+          1,
+          2,
+        ],
+        undefined,
+        bool: true,
+        null: null,
+        number: 12,
+        object: {
+          key: 'key',
+        },
+        string: 'string',
+      })
+    })
+    .should('deep.equal', {
+      array: [
+        1,
+        2,
+      ],
+      undefined,
+      bool: true,
+      null: null,
+      number: 12,
+      object: {
+        key: 'key',
+      },
+      string: 'string',
+    })
+  })
+})
diff --git a/packages/driver/cypress/e2e/e2e/text_mask.cy.js b/packages/driver/cypress/e2e/e2e/text_mask.cy.js
index ae655386e004..8de87ec3a16d 100644
--- a/packages/driver/cypress/e2e/e2e/text_mask.cy.js
+++ b/packages/driver/cypress/e2e/e2e/text_mask.cy.js
@@ -1,9 +1,12 @@
 let changed = 0
 
 describe('src/cy/commands/actions/type text_mask_spec', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/fixtures/text-mask.html')
 
+    // reset number of change events before test
+    changed = 0
+
     // count the number of change events
     return cy.get('input').then(($els) => {
       return $els.change(($el) => {
@@ -12,11 +15,6 @@ describe('src/cy/commands/actions/type text_mask_spec', () => {
     })
   })
 
-  beforeEach(() => {
-    // reset number of change events before test
-    changed = 0
-  })
-
   context('#type', () => {
     it('can type into phone', () => {
       cy.get('#phone')
diff --git a/packages/driver/cypress/e2e/issues/17805.cy.js b/packages/driver/cypress/e2e/issues/17805.cy.js
new file mode 100644
index 000000000000..e26bf9f0a989
--- /dev/null
+++ b/packages/driver/cypress/e2e/issues/17805.cy.js
@@ -0,0 +1,25 @@
+// @see https://github.com/cypress-io/cypress/issues/17805
+describe('issue 17805', { experimentalSessionAndOrigin: true }, () => {
+  it('recreates session on spec reload in open mode', () => {
+    let validateFlag = false
+
+    cy.session('persist_session', () => {
+      validateFlag = true
+    },
+    {
+      validate () {
+        if (validateFlag) {
+          return true
+        }
+
+        return false
+      },
+    })
+  })
+
+  after(() => {
+    if (cy.$$('.commands-container li.command:first', top.document).text().includes('(new)')) {
+      top.location.reload()
+    }
+  })
+})
diff --git a/packages/driver/cypress/e2e/issues/3890.cy.js b/packages/driver/cypress/e2e/issues/3890.cy.js
index 26b0a3803b8a..bc0fcda52934 100644
--- a/packages/driver/cypress/e2e/issues/3890.cy.js
+++ b/packages/driver/cypress/e2e/issues/3890.cy.js
@@ -2,26 +2,16 @@
 const { $ } = Cypress
 
 describe('issue 3890 overwriting cy.route command', () => {
-  before(() => {
+  beforeEach(function () {
     cy
     .visit('/fixtures/jquery.html')
     .then(function (win) {
       const h = $(win.document.head)
 
       h.find('script').remove()
-
-      this.head = h.prop('outerHTML')
-      this.body = win.document.body.outerHTML
     })
   })
 
-  beforeEach(function () {
-    const doc = cy.state('document')
-
-    $(doc.head).empty().html(this.head)
-    $(doc.body).empty().html(this.body)
-  })
-
   it('stores route as an alias', () => {
     // sanity test before overwriting cy.route in the next test
     cy
diff --git a/packages/driver/cypress/e2e/util/queue.cy.ts b/packages/driver/cypress/e2e/util/queue.cy.ts
index c23a23168f0b..ecbd6a52b7d6 100644
--- a/packages/driver/cypress/e2e/util/queue.cy.ts
+++ b/packages/driver/cypress/e2e/util/queue.cy.ts
@@ -201,4 +201,16 @@ describe('src/util/queue', () => {
       expect(queue.stopped).to.false
     })
   })
+
+  context('.last', () => {
+    it('returns the last item', () => {
+      expect(queue.last()).to.deep.equal({ id: '3' })
+
+      queue.add({ id: '4' })
+      expect(queue.last()).to.deep.equal({ id: '4' })
+
+      queue.clear()
+      expect(queue.last()).to.equal(undefined)
+    })
+  })
 })
diff --git a/packages/driver/cypress/e2e/util/serialization.cy.ts b/packages/driver/cypress/e2e/util/serialization.cy.ts
new file mode 100644
index 000000000000..bc74f266f5b7
--- /dev/null
+++ b/packages/driver/cypress/e2e/util/serialization.cy.ts
@@ -0,0 +1,688 @@
+import { reifyDomElement, preprocessDomElement, preprocessLogLikeForSerialization, preprocessLogForSerialization, reifyLogFromSerialization } from '../../../src/util/serialization/log'
+
+describe('Log Serialization', () => {
+  const buildSnapshot = (innerSnapshotElement) => {
+    const mockSnapshot = document.createElement('body')
+
+    // populate some items into the mockSnapshot that would mimic what the DOM might actually look like, along with our inner snapshot element
+    const mockContainer = document.createElement('div')
+    const mockInnerHeader = document.createElement('h1')
+    const mockTextNode = document.createTextNode('Mock Snapshot Header')
+
+    mockInnerHeader.appendChild(mockTextNode)
+    mockContainer.appendChild(mockInnerHeader)
+    mockContainer.appendChild(innerSnapshotElement)
+
+    mockSnapshot.appendChild(mockContainer)
+
+    return mockSnapshot
+  }
+
+  it('preprocesses complex log-like data structures by preprocessing log DOM elements and table functions', () => {
+    const mockSpan = document.createElement('span')
+
+    mockSpan.innerHTML = 'click button'
+
+    const mockButton = document.createElement('button')
+
+    mockButton.appendChild(mockSpan)
+
+    const mockClickedElement = document.createElement('form')
+
+    mockClickedElement.appendChild(mockButton)
+    mockClickedElement.id = 'button-inside-a'
+
+    const mockSnapshot = buildSnapshot(mockClickedElement)
+
+    const mockSnapshots = ['before', 'after'].map((snapshotName) => {
+      return {
+        name: snapshotName,
+        htmlAttrs: {},
+        body: {
+          get: () => Cypress.$(mockSnapshot),
+        },
+      }
+    })
+
+    // mockLogAttrs should look just like log attributes that are emitted from log:changed/log:added events. This example is what a 'click' log may look like
+    const mockLogAttrs = {
+      $el: Cypress.$(mockClickedElement),
+      alias: undefined,
+      chainerId: 'mock-chainer-id',
+      consoleProps: {
+        ['Applied To']: mockClickedElement,
+        Command: 'click',
+        Coords: {
+          x: 100,
+          y: 50,
+        },
+        Options: undefined,
+        Yielded: undefined,
+        table: {
+          1: () => {
+            return {
+              name: 'Mouse Events',
+              // NOTE: click data length is truncated for test readability
+              data: [
+                {
+                  'Active Modifiers': null,
+                  'Event Type': 'pointerover',
+                  'Prevented Default': null,
+                  'Stopped Propagation': null,
+                  'Target Element': mockClickedElement,
+                },
+                {
+                  'Active Modifiers': null,
+                  'Event Type': 'mouseover',
+                  'Prevented Default': null,
+                  'Stopped Propagation': null,
+                  'Target Element': mockClickedElement,
+                },
+              ],
+            }
+          },
+        },
+      },
+      coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 },
+      ended: true,
+      err: undefined,
+      event: false,
+      highlightAttr: 'data-cypress-el',
+      hookId: 'r4',
+      id: 'mock-log-id',
+      instrument: 'command',
+      message: '',
+      name: 'click',
+      numElements: 1,
+      referencesAlias: undefined,
+      renderProps: {},
+      snapshots: mockSnapshots,
+      state: 'passed',
+      testCurrentRetry: 0,
+      testId: 'r4',
+      timeout: 4000,
+      type: 'child',
+      url: 'http://www.foobar.com',
+      viewportHeight: 660,
+      viewportWidth: 1000,
+      visible: true,
+      wallClockStartedAt: '2022-04-18T21:52:37.833Z',
+    }
+
+    const { consoleProps, snapshots, $el, ...logAttrs } = preprocessLogForSerialization(mockLogAttrs)
+
+    expect(logAttrs).to.deep.equal({
+      alias: undefined,
+      chainerId: 'mock-chainer-id',
+      coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 },
+      ended: true,
+      err: undefined,
+      event: false,
+      highlightAttr: 'data-cypress-el',
+      hookId: 'r4',
+      id: 'mock-log-id',
+      instrument: 'command',
+      message: '',
+      name: 'click',
+      numElements: 1,
+      referencesAlias: undefined,
+      renderProps: {},
+      state: 'passed',
+      testCurrentRetry: 0,
+      testId: 'r4',
+      timeout: 4000,
+      type: 'child',
+      url: 'http://www.foobar.com',
+      viewportHeight: 660,
+      viewportWidth: 1000,
+      visible: true,
+      wallClockStartedAt: '2022-04-18T21:52:37.833Z',
+    })
+
+    expect($el).to.deep.equal([
+      {
+        attributes: {
+          id: 'button-inside-a',
+        },
+        innerHTML: '<button><span>click button</span></button>',
+        serializationKey: 'dom',
+        tagName: 'FORM',
+      },
+    ])
+
+    expect(consoleProps).to.deep.equal({
+      ['Applied To']: {
+        attributes: {
+          id: 'button-inside-a',
+        },
+        innerHTML: '<button><span>click button</span></button>',
+        serializationKey: 'dom',
+        tagName: 'FORM',
+      },
+      Command: 'click',
+      Coords: {
+        x: 100,
+        y: 50,
+      },
+      Options: undefined,
+      Yielded: undefined,
+      table: {
+        1: {
+          serializationKey: 'function',
+          value: {
+            name: 'Mouse Events',
+            data: [
+              {
+                'Active Modifiers': null,
+                'Event Type': 'pointerover',
+                'Prevented Default': null,
+                'Stopped Propagation': null,
+                'Target Element': {
+                  attributes: {
+                    id: 'button-inside-a',
+                  },
+                  innerHTML: '<button><span>click button</span></button>',
+                  serializationKey: 'dom',
+                  tagName: 'FORM',
+                },
+              },
+              {
+                'Active Modifiers': null,
+                'Event Type': 'mouseover',
+                'Prevented Default': null,
+                'Stopped Propagation': null,
+                'Target Element': {
+                  attributes: {
+                    id: 'button-inside-a',
+                  },
+                  innerHTML: '<button><span>click button</span></button>',
+                  serializationKey: 'dom',
+                  tagName: 'FORM',
+                },
+              },
+            ],
+          },
+        },
+      },
+    })
+
+    expect(snapshots).to.deep.equal([
+      {
+        name: 'before',
+        htmlAttrs: {},
+        styles: {},
+        body: {
+          get: {
+            serializationKey: 'function',
+            value: [{
+              attributes: {},
+              innerHTML: `<div><h1>Mock Snapshot Header</h1><form id="button-inside-a"><button><span>click button</span></button></form></div>`,
+              serializationKey: 'dom',
+              tagName: 'BODY',
+            }],
+          },
+        },
+      },
+      {
+        name: 'after',
+        htmlAttrs: {},
+        styles: {},
+        body: {
+          get: {
+            serializationKey: 'function',
+            value: [{
+              attributes: {},
+              innerHTML: `<div><h1>Mock Snapshot Header</h1><form id="button-inside-a"><button><span>click button</span></button></form></div>`,
+              serializationKey: 'dom',
+              tagName: 'BODY',
+            }],
+          },
+        },
+      },
+    ])
+  })
+
+  it('reifies complex log-like data structures by reifying serialized DOM elements and table functions back into native data types, respectively', () => {
+    // this should log identical to the test output above from what a preprocessed click log looks like after postMessage()
+    const mockPreprocessedLogAttrs = {
+      $el: [
+        {
+          attributes: {
+            id: 'button-inside-a',
+          },
+          innerHTML: '<button><span>click button</span></button>',
+          serializationKey: 'dom',
+          tagName: 'FORM',
+        },
+      ],
+      alias: undefined,
+      chainerId: 'mock-chainer-id',
+      consoleProps: {
+        ['Applied To']: {
+          attributes: {
+            id: 'button-inside-a',
+          },
+          innerHTML: '<button><span>click button</span></button>',
+          serializationKey: 'dom',
+          tagName: 'FORM',
+        },
+        Command: 'click',
+        Coords: {
+          x: 100,
+          y: 50,
+        },
+        Options: undefined,
+        Yielded: undefined,
+        table: {
+          1: {
+            serializationKey: 'function',
+            value: {
+              name: 'Mouse Events',
+              // NOTE: click data length is truncated for test readability
+              data: [
+                {
+                  'Active Modifiers': null,
+                  'Event Type': 'pointerover',
+                  'Prevented Default': null,
+                  'Stopped Propagation': null,
+                  'Target Element': {
+                    attributes: {
+                      id: 'button-inside-a',
+                    },
+                    innerHTML: '<button><span>click button</span></button>',
+                    serializationKey: 'dom',
+                    tagName: 'FORM',
+                  },
+                },
+                {
+                  'Active Modifiers': null,
+                  'Event Type': 'mouseover',
+                  'Prevented Default': null,
+                  'Stopped Propagation': null,
+                  'Target Element': {
+                    attributes: {
+                      id: 'button-inside-a',
+                    },
+                    innerHTML: '<button><span>click button</span></button>',
+                    serializationKey: 'dom',
+                    tagName: 'FORM',
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+      coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 },
+      ended: true,
+      err: undefined,
+      event: false,
+      highlightAttr: 'data-cypress-el',
+      hookId: 'r4',
+      id: 'mock-log-id',
+      instrument: 'command',
+      message: '',
+      name: 'click',
+      numElements: 1,
+      referencesAlias: undefined,
+      renderProps: {},
+      snapshots: [
+        {
+          name: 'before',
+          htmlAttrs: {},
+          styles: {},
+          body: {
+            get: {
+              serializationKey: 'function',
+              value: [{
+                attributes: {},
+                innerHTML: `<div><h1>Mock Snapshot Header</h1><form id="button-inside-a"><button><span>click button</span></button></form></div>`,
+                serializationKey: 'dom',
+                tagName: 'BODY',
+              }],
+            },
+          },
+        },
+        {
+          name: 'after',
+          htmlAttrs: {},
+          styles: {},
+          body: {
+            get: {
+              serializationKey: 'function',
+              value: [{
+                attributes: {},
+                innerHTML: `<div><h1>Mock Snapshot Header</h1><form id="button-inside-a"><button><span>click button</span></button></form></div>`,
+                serializationKey: 'dom',
+                tagName: 'BODY',
+              }],
+            },
+          },
+        },
+      ],
+      state: 'passed',
+      testCurrentRetry: 0,
+      testId: 'r4',
+      timeout: 4000,
+      type: 'child',
+      url: 'http://www.foobar.com',
+      viewportHeight: 660,
+      viewportWidth: 1000,
+      visible: true,
+      wallClockStartedAt: '2022-04-18T21:52:37.833Z',
+    }
+
+    const { consoleProps, snapshots, $el, ...logAttrs } = reifyLogFromSerialization(mockPreprocessedLogAttrs)
+
+    expect(logAttrs).to.deep.equal({
+      alias: undefined,
+      chainerId: 'mock-chainer-id',
+      coords: { top: 50, left: 50, topCenter: 100, leftCenter: 1000, x: 100, y: 50 },
+      ended: true,
+      err: undefined,
+      event: false,
+      highlightAttr: 'data-cypress-el',
+      hookId: 'r4',
+      id: 'mock-log-id',
+      instrument: 'command',
+      message: '',
+      name: 'click',
+      numElements: 1,
+      referencesAlias: undefined,
+      renderProps: {},
+      state: 'passed',
+      testCurrentRetry: 0,
+      testId: 'r4',
+      timeout: 4000,
+      type: 'child',
+      url: 'http://www.foobar.com',
+      viewportHeight: 660,
+      viewportWidth: 1000,
+      visible: true,
+      wallClockStartedAt: '2022-04-18T21:52:37.833Z',
+    })
+
+    expect($el.jquery).to.be.ok
+    expect($el.length).to.equal(1)
+    expect($el[0]).to.be.instanceOf(HTMLFormElement)
+    expect($el[0].id).to.equal('button-inside-a')
+    expect($el[0].textContent).to.equal('click button')
+
+    // most of the consoleProps logic is tested in the e2e/commands/origin folder. focus in this test will be mostly snapshot serialization
+    expect(consoleProps['Applied To']).to.be.instanceOf(HTMLFormElement)
+    expect(consoleProps['Applied To']).to.have.property('id').that.equals('button-inside-a')
+    expect(consoleProps['Applied To']).to.have.property('textContent').that.equals('click button')
+
+    expect(consoleProps.table).to.have.property('1')
+    expect(consoleProps.table[1]).to.be.a('function')
+
+    expect(snapshots).to.have.lengthOf(2)
+
+    expect(snapshots[0]).to.have.property('name').that.equals('before')
+    expect(snapshots[0]).to.have.property('htmlAttrs').that.deep.equals({})
+    // styles should now live in the CSS map after a snapshot is processed through createSnapshot and snapshots should exist in document map
+    expect(snapshots[0]).to.not.have.property('styles')
+    expect(snapshots[0]).to.have.property('body').that.has.property('get').that.is.a('function')
+
+    const snapshotBodyBefore = snapshots[0].body.get()
+
+    expect(snapshotBodyBefore.length).to.equal(1)
+
+    expect(snapshotBodyBefore[0]).to.be.instanceOf(HTMLBodyElement)
+    // verify to some degree that the reified elements above can be matched into the snapshot
+    expect(snapshotBodyBefore[0].querySelector('form#button-inside-a')).to.be.instanceOf(HTMLFormElement)
+
+    expect(snapshots[1]).to.have.property('name').that.equals('after')
+    expect(snapshots[1]).to.have.property('htmlAttrs').that.deep.equals({})
+    expect(snapshots[1]).to.not.have.property('styles')
+    expect(snapshots[1]).to.have.property('body').that.has.property('get').that.is.a('function')
+
+    const snapshotBodyAfter = snapshots[1].body.get()
+
+    expect(snapshotBodyAfter.length).to.equal(1)
+
+    expect(snapshotBodyAfter[0]).to.be.instanceOf(HTMLBodyElement)
+    // verify to some degree that the reified elements above can be matched into the snapshot
+    expect(snapshotBodyAfter[0].querySelector('form#button-inside-a')).to.be.instanceOf(HTMLFormElement)
+  })
+
+  // purpose of these 'DOM Elements' tests is to give a very basic understanding of how DOM element serialization works in the log serializer
+  context('DOM Elements- preprocesses/reifies a given DOM element with stateful', () => {
+    context('input', () => {
+      it('preprocess', () => {
+        const inputElement = document.createElement('input')
+
+        inputElement.type = 'text'
+        inputElement.value = 'foo'
+        inputElement.setAttribute('data-cy', 'bar')
+
+        const snapshot = buildSnapshot(inputElement)
+
+        snapshot.setAttribute('foo', 'bar')
+
+        const preprocessedSnapshot = preprocessDomElement(snapshot)
+
+        expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY')
+        expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom')
+        expect(preprocessedSnapshot).to.have.property('attributes').that.deep.equals({
+          foo: 'bar',
+        })
+
+        expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`<div><h1>Mock Snapshot Header</h1><input type="text" data-cy="bar" value="foo"></div>`)
+      })
+
+      it('reifies', () => {
+        const preprocessedSnapshot = {
+          tagName: 'BODY',
+          serializationKey: 'dom',
+          attributes: {
+            foo: 'bar',
+          },
+          innerHTML: `<div><h1>Mock Snapshot Header</h1><input type="text" data-cy="bar" value="foo"></div>`,
+        }
+
+        const reifiedSnapshot = reifyDomElement(preprocessedSnapshot)
+
+        expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement)
+        expect(reifiedSnapshot.getAttribute('foo')).to.equal('bar')
+        expect(reifiedSnapshot.querySelector('input[type="text"][value="foo"][data-cy="bar"]')).to.be.instanceOf(HTMLInputElement)
+      })
+    })
+
+    context('select', () => {
+      it('preprocess', () => {
+        const selectElement = document.createElement('select')
+
+        selectElement.id = 'metasyntactic-variables'
+        selectElement.name = 'Metasyntactic Variables'
+
+        const options = ['Hank Hill', 'Buck Strickland', 'Donna', 'Old Donna'].map((val) => {
+          const option = document.createElement('option')
+
+          option.value = val
+
+          return option
+        })
+
+        options.forEach((option) => selectElement.appendChild(option))
+
+        selectElement.selectedIndex = 1
+
+        const snapshot = buildSnapshot(selectElement)
+
+        const preprocessedSnapshot = preprocessDomElement(snapshot)
+
+        expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY')
+        expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom')
+        expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`<div><h1>Mock Snapshot Header</h1><select id="metasyntactic-variables" name="Metasyntactic Variables"><option value="Hank Hill"></option><option value="Buck Strickland" selected="true"></option><option value="Donna"></option><option value="Old Donna"></option></select></div>`)
+      })
+
+      it('reifies', () => {
+        const preprocessedSnapshot = {
+          tagName: 'BODY',
+          serializationKey: 'dom',
+          attributes: {},
+          innerHTML: `<div><h1>Mock Snapshot Header</h1><select id="metasyntactic-variables" name="Metasyntactic Variables"><option value="Hank Hill"></option><option value="Buck Strickland" selected="true"></option><option value="Donna"></option><option value="Old Donna"></option></select></div>`,
+        }
+
+        const reifiedSnapshot = reifyDomElement(preprocessedSnapshot)
+
+        expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement)
+        expect(reifiedSnapshot.querySelector('select#metasyntactic-variables option[selected]')).to.have.property('value').that.equals('Buck Strickland')
+      })
+    })
+
+    context('textarea', () => {
+      it('preprocess', () => {
+        const textAreaElement = document.createElement('textarea')
+
+        textAreaElement.rows = 4
+        textAreaElement.cols = 20
+        textAreaElement.value = 'Generic variable names that function as placeholders'
+
+        const snapshot = buildSnapshot(textAreaElement)
+
+        const preprocessedSnapshot = preprocessDomElement(snapshot)
+
+        expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY')
+        expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom')
+        expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`<div><h1>Mock Snapshot Header</h1><textarea rows="4" cols="20">Generic variable names that function as placeholders</textarea></div>`)
+      })
+
+      it('reifies', () => {
+        const preprocessedSnapshot = {
+          tagName: 'BODY',
+          serializationKey: 'dom',
+          attributes: {},
+          innerHTML: `<div><h1>Mock Snapshot Header</h1><textarea rows="4" cols="20">Generic variable names that function as placeholders</textarea></div>`,
+        }
+
+        const reifiedSnapshot = reifyDomElement(preprocessedSnapshot)
+
+        expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement)
+        expect(reifiedSnapshot.querySelector('textarea[rows="4"]')).to.have.property('textContent').that.equals('Generic variable names that function as placeholders')
+      })
+    })
+
+    context('radio', () => {
+      it('preprocess', () => {
+        const formElement = document.createElement('form')
+
+        const radioInputs = ['foo', 'bar', 'baz'].map((val) => {
+          const radioInput = document.createElement('input')
+
+          radioInput.type = 'radio'
+          radioInput.value = val
+
+          return radioInput
+        })
+
+        radioInputs[1].checked = true
+
+        radioInputs.forEach((radioInput) => formElement.appendChild(radioInput))
+
+        const snapshot = buildSnapshot(formElement)
+
+        const preprocessedSnapshot = preprocessDomElement(snapshot)
+
+        expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY')
+        expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom')
+        expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`<div><h1>Mock Snapshot Header</h1><form><input type="radio" value="foo"><input type="radio" value="bar" checked=""><input type="radio" value="baz"></form></div>`)
+      })
+
+      it('reifies', () => {
+        const preprocessedSnapshot = {
+          tagName: 'BODY',
+          serializationKey: 'dom',
+          attributes: {},
+          innerHTML: `<div><h1>Mock Snapshot Header</h1><form><input type="radio" value="foo"><input type="radio" value="bar" checked=""><input type="radio" value="baz"></form></div>`,
+        }
+
+        const reifiedSnapshot = reifyDomElement(preprocessedSnapshot)
+
+        expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement)
+        expect(reifiedSnapshot.querySelector('form input[value="bar"]')).to.have.property('checked').that.equals(true)
+      })
+    })
+
+    context('checkbox', () => {
+      it('preprocess', () => {
+        const formElement = document.createElement('form')
+
+        const checkboxInputs = ['foo', 'bar', 'bar'].map((val) => {
+          const checkboxInput = document.createElement('input')
+
+          checkboxInput.type = 'checkbox'
+          checkboxInput.value = val
+
+          return checkboxInput
+        })
+
+        checkboxInputs[1].checked = true
+
+        checkboxInputs.forEach((checkboxInput) => formElement.appendChild(checkboxInput))
+
+        const snapshot = buildSnapshot(formElement)
+
+        const preprocessedSnapshot = preprocessDomElement(snapshot)
+
+        expect(preprocessedSnapshot).to.have.property('tagName').that.equals('BODY')
+        expect(preprocessedSnapshot).to.have.property('serializationKey').that.equals('dom')
+        expect(preprocessedSnapshot).to.have.property('innerHTML').that.equals(`<div><h1>Mock Snapshot Header</h1><form><input type="checkbox" value="foo"><input type="checkbox" value="bar" checked=""><input type="checkbox" value="bar"></form></div>`)
+      })
+
+      it('reifies', () => {
+        const preprocessedSnapshot = {
+          tagName: 'BODY',
+          serializationKey: 'dom',
+          attributes: {},
+          innerHTML: `"<div><h1>Mock Snapshot Header</h1><form><input type="checkbox" value="foo"><input type="checkbox" value="bar" checked=""><input type="checkbox" value="bar"></form></div>"`,
+        }
+
+        const reifiedSnapshot = reifyDomElement(preprocessedSnapshot)
+
+        expect(reifiedSnapshot).to.be.instanceOf(HTMLBodyElement)
+        expect(reifiedSnapshot.querySelector('form input[value="bar"]')).to.have.property('checked').that.equals(true)
+      })
+    })
+  })
+
+  // purpose of these 'DOM Elements' tests is to give a very basic understanding of how DOM element serialization works in the log serializer
+  context('Functions', () => {
+    it('does NOT try to serialize a function unless `attemptToSerializeFunctions` is set to true', () => {
+      const serializedFunction = preprocessLogLikeForSerialization(() => 'foo')
+
+      expect(serializedFunction).to.be.null
+    })
+
+    it('Tries to serialize EXPLICIT/KNOWN serializable functions by setting `attemptToSerializeFunctions` to true', () => {
+      const functionContents = [
+        'foo',
+        {
+          bar: 'baz',
+        },
+        document.createElement('html'),
+      ]
+
+      const myKnownSerializableFunction = () => functionContents
+
+      const serializedFunction = preprocessLogLikeForSerialization(myKnownSerializableFunction, true)
+
+      expect(serializedFunction).to.deep.equal({
+        serializationKey: 'function',
+        value: [
+          'foo',
+          {
+            bar: 'baz',
+          },
+          {
+            tagName: 'HTML',
+            serializationKey: 'dom',
+            attributes: {},
+            innerHTML: '',
+          },
+        ],
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/fixtures/auth/approval.html b/packages/driver/cypress/fixtures/auth/approval.html
new file mode 100644
index 000000000000..744924c73521
--- /dev/null
+++ b/packages/driver/cypress/fixtures/auth/approval.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <button data-cy="approve-orig">Approve Redirect to originator after auth</button>
+  <button data-cy="approve-me">Approve Redirect to me after auth</button>
+
+  <script>
+    const queryString = location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const token = urlParams.get('token')
+
+    const addTokenToRedirect = (href, jwt) => {
+      const redirectUrl = new URL(href)
+      const redirectUrlParams = new URLSearchParams(redirectUrl.search);
+      redirectUrlParams.append('token', jwt)
+      redirectUrl.search = redirectUrlParams.toString()
+      return redirectUrl.href
+    }
+
+    const getRedirectHref = () => {
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      let redirect = urlParams.get('redirect')
+
+      if (redirect){
+        return decodeURIComponent(redirect)
+      }
+
+      return 'http://localhost:3500/fixtures/auth/index.html'
+    }
+
+    if (token) {
+      // Add Login button that redirects to the idp
+      const loginBtn = document.createElement("button");
+      loginBtn.innerHTML = "Login Successful - return to main site"
+      loginBtn.dataset.cy = "login-success"
+      loginBtn.onclick = function () {
+        const redirectHref = getRedirectHref()
+
+        window.location.href = addTokenToRedirect(redirectHref, token)
+      };
+      document.body.appendChild(loginBtn);
+    }
+
+    document.querySelector('[data-cy="approve-orig"]').addEventListener('click', () => {
+
+      const redirectHref = getRedirectHref()
+
+      window.location.href = `http://www.idp.com:3500/fixtures/auth/idp.html?redirect=${encodeURIComponent(redirectHref)}`
+    })
+
+    document.querySelector('[data-cy="approve-me"]').addEventListener('click', () => {
+      window.location.href = `http://www.idp.com:3500/fixtures/auth/idp.html?redirect=${encodeURIComponent(window.location.href)}`
+    })
+  </script>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/auth/cookie-login.html b/packages/driver/cypress/fixtures/auth/cookie-login.html
new file mode 100644
index 000000000000..4a439d400b1e
--- /dev/null
+++ b/packages/driver/cypress/fixtures/auth/cookie-login.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <select data-cy="sameSite">
+    <option value="">Empty</option>
+    <option value="None">None</option>
+    <option value="Lax">Lax</option>
+    <option value="Strict">Strict</option>
+    <option value="Invalid">Invalid</option>
+  </select>
+  <label>
+    <input type="checkbox" data-cy="secure" /> Secure
+  </label>
+  <label for="name">Username: </label>
+  <input data-cy="username" type="text" required>
+  <button data-cy="login">Login</button>
+
+  <script>
+    document.querySelector('[data-cy="login"]').addEventListener('click', () => {
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const redirect = urlParams.get('redirect')
+      const username = document.querySelector('[data-cy=username]').value
+      const sameSite = document.querySelector('[data-cy=sameSite]').value
+      const secure = document.querySelector('[data-cy=secure]').checked
+      let url = `https://www.foobar.com:3502/cookie-login?redirect=${redirect}&username=${username}`
+
+      if (sameSite) {
+        url += `&sameSite=${sameSite}`
+      }
+
+      if (secure) {
+        url += `&secure=true`
+      }
+
+      window.location.href = url
+    })
+  </script>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/auth/delayedNavigate.html b/packages/driver/cypress/fixtures/auth/delayedNavigate.html
new file mode 100644
index 000000000000..0367ba084248
--- /dev/null
+++ b/packages/driver/cypress/fixtures/auth/delayedNavigate.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <button data-cy="to-localhost" onclick="setTimeout(()=>{window.location.href = 'http://localhost:3500/fixtures/auth/index.html'}, 1500)">navigate to localhost</button>
+  <button data-cy="to-foobar" onclick="setTimeout(()=>{window.location.href = 'http://www.foobar.com:3500/fixtures/auth/index.html'}, 1500)">navigate to foobar</button>
+  <button data-cy="to-idp" onclick="setTimeout(()=>{window.location.href = 'http://www.idp.com:3500/fixtures/auth/index.html'}, 1500)">navigate to idp</button>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/auth/idp.html b/packages/driver/cypress/fixtures/auth/idp.html
new file mode 100644
index 000000000000..8f52f4f28648
--- /dev/null
+++ b/packages/driver/cypress/fixtures/auth/idp.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <label for="name">Username: </label>
+  <input data-cy="username" type="text" name="name" id="name" required>
+  <button data-cy="login">Login</button>
+  <button data-cy="slow-login">Slow Login</button>
+
+  <script>
+    const createToken = (username) => {
+      const expiry = new Date()
+      // Expire in 10 minutes
+      expiry.setMinutes(expiry.getMinutes() + 10)
+      // create faux jwt
+      return {
+        header: {
+          alg: 'string',
+          type: 'JWT'
+        },
+        body: {
+          username,
+          expiry: expiry.toISOString()
+        }
+      }
+    }
+
+    const getRedirectHref = () => {
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      let redirect = urlParams.get('redirect')
+
+      if (redirect){
+        return decodeURIComponent(redirect)
+      }
+
+      return 'http://localhost:3500/fixtures/auth/index.html'
+    }
+
+    const addTokenToRedirect = (href, token) => {
+      const redirectUrl = new URL(href)
+      const redirectUrlParams = new URLSearchParams(redirectUrl.search);
+      redirectUrlParams.append('token', encodeURIComponent(JSON.stringify(token)))
+      redirectUrl.search = redirectUrlParams.toString()
+      return redirectUrl.href
+    }
+
+    document.querySelector('[data-cy="login"]').addEventListener('click', () => {
+      const token = createToken(document.querySelector('[data-cy="username"]').value)
+
+      const redirectHref = getRedirectHref()
+
+      window.location.href = addTokenToRedirect(redirectHref, token)
+    })
+
+    document.querySelector('[data-cy="slow-login"]').addEventListener('click', () => {
+      const token = createToken(document.querySelector('[data-cy="username"]').value)
+
+      const redirectHref = getRedirectHref()
+
+      setTimeout(() => {
+        window.location.href = addTokenToRedirect(redirectHref, token)
+      }, 5000);
+    })
+  </script>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/auth/index.html b/packages/driver/cypress/fixtures/auth/index.html
new file mode 100644
index 000000000000..bc7f2327ab10
--- /dev/null
+++ b/packages/driver/cypress/fixtures/auth/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <script>
+    const sessionStorage = window.sessionStorage;
+
+    // If there is a new token, set it. This is clearly not secure and no one should setup real auth this way
+    const queryString = location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const newToken = urlParams.get('token')
+
+
+    if (newToken) {
+      sessionStorage.setItem('cypressAuthToken', decodeURIComponent(newToken));
+      urlParams.delete('token')
+      const newSearchParams = urlParams.toString()
+
+      let newLocation = `${location.origin}${location.pathname}`
+
+      if(newSearchParams){
+        newLocation = `${newLocation}?${newSearchParams}`
+      }
+
+      if(location.hash){
+        newLocation = `${newLocation}${location.hash}`
+      }
+
+      location.replace(newLocation)
+    }
+
+    const cypressAuthToken = sessionStorage.getItem('cypressAuthToken');
+
+    // If a token doesn't exist we aren't logged in
+    if (!cypressAuthToken){
+      // Add Message
+      const tag = document.createElement("p");
+      const text = document.createTextNode("You are not logged in");
+      tag.appendChild(text)
+      const body = document.body
+      body.appendChild(tag)
+
+      // Add Login button that redirects to the idp
+      const loginBtn = document.createElement("button");
+      loginBtn.innerHTML = "Login IDP"
+      loginBtn.dataset.cy = "login-idp"
+      loginBtn.onclick = function () {
+        window.location.href = `http://www.idp.com:3500/fixtures/auth/idp.html?redirect=${encodeURIComponent(window.location.href)}`
+      };
+      document.body.appendChild(loginBtn);
+
+      // Add Login button that redirects to the idp
+      const loginFoobarBtn = document.createElement("button");
+      loginFoobarBtn.innerHTML = "Login Foobar"
+      loginFoobarBtn.dataset.cy = "login-foobar"
+      loginFoobarBtn.onclick = function () {
+        window.location.href = `http://www.foobar.com:3500/fixtures/auth/idp.html?redirect=${encodeURIComponent(window.location.href)}`
+      };
+      document.body.appendChild(loginFoobarBtn);
+
+      // Add Login button that redirects to the idp
+      const loginWithApprovalBtn = document.createElement("button");
+      loginWithApprovalBtn.innerHTML = "Login With Approval"
+      loginWithApprovalBtn.dataset.cy = "login-with-approval"
+      loginWithApprovalBtn.onclick = function () {
+        window.location.href = `http://wwww.foobar.com:3500/fixtures/auth/approval.html?redirect=${encodeURIComponent(window.location.href)}`
+      };
+      document.body.appendChild(loginWithApprovalBtn);
+
+    } else {
+      const token = JSON.parse(cypressAuthToken)
+      // If the token exists, hooray, give them a logout button to destroy the token and refresh.
+      const tag = document.createElement("p");
+      const text = document.createTextNode(`Welcome ${token.body.username}`);
+      tag.dataset.cy = "welcome"
+      tag.appendChild(text)
+      const body = document.body
+      body.appendChild(tag)
+
+      // Add log out button
+      const btn = document.createElement("button");
+      btn.innerHTML = "Logout";
+      btn.dataset.cy = "logout"
+      btn.onclick = function () {
+        sessionStorage.removeItem('cypressAuthToken');
+        location.reload()
+      };
+      document.body.appendChild(btn);
+    }
+
+  </script>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/dom.html b/packages/driver/cypress/fixtures/dom.html
index 762e7fa1a18b..6347924ceccf 100644
--- a/packages/driver/cypress/fixtures/dom.html
+++ b/packages/driver/cypress/fixtures/dom.html
@@ -437,8 +437,8 @@
       </select>
 
       <select name="foods">
-        <option value="Japanese">Ramen</option>
-        <option value="Ramen">Japanese</option>
+        <option value="Ramen">Ramen</option>
+        <option value="Japanese">Japanese</option>
       </select>
 
       <select name="names">
@@ -463,7 +463,7 @@
       </select>
 
       <fieldset disabled>
-        <select name="fielset-disabled">
+        <select name="fieldset-disabled">
           <option value="foo">foo</option>
           <option value="bar">bar</option>
         </select>
diff --git a/packages/driver/cypress/fixtures/dropdown.html b/packages/driver/cypress/fixtures/dropdown.html
deleted file mode 100644
index ab0c2cc0520e..000000000000
--- a/packages/driver/cypress/fixtures/dropdown.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>DOM Fixture</title>
-    <script type="text/javascript" src="/node_modules/sinon/dist/sinon.js"></script>
-    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
-  </head>
-  <body>
-    <div id="background">
-      <link rel="stylesheet" href="/node_modules/@cypress/bower-kendo-ui/styles/kendo.common.min.css">
-      <link rel="stylesheet" href="/node_modules/@cypress/bower-kendo-ui/styles/kendo.default.min.css">
-
-      <style>
-        #background {
-          position: fixed;
-          background-color: gray;
-          width: 100%;
-          height: 100%;
-        }
-      </style>
-
-      <input id="dropdown" />
-
-      <script type="text/javascript" src="/node_modules/@cypress/bower-kendo-ui/js/kendo.ui.core.min.js"></script>
-      <script type="text/javascript">
-        $(function(){
-          $("#dropdown").kendoDropDownList({
-            optionLabel: "--Select--",
-            dataTextField: "t",
-            dataValueField: "v",
-            dataSource: [
-              {v: 1, t: "Apples"},
-              {v: 2, t: "Bananas"},
-              {v: 3, t: "Pears"},
-              {v: 4, t: "Watermelon"},
-              {v: 5, t: "Grapes"},
-              {v: 6, t: "Strawberries"}
-            ]
-          })
-        })
-      </script>
-    </div>
-  </body>
-</html>
diff --git a/packages/driver/cypress/fixtures/fixed-nav.html b/packages/driver/cypress/fixtures/fixed-nav.html
deleted file mode 100644
index 9c031b95256b..000000000000
--- a/packages/driver/cypress/fixtures/fixed-nav.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>DOM Fixture</title>
-    <script type="text/javascript" src="/node_modules/sinon/dist/sinon.js"></script>
-    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
-    <script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
-  </head>
-  <body>
-    <div id="clicks">
-      <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
-      <style>
-        body {
-          padding-top: 70px;
-        }
-        #clicks {
-          min-height: 2000px;
-        }
-      </style>
-      <nav class="navbar navbar-default navbar-fixed-top">
-        <div class="container-fluid">
-          <div class="navbar-header">
-            <a class="navbar-brand" href="#">Brand</a>
-          </div>
-        </div>
-      </nav>
-      <div class="container">
-        <button class="btn btn-primary">click me</button>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/driver/cypress/fixtures/primary-origin.html b/packages/driver/cypress/fixtures/primary-origin.html
new file mode 100644
index 000000000000..a557afae2273
--- /dev/null
+++ b/packages/driver/cypress/fixtures/primary-origin.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <style>
+    a {
+      display: block;
+    }
+  </style>
+  <div>
+    Go to different origin:
+    <a data-cy="cross-origin-secondary-link"
+        href="http://www.foobar.com:3500/fixtures/secondary-origin.html">http://www.foobar.com:3500/fixtures/secondary-origin.html</a>
+    <a data-cy="dom-link" href="http://www.foobar.com:3500/fixtures/dom.html">http://www.foobar.com:3500/fixtures/dom.html</a>
+    <a data-cy="scrolling-link" href="http://www.foobar.com:3500/fixtures/scrolling.html">http://www.foobar.com:3500/fixtures/scrolling.html</a>
+    <a data-cy="request-link" href="http://www.foobar.com:3500/fixtures/request.html">http://www.foobar.com:3500/fixtures/request.html</a>
+    <a data-cy="shadow-dom-link" href="http://www.foobar.com:3500/fixtures/shadow-dom.html">http://www.foobar.com:3500/fixtures/shadow-dom.html</a>
+    <a data-cy="files-form-link" href="http://www.foobar.com:3500/fixtures/files-form.html">http://www.foobar.com:3500/fixtures/files-form.html</a>
+    <a data-cy="errors-link" href="http://www.foobar.com:3500/fixtures/errors.html">http://www.foobar.com:3500/fixtures/errors.html</a>
+    <a data-cy="screenshots-link" href="http://www.foobar.com:3500/fixtures/screenshots.html">http://www.foobar.com:3500/fixtures/screenshots.html</a>
+    <a data-cy="cookie-login" href="http://www.foobar.com:3500/fixtures/auth/cookie-login.html?redirect=http://localhost:3500/login">Login with Social</a>
+    <a data-cy="welcome" href="http://localhost:3500/welcome">Go to Welcome</a>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/secondary-origin.html b/packages/driver/cypress/fixtures/secondary-origin.html
new file mode 100644
index 000000000000..8ea020398034
--- /dev/null
+++ b/packages/driver/cypress/fixtures/secondary-origin.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <p data-cy="dom-check">From a secondary origin</p>
+  <p data-cy="cypress-check"></p>
+  <p data-cy="window-before-load"></p>
+  <form>
+    <button type="submit">Submit</button>
+  </form>
+  <button data-cy="alert">Alert</button>
+  <button data-cy="confirm">Confirm</button>
+  <button data-cy="reload">reload</button>
+  <a data-cy="hashChange" href='#hashChange'>hashChange</a>
+  <a data-cy="cross-origin-page"
+        href="/fixtures/primary-origin.html">/fixtures/primary-origin.html</a>
+
+  <script>
+    if (window.Cypress) {
+      document.querySelector('[data-cy="cypress-check"]').innerText = 'Has window.Cypress'
+    }
+
+    if (window.testSecondaryWindowBeforeLoad){
+      document.querySelector('[data-cy="window-before-load"]').innerText = 'Window Before Load Called'
+    }
+
+    document.querySelector('[data-cy="alert"]').addEventListener('click', () => {
+      window.alert('the alert text')
+    })
+
+    document.querySelector('[data-cy="confirm"]').addEventListener('click', () => {
+      window.confirm('the confirm text')
+    })
+
+    document.querySelector('[data-cy="reload"]').addEventListener('click', () => {
+      window.location.reload()
+    })
+  </script>
+</body>
+</html>
diff --git a/packages/driver/cypress/plugins/server.js b/packages/driver/cypress/plugins/server.js
index 534a3a7f277f..fbdf268b1800 100644
--- a/packages/driver/cypress/plugins/server.js
+++ b/packages/driver/cypress/plugins/server.js
@@ -10,6 +10,7 @@ const multer = require('multer')
 const upload = multer({ dest: 'cypress/_test-output/' })
 
 const PATH_TO_SERVER_PKG = path.dirname(require.resolve('@packages/server'))
+
 const httpPorts = [3500, 3501]
 const httpsPort = 3502
 
@@ -25,6 +26,7 @@ const createApp = (port) => {
   })
 
   app.use(require('cors')())
+  app.use(require('cookie-parser')())
   app.use(require('compression')())
   app.use(bodyParser.urlencoded({ extended: false }))
   app.use(bodyParser.json())
@@ -35,6 +37,10 @@ const createApp = (port) => {
     return res.sendStatus(200)
   })
 
+  app.get('/', (req, res) => {
+    return res.send('<html><body>root page</body></html>')
+  })
+
   app.get('/timeout', (req, res) => {
     return Promise
     .delay(req.query.ms || 0)
@@ -127,6 +133,7 @@ const createApp = (port) => {
 
     return res
     .set('WWW-Authenticate', 'Basic')
+    .type('html')
     .sendStatus(401)
   })
 
@@ -188,6 +195,69 @@ const createApp = (port) => {
     .send('<html><body>server error</body></html>')
   })
 
+  const getCookieAdditions = ({ sameSite, secure }) => {
+    let additions = ''
+
+    if (sameSite) additions += `; SameSite=${sameSite}`
+
+    if (secure) additions += '; Secure'
+
+    return additions
+  }
+
+  app.get('/cookie-login', (req, res) => {
+    const { username, redirect } = req.query
+
+    res
+    .header('Set-Cookie', `user=${username}${getCookieAdditions(req.query)}`)
+    .redirect(302, `/verify-cookie-login?username=${username}&redirect=${redirect}`)
+  })
+
+  app.get('/verify-cookie-login', (req, res) => {
+    if (!req.cookies.user) {
+      return res
+      .status(403)
+      .send('<html><body><h1>Not logged in</h1></body></html>')
+    }
+
+    const { username, redirect } = req.query
+
+    res.send(`
+      <html>
+        <body>
+          <h1>Redirecting ${username}...</h1>
+          <script>
+            setTimeout(() => {
+              window.location.href = '${redirect}?username=${username}'
+            }, 1000)
+          </script>
+        </body>
+      </html>
+    `)
+  })
+
+  app.get('/login', (req, res) => {
+    const { username } = req.query
+
+    if (!username) {
+      return res.send('<html><body><h1>Must specify username to log in</h1></body></html>')
+    }
+
+    // can't use res.cookie() because it won't allow setting an invalid
+    // SameSite value, which we want to test
+    res
+    .header('Set-Cookie', `user=${username}${getCookieAdditions(req.query)}`)
+    .redirect(302, '/welcome')
+  })
+
+  app.get('/welcome', (req, res) => {
+    if (!req.cookies.user) {
+      return res.send('<html><body><h1>No user found</h1></body></html>')
+    }
+
+    res.send(`<html><body><h1>Welcome, ${req.cookies.user}!</h1></body></html>`)
+  })
+
   let _var = ''
 
   app.get('/set-var', (req, res) => {
diff --git a/packages/driver/cypress/support/utils.js b/packages/driver/cypress/support/utils.js
index 4a8e0cf03bee..23532721ccb4 100644
--- a/packages/driver/cypress/support/utils.js
+++ b/packages/driver/cypress/support/utils.js
@@ -71,6 +71,20 @@ export const assertLogLength = (logs, expectedLength) => {
   expect(logs.length).to.eq(expectedLength, `received ${logs.length} logs when we expected ${expectedLength}: [${receivedLogs}]`)
 }
 
+export const findCrossOriginLogs = (consolePropCommand, logMap, matchingOrigin) => {
+  const matchedLogs = Array.from(logMap.values()).filter((log) => {
+    const props = log.get()
+
+    let consoleProps = _.isFunction(props?.consoleProps) ? props.consoleProps() : props?.consoleProps
+
+    return consoleProps.Command === consolePropCommand && props.id.includes(matchingOrigin)
+  })
+
+  const logAttrs = matchedLogs.map((log) => log.get())
+
+  return logAttrs.length === 1 ? logAttrs[0] : logAttrs
+}
+
 export const attachListeners = (listenerArr) => {
   return (els) => {
     _.each(els, (el, elName) => {
@@ -93,6 +107,13 @@ const getAllFn = (...aliases) => {
   )
 }
 
+// FIXME: currently increasing the timeout here from 250ms to 3 second
+// due to some unknown performance issues with logs coming back in from the primary in the 10.0-release branch.
+// this timeout should be reduced in the future once these performance issues are addressed.
+const shouldWithTimeout = (cb, timeout = 3000) => {
+  cy.wrap({}, { timeout }).should(cb)
+}
+
 export const keyEvents = [
   'keydown',
   'keyup',
@@ -119,6 +140,8 @@ export const expectCaret = (start, end) => {
 
 Cypress.Commands.add('getAll', getAllFn)
 
+Cypress.Commands.add('shouldWithTimeout', shouldWithTimeout)
+
 const chaiSubset = require('chai-subset')
 
 chai.use(chaiSubset)
diff --git a/packages/driver/package.json b/packages/driver/package.json
index 772e1609ec3b..d8b815b73e7e 100644
--- a/packages/driver/package.json
+++ b/packages/driver/package.json
@@ -5,25 +5,26 @@
   "scripts": {
     "clean-deps": "rimraf node_modules",
     "cypress:open": "node ../../scripts/cypress open",
-    "cypress:run": "node ../../scripts/cypress run",
+    "cypress:run": "node ../../scripts/cypress run --spec \"cypress/e2e/*/*\",\"cypress/e2e/*/!(origin)/**/*\"",
+    "cypress:open-experimentalSessionAndOrigin": "node ../../scripts/cypress open --config experimentalSessionAndOrigin=true",
+    "cypress:run-experimentalSessionAndOrigin": "node ../../scripts/cypress run --config experimentalSessionAndOrigin=true",
     "postinstall": "patch-package",
     "start": "node -e 'console.log(require(`chalk`).red(`\nError:\n\tRunning \\`yarn start\\` is no longer needed for driver/cypress tests.\n\tWe now automatically spawn the server in e2e.setupNodeEvents config.\n\tChanges to the server will be watched and reloaded automatically.`))'"
   },
   "dependencies": {},
   "devDependencies": {
     "@babel/code-frame": "7.8.3",
-    "@cypress/bower-kendo-ui": "0.0.2",
     "@cypress/sinon-chai": "2.9.1",
     "@cypress/unique-selector": "0.4.4",
     "@cypress/webpack-preprocessor": "0.0.0-development",
     "@cypress/what-is-circular": "1.0.1",
     "@packages/config": "0.0.0-development",
     "@packages/network": "0.0.0-development",
-    "@packages/resolve-dist": "0.0.0-development",
     "@packages/runner": "0.0.0-development",
+    "@packages/runner-shared": "0.0.0-development",
     "@packages/server": "0.0.0-development",
+    "@packages/socket": "0.0.0-development",
     "@packages/ts": "0.0.0-development",
-    "@rollup/plugin-node-resolve": "^13.0.4",
     "@sinonjs/fake-timers": "8.1.0",
     "@types/chalk": "^2.2.0",
     "@types/common-tags": "^1.8.0",
@@ -36,14 +37,13 @@
     "blob-util": "2.0.2",
     "bluebird": "3.5.3",
     "body-parser": "1.19.0",
-    "bootstrap": "4.4.1",
     "bytes": "3.1.0",
     "chai": "4.2.0",
-    "chai-as-promised": "7.1.1",
     "chai-subset": "1.6.0",
-    "chokidar-cli": "2.1.0",
     "clone": "2.1.2",
     "compression": "1.7.4",
+    "cookie-parser": "1.4.5",
+    "core-js-pure": "3.21.0",
     "cors": "2.8.5",
     "cypress-multi-reporters": "1.4.0",
     "dayjs": "^1.10.3",
@@ -56,7 +56,6 @@
     "is-valid-hostname": "1.0.1",
     "jquery": "3.1.1",
     "js-cookie": "2.2.1",
-    "jsdom": "14.1.0",
     "json-stable-stringify": "1.0.1",
     "lodash": "^4.17.21",
     "md5": "2.3.0",
@@ -64,9 +63,7 @@
     "methods": "1.1.2",
     "mime-types": "2.1.27",
     "minimatch": "3.0.4",
-    "minimist": "1.2.6",
     "mocha": "7.0.1",
-    "morgan": "1.9.1",
     "multer": "1.4.2",
     "ordinal": "1.0.3",
     "react-15.6.1": "npm:react@15.6.1",
diff --git a/packages/driver/src/cross-origin/communicator.ts b/packages/driver/src/cross-origin/communicator.ts
new file mode 100644
index 000000000000..0e98df5ee5ef
--- /dev/null
+++ b/packages/driver/src/cross-origin/communicator.ts
@@ -0,0 +1,210 @@
+import debugFn from 'debug'
+import { EventEmitter } from 'events'
+import { preprocessConfig, preprocessEnv } from '../util/config'
+import { preprocessForSerialization, reifySerializedError } from '../util/serialization'
+import { $Location } from '../cypress/location'
+import { preprocessLogForSerialization, reifyLogFromSerialization, preprocessSnapshotForSerialization, reifySnapshotFromSerialization } from '../util/serialization/log'
+
+const debug = debugFn('cypress:driver:multi-origin')
+
+const CROSS_ORIGIN_PREFIX = 'cross:origin:'
+const LOG_EVENTS = [`${CROSS_ORIGIN_PREFIX}log:added`, `${CROSS_ORIGIN_PREFIX}log:changed`]
+const FINAL_SNAPSHOT_EVENT = `${CROSS_ORIGIN_PREFIX}final:snapshot:generated`
+
+/**
+ * Primary Origin communicator. Responsible for sending/receiving events throughout
+ * the driver responsible for multi-origin communication, as well as sending/receiving events to/from the
+ * spec bridge communicator, respectively.
+ *
+ * The 'postMessage' method is used to send events to the spec bridge communicator, while
+ * the 'message' event is used to receive messages from the spec bridge communicator.
+ * All events communicating across origins are prefixed with 'cross:origin:' under the hood.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage for more details.
+ * @extends EventEmitter
+ */
+export class PrimaryOriginCommunicator extends EventEmitter {
+  private crossOriginDriverWindows: {[key: string]: Window} = {}
+  userInvocationStack?: string
+
+  /**
+   * The callback handler that receives messages from secondary origins.
+   * @param {MessageEvent.data} data - a reference to the MessageEvent.data sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
+   * @param {MessageEvent.source} source - a reference to the MessageEvent.source sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/source
+   * @returns {Void}
+   */
+  onMessage ({ data, source }) {
+    // check if message is cross origin and if so, feed the message into
+    // the cross origin bus with args and strip prefix
+    if (data?.event?.startsWith(CROSS_ORIGIN_PREFIX)) {
+      const messageName = data.event.replace(CROSS_ORIGIN_PREFIX, '')
+
+      // NOTE: need a special case here for 'bridge:ready'
+      // where we need to set the crossOriginDriverWindows to source to
+      // communicate back to the iframe
+      if (messageName === 'bridge:ready' && source) {
+        this.crossOriginDriverWindows[data.originPolicy] = source as Window
+      }
+
+      // reify any logs coming back from the cross-origin spec bridges to serialize snapshot/consoleProp DOM elements as well as select functions.
+      if (LOG_EVENTS.includes(data?.event)) {
+        data.data = reifyLogFromSerialization(data.data as any)
+      }
+
+      // reify the final snapshot coming back from the secondary domain if requested by the runner.
+      if (FINAL_SNAPSHOT_EVENT === data?.event) {
+        data.data = reifySnapshotFromSerialization(data.data as any)
+      }
+
+      if (data?.data?.err) {
+        data.data.err = reifySerializedError(data.data.err, this.userInvocationStack as string)
+      }
+
+      this.emit(messageName, data.data, data.originPolicy)
+
+      return
+    }
+
+    debug('Unexpected postMessage:', data)
+  }
+
+  /**
+   * Events to be sent to the spec bridge communicator instance.
+   * @param {string} event - the name of the event to be sent.
+   * @param {any} data - any meta data to be sent with the event.
+   */
+  toAllSpecBridges (event: string, data?: any) {
+    debug('=> to all spec bridges', event, data)
+
+    const preprocessedData = preprocessForSerialization<any>(data)
+
+    // if user defined arguments are passed in, do NOT sanitize them.
+    if (data?.args) {
+      preprocessedData.args = data.args
+    }
+
+    // If there is no crossOriginDriverWindows, there is no need to send the message.
+    Object.values(this.crossOriginDriverWindows).forEach((win: Window) => {
+      win.postMessage({
+        event,
+        data: preprocessedData,
+      }, '*')
+    })
+  }
+
+  toSpecBridge (originPolicy: string, event: string, data?: any) {
+    debug('=> to spec bridge', originPolicy, event, data)
+
+    const preprocessedData = preprocessForSerialization<any>(data)
+
+    // if user defined arguments are passed in, do NOT sanitize them.
+    if (data?.args) {
+      preprocessedData.args = data.args
+    }
+
+    // If there is no crossOriginDriverWindows, there is no need to send the message.
+    this.crossOriginDriverWindows[originPolicy]?.postMessage({
+      event,
+      data: preprocessedData,
+    }, '*')
+  }
+}
+
+/**
+ * Spec bridge communicator. Responsible for sending/receiving events to/from the
+ * primary origin communicator, respectively.
+ *
+ * The 'postMessage' method is used to send events to the primary communicator, while
+ * the 'message' event is used to receive messages from the primary communicator.
+ * All events communicating across origins are prefixed with 'cross:origin:' under the hood.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage for more details.
+ * @extends EventEmitter
+ */
+export class SpecBridgeCommunicator extends EventEmitter {
+  private handleSubjectAndErr = (data: Cypress.ObjectLike = {}, send: (data: Cypress.ObjectLike) => void) => {
+    let { subject, err, ...rest } = data
+
+    // check to see if the 'err' key is defined, and if it is, we have an error of any type
+    const hasError = !!Object.getOwnPropertyDescriptor(data, 'err')
+
+    if (!subject && !hasError) {
+      return send(rest)
+    }
+
+    try {
+      if (hasError) {
+        try {
+          // give the `err` truthiness if it's a falsey value like undefined/null/false
+          if (!err) {
+            err = new Error(`${err}`)
+          }
+
+          err = preprocessForSerialization(err)
+        } catch (e) {
+          err = e
+        }
+      }
+
+      // We always want to make sure errors are posted, so clean it up to send.
+      send({ ...rest, subject, err })
+    } catch (err: any) {
+      if (subject && err.name === 'DataCloneError') {
+        // Send the type of object that failed to serialize.
+        // If the subject threw the 'DataCloneError', the subject cannot be
+        // serialized, at which point try again with an undefined subject.
+        return this.handleSubjectAndErr({ ...rest, unserializableSubjectType: typeof subject }, send)
+      }
+
+      // Try to send the message again, with the new error.
+      this.handleSubjectAndErr({ ...rest, err }, send)
+    }
+  }
+
+  private syncGlobalsToPrimary = () => {
+    this.toPrimary('sync:globals', {
+      config: preprocessConfig(Cypress.config()),
+      env: preprocessEnv(Cypress.env()),
+    })
+  }
+
+  /**
+   * The callback handler that receives messages from the primary origin.
+   * @param {MessageEvent.data} data - a reference to the MessageEvent.data sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
+   * @returns {Void}
+   */
+  onMessage ({ data }) {
+    if (!data) return
+
+    this.emit(data.event, data.data)
+  }
+
+  /**
+   * Events to be sent to the primary communicator instance.
+   * @param {string} event - the name of the event to be sent.
+   * @param {Cypress.ObjectLike} data - any meta data to be sent with the event.
+   */
+  toPrimary (event: string, data?: Cypress.ObjectLike, options: { syncGlobals: boolean } = { syncGlobals: false }) {
+    const { originPolicy } = $Location.create(window.location.href)
+    const eventName = `${CROSS_ORIGIN_PREFIX}${event}`
+
+    // Preprocess logs before sending through postMessage() to attempt to serialize some DOM nodes and functions.
+    if (LOG_EVENTS.includes(eventName)) {
+      data = preprocessLogForSerialization(data as any)
+    }
+
+    // If requested by the runner, preprocess the final snapshot before sending through postMessage() to attempt to serialize the DOM body of the snapshot.
+    if (FINAL_SNAPSHOT_EVENT === eventName) {
+      data = preprocessSnapshotForSerialization(data as any)
+    }
+
+    debug('<= to Primary ', event, data, originPolicy)
+    if (options.syncGlobals) this.syncGlobalsToPrimary()
+
+    this.handleSubjectAndErr(data, (data: Cypress.ObjectLike) => {
+      window.top?.postMessage({
+        event: eventName,
+        data,
+        originPolicy,
+      }, '*')
+    })
+  }
+}
diff --git a/packages/driver/src/cross-origin/cypress.ts b/packages/driver/src/cross-origin/cypress.ts
new file mode 100644
index 000000000000..5a8d8cfb9425
--- /dev/null
+++ b/packages/driver/src/cross-origin/cypress.ts
@@ -0,0 +1,191 @@
+import 'setimmediate'
+
+import '../config/bluebird'
+import '../config/jquery'
+import '../config/lodash'
+
+import $Cypress from '../cypress'
+import { $Cy } from '../cypress/cy'
+import { $Location } from '../cypress/location'
+import $Commands from '../cypress/commands'
+import { create as createLog } from '../cypress/log'
+import { bindToListeners } from '../cy/listeners'
+import { handleOriginFn } from './domain_fn'
+import { FINAL_SNAPSHOT_NAME } from '../cy/snapshots'
+import { handleLogs } from './events/logs'
+import { handleSocketEvents } from './events/socket'
+import { handleSpecWindowEvents } from './events/spec_window'
+import { handleErrorEvent } from './events/errors'
+import { handleScreenshots } from './events/screenshots'
+import { handleTestEvents } from './events/test'
+import { handleMiscEvents } from './events/misc'
+import { handleUnsupportedAPIs } from './unsupported_apis'
+import $Mocha from '../cypress/mocha'
+import * as cors from '@packages/network/lib/cors'
+
+const createCypress = () => {
+  // @ts-ignore
+  const Cypress = window.Cypress = new $Cypress() as Cypress.Cypress
+
+  Cypress.specBridgeCommunicator.once('initialize:cypress', ({ config, env }) => {
+    // eventually, setup will get called again on rerun and cy will get re-created
+    setup(config, env)
+  })
+
+  Cypress.specBridgeCommunicator.on('generate:final:snapshot', (snapshotUrl: string) => {
+    const currentAutOriginPolicy = cy.state('autOrigin')
+    const requestedSnapshotUrlLocation = $Location.create(snapshotUrl)
+
+    if (requestedSnapshotUrlLocation.originPolicy === currentAutOriginPolicy) {
+      // if true, this is the correct specbridge to take the snapshot and send it back
+      const finalSnapshot = cy.createSnapshot(FINAL_SNAPSHOT_NAME)
+
+      Cypress.specBridgeCommunicator.toPrimary('final:snapshot:generated', finalSnapshot)
+    }
+  })
+
+  Cypress.specBridgeCommunicator.toPrimary('bridge:ready')
+}
+
+const setup = (cypressConfig: Cypress.Config, env: Cypress.ObjectLike) => {
+  const Cypress = window.Cypress
+
+  Cypress.configure({
+    ...cypressConfig,
+    env,
+    // never turn on video for a spec bridge when syncing the config. This is handled in the primary.
+    video: false,
+    isCrossOriginSpecBridge: true,
+    // cross origin spec bridges cannot be used in component testing and is only valid for e2e.
+    // This value is not synced with the config because it is omitted on big Cypress creation, as well as a few other key properties
+    testingType: 'e2e',
+  })
+
+  // @ts-ignore
+  const cy = window.cy = new $Cy(window, Cypress, Cypress.Cookies, Cypress.state, Cypress.config, false)
+
+  // @ts-ignore
+  Cypress.log = createLog(Cypress, cy, Cypress.state, Cypress.config)
+
+  Cypress.mocha = $Mocha.create(window, Cypress, Cypress.config)
+
+  // @ts-ignore
+  Cypress.runner = {
+    addLog () {},
+  }
+
+  // @ts-ignore
+  Cypress.cy = cy
+  // @ts-ignore
+  Cypress.events.proxyTo(Cypress.cy)
+
+  const { state, config } = Cypress
+
+  // @ts-ignore
+  Cypress.Commands = $Commands.create(Cypress, cy, state, config)
+  // @ts-ignore
+  Cypress.isCy = cy.isCy
+
+  handleOriginFn(Cypress, cy)
+  handleLogs(Cypress)
+  handleSocketEvents(Cypress)
+  handleSpecWindowEvents(cy)
+  handleMiscEvents(Cypress, cy)
+  handleScreenshots(Cypress)
+  handleTestEvents(Cypress)
+  handleUnsupportedAPIs(Cypress, cy)
+
+  cy.onBeforeAppWindowLoad = onBeforeAppWindowLoad(Cypress, cy)
+}
+
+// eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces
+const onBeforeAppWindowLoad = (Cypress: Cypress.Cypress, cy: $Cy) => (autWindow: Window) => {
+  autWindow.Cypress = Cypress
+
+  Cypress.state('window', autWindow)
+  Cypress.state('document', autWindow.document)
+
+  // 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\')')
+
+  cy.overrides.wrapNativeMethods(autWindow)
+
+  const onWindowLoadPrimary = ({ url }) => {
+    cy.isStable(true, 'primary onload')
+
+    cy.state('autOrigin', cors.getOriginPolicy(url))
+    Cypress.emit('internal:window:load', { type: 'cross:origin', url })
+  }
+
+  // TODO: DRY this up with the mostly-the-same code in src/cypress/cy.js
+  // https://github.com/cypress-io/cypress/issues/20972
+  bindToListeners(autWindow, {
+    onError: handleErrorEvent(cy, 'app'),
+    onHistoryNav () {},
+    onSubmit (e) {
+      return Cypress.action('app:form:submitted', e)
+    },
+    onBeforeUnload (e) {
+      cy.isStable(false, 'beforeunload')
+
+      cy.Cookies.setInitial()
+
+      cy.resetTimer()
+
+      Cypress.action('app:window:before:unload', e)
+
+      Cypress.specBridgeCommunicator.toPrimary('before:unload')
+
+      // return undefined so our beforeunload handler
+      // doesn't trigger a confirmation dialog
+      return undefined
+    },
+    onLoad () {
+      // This is typically called by the cy function `urlNavigationEvent` but it is private. For the primary origin this is called on 'load'.
+      Cypress.action('app:navigation:changed', 'page navigation event (\'load\')')
+      // This is also call on the on 'load' event in cy
+      Cypress.action('app:window:load', autWindow)
+
+      const remoteLocation = cy.getRemoteLocation()
+
+      cy.state('autOrigin', remoteLocation.originPolicy)
+
+      Cypress.specBridgeCommunicator.toPrimary('window:load', { url: remoteLocation.href })
+      cy.isStable(true, 'load')
+
+      // If load happened in this spec bridge stop listening.
+      Cypress.specBridgeCommunicator.off('window:load', onWindowLoadPrimary)
+    },
+    onUnload (e) {
+      cy.state('window', undefined)
+      cy.state('document', undefined)
+      // We only need to listen to this if we've started an unload event and the load happens in another spec bridge.
+      Cypress.specBridgeCommunicator.once('window:load', onWindowLoadPrimary)
+
+      return Cypress.action('app:window:unload', e)
+    },
+    onNavigation (...args) {
+      return Cypress.action('app:navigation:changed', ...args)
+    },
+    onAlert (str) {
+      return Cypress.action('app:window:alert', str)
+    },
+    onConfirm (str) {
+      const results = Cypress.action('app:window:confirm', str) as any[]
+
+      // return false if ANY results are false
+      const ret = !results.some((result) => result === false)
+
+      Cypress.action('app:window:confirmed', str, ret)
+
+      return ret
+    },
+  })
+}
+
+// only bind the message handler one time when the spec bridge is created
+window.addEventListener('message', ({ data }) => {
+  Cypress?.specBridgeCommunicator.onMessage({ data })
+}, false)
+
+createCypress()
diff --git a/packages/driver/src/cross-origin/domain_fn.ts b/packages/driver/src/cross-origin/domain_fn.ts
new file mode 100644
index 000000000000..fbb4416cb9d0
--- /dev/null
+++ b/packages/driver/src/cross-origin/domain_fn.ts
@@ -0,0 +1,169 @@
+import type { $Cy } from '../cypress/cy'
+import $errUtils from '../cypress/error_utils'
+import $utils from '../cypress/utils'
+import { syncConfigToCurrentOrigin, syncEnvToCurrentOrigin } from '../util/config'
+import type { Runnable, Test } from 'mocha'
+import { LogUtils } from '../cypress/log'
+
+interface RunOriginFnOptions {
+  config: Cypress.Config
+  args: any
+  env: Cypress.ObjectLike
+  fn: string
+  skipConfigValidation: boolean
+  state: {}
+  logCounter: number
+}
+
+interface serializedRunnable {
+  id: string
+  type: string
+  title: string
+  parent: serializedRunnable
+  ctx: {}
+  _timeout: number
+  titlePath: string
+}
+
+const rehydrateRunnable = (data: serializedRunnable): Runnable|Test => {
+  let runnable
+
+  if (data.type === 'test') {
+    runnable = Cypress.mocha.createTest(data.title, () => {})
+  } else {
+    runnable = new Cypress.mocha._mocha.Mocha.Runnable(data.title)
+    runnable.type = data.type
+  }
+
+  runnable.ctx = data.ctx
+  runnable.id = data.id
+  runnable._timeout = data._timeout
+  // Short circuit title path to avoid implementing it up the parent chain.
+  runnable.titlePath = () => {
+    return data.titlePath
+  }
+
+  if (data.parent) {
+    runnable.parent = rehydrateRunnable(data.parent)
+  }
+
+  // This is normally setup in the run command, but we don't call run.
+  // Any errors this would be reporting will already have been reported previously
+  runnable.callback = () => {}
+
+  return runnable
+}
+
+export const handleOriginFn = (Cypress: Cypress.Cypress, cy: $Cy) => {
+  const reset = (state) => {
+    cy.reset({})
+
+    const stateUpdates = {
+      ...state,
+      redirectionCount: {}, // This is fine to set to an empty object, we want to refresh this count on each cy.origin command.
+    }
+
+    // Setup the runnable
+    stateUpdates.runnable = rehydrateRunnable(state.runnable)
+
+    // the viewport could've changed in the primary, so sync it up in the secondary
+    Cypress.primaryOriginCommunicator.emit('sync:viewport', { viewportWidth: state.viewportWidth, viewportHeight: state.viewportHeight })
+
+    // Update the state with the necessary values from the primary origin
+    cy.state(stateUpdates)
+
+    // Set the state ctx to the runnable ctx to ensure they remain in sync
+    cy.state('ctx', cy.state('runnable').ctx)
+  }
+
+  const setRunnableStateToPassed = () => {
+    // HACK: We're telling the runnable that it has passed to avoid a timeout
+    // on the last (empty) command. Normally this would be set inherently by
+    // running runnable.run() the test. Set this to passed regardless of the
+    // state of the test, the runnable isn't responsible for reporting success.
+    cy.state('runnable').state = 'passed'
+  }
+
+  Cypress.specBridgeCommunicator.on('run:origin:fn', async (options: RunOriginFnOptions) => {
+    const { config, args, env, fn, state, skipConfigValidation, logCounter } = options
+
+    let queueFinished = false
+
+    reset(state)
+
+    // Set the counter for log ids
+    LogUtils.setCounter(logCounter)
+
+    // @ts-ignore
+    window.__cySkipValidateConfig = skipConfigValidation || false
+
+    // resync the config/env before running the origin:fn
+    syncConfigToCurrentOrigin(config)
+    syncEnvToCurrentOrigin(env)
+
+    cy.state('onQueueEnd', () => {
+      queueFinished = true
+      setRunnableStateToPassed()
+      Cypress.specBridgeCommunicator.toPrimary('queue:finished', {
+        subject: cy.state('subject'),
+      }, {
+        syncGlobals: true,
+      })
+    })
+
+    cy.state('onFail', (err) => {
+      setRunnableStateToPassed()
+      if (queueFinished) {
+        // If the queue is already finished, send this event instead because
+        // the primary won't be listening for 'queue:finished' anymore
+        Cypress.specBridgeCommunicator.toPrimary('uncaught:error', { err })
+
+        return
+      }
+
+      cy.stop()
+      Cypress.specBridgeCommunicator.toPrimary('queue:finished', { err }, { syncGlobals: true })
+    })
+
+    try {
+      const value = window.eval(`(${fn})`)(args)
+
+      // If we detect a non promise value with commands in queue, throw an error
+      if (value && cy.queue.length > 0 && !value.then) {
+        $errUtils.throwErrByPath('origin.callback_mixes_sync_and_async', {
+          args: { value: $utils.stringify(value) },
+        })
+      } else {
+        const hasCommands = !!cy.queue.length
+
+        // If there are queued commands, their yielded value will be preferred
+        // over the value resolved by a return promise. Don't send the subject
+        // or the primary will think we're done already with a sync-returned
+        // value
+        const subject = hasCommands ? undefined : await value
+
+        Cypress.specBridgeCommunicator.toPrimary('ran:origin:fn', {
+          subject,
+          finished: !hasCommands,
+        }, {
+          // Only sync the globals if there are no commands in queue
+          // (for instance, only assertions exist in the callback)
+          // since it means the callback is finished at this point
+          syncGlobals: !hasCommands,
+        })
+
+        if (!hasCommands) {
+          queueFinished = true
+          setRunnableStateToPassed()
+
+          return
+        }
+      }
+    } catch (err) {
+      setRunnableStateToPassed()
+      Cypress.specBridgeCommunicator.toPrimary('ran:origin:fn', { err }, { syncGlobals: true })
+
+      return
+    }
+  })
+}
diff --git a/packages/driver/src/cross-origin/events/errors.ts b/packages/driver/src/cross-origin/events/errors.ts
new file mode 100644
index 000000000000..a4f638f4e524
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/errors.ts
@@ -0,0 +1,31 @@
+import type { $Cy } from '../../cypress/cy'
+import $errUtils, { ErrorFromProjectRejectionEvent } from '../../cypress/error_utils'
+
+export const handleErrorEvent = (cy: $Cy, frameType: 'spec' | 'app') => {
+  return (handlerType: string) => {
+    return (event) => {
+      const { originalErr, err, promise } = $errUtils.errorFromUncaughtEvent(handlerType, event) as ErrorFromProjectRejectionEvent
+      const handled = cy.onUncaughtException({
+        err,
+        promise,
+        handlerType,
+        frameType,
+      })
+
+      $errUtils.logError(Cypress, handlerType, originalErr, handled)
+
+      if (!handled) {
+        // if unhandled, fail the current command to fail the current test in the primary origin
+        // a current command may not exist if an error occurs in the spec bridge after the test is over
+        const command = cy.state('current')
+        const log = command?.getLastLog()
+
+        if (log) log.error(err)
+      }
+
+      // return undefined so the browser does its default
+      // uncaught exception behavior (logging to console)
+      return undefined
+    }
+  }
+}
diff --git a/packages/driver/src/cross-origin/events/logs.ts b/packages/driver/src/cross-origin/events/logs.ts
new file mode 100644
index 000000000000..c686c5004020
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/logs.ts
@@ -0,0 +1,12 @@
+export const handleLogs = (Cypress: Cypress.Cypress) => {
+  const onLogAdded = (attrs) => {
+    Cypress.specBridgeCommunicator.toPrimary('log:added', attrs)
+  }
+
+  const onLogChanged = (attrs) => {
+    Cypress.specBridgeCommunicator.toPrimary('log:changed', attrs)
+  }
+
+  Cypress.on('log:added', onLogAdded)
+  Cypress.on('log:changed', onLogChanged)
+}
diff --git a/packages/driver/src/cross-origin/events/misc.ts b/packages/driver/src/cross-origin/events/misc.ts
new file mode 100644
index 000000000000..691a80799fba
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/misc.ts
@@ -0,0 +1,26 @@
+import type { $Cy } from '../../cypress/cy'
+
+export const handleMiscEvents = (Cypress: Cypress.Cypress, cy: $Cy) => {
+  Cypress.on('viewport:changed', (viewport, callbackFn) => {
+    Cypress.specBridgeCommunicator.once('viewport:changed:end', () => {
+      callbackFn()
+    })
+
+    Cypress.specBridgeCommunicator.toPrimary('viewport:changed', viewport)
+  })
+
+  Cypress.specBridgeCommunicator.on('sync:state', (state) => {
+    cy.state(state)
+  })
+
+  // Forward url:changed Message to the primary origin to enable changing the url displayed in the AUT
+  // @ts-ignore
+  Cypress.on('url:changed', (url) => {
+    Cypress.specBridgeCommunicator.toPrimary('url:changed', { url })
+  })
+
+  // Listen for any unload events in other origins, if any have unloaded we should also become unstable.
+  Cypress.specBridgeCommunicator.on('before:unload', () => {
+    cy.state('isStable', false)
+  })
+}
diff --git a/packages/driver/src/cross-origin/events/screenshots.ts b/packages/driver/src/cross-origin/events/screenshots.ts
new file mode 100644
index 000000000000..644efda0fbd3
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/screenshots.ts
@@ -0,0 +1,13 @@
+export const handleScreenshots = (Cypress: Cypress.Cypress) => {
+  Cypress.on('before:screenshot', (config, callbackFn) => {
+    Cypress.specBridgeCommunicator.once('before:screenshot:end', () => {
+      callbackFn()
+    })
+
+    Cypress.specBridgeCommunicator.toPrimary('before:screenshot', config)
+  })
+
+  Cypress.on('after:screenshot', (config) => {
+    Cypress.specBridgeCommunicator.toPrimary('after:screenshot', config)
+  })
+}
diff --git a/packages/driver/src/cross-origin/events/socket.ts b/packages/driver/src/cross-origin/events/socket.ts
new file mode 100644
index 000000000000..b0ec83234b0e
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/socket.ts
@@ -0,0 +1,24 @@
+import { client } from '@packages/socket'
+
+export const handleSocketEvents = (Cypress) => {
+  const webSocket = client({
+    path: Cypress.config('socketIoRoute'),
+    transports: ['websocket'],
+  }).connect()
+
+  const onBackendRequest = (...args) => {
+    webSocket.emit('backend:request', ...args)
+  }
+
+  const onAutomationRequest = (...args) => {
+    webSocket.emit('automation:request', ...args)
+  }
+
+  webSocket.on('cross:origin:delaying:html', (request) => {
+    // Until we do nested cy.origin, we just need to know what the request was for error messaging.
+    cy.isAnticipatingCrossOriginResponseFor(request)
+  })
+
+  Cypress.on('backend:request', onBackendRequest)
+  Cypress.on('automation:request', onAutomationRequest)
+}
diff --git a/packages/driver/src/cross-origin/events/spec_window.ts b/packages/driver/src/cross-origin/events/spec_window.ts
new file mode 100644
index 000000000000..61b26a26f64d
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/spec_window.ts
@@ -0,0 +1,17 @@
+import type { $Cy } from '../../cypress/cy'
+import { handleErrorEvent } from './errors'
+
+export const handleSpecWindowEvents = (cy: $Cy) => {
+  const handleWindowErrorEvent = handleErrorEvent(cy, 'spec')('error')
+  const handleWindowUnhandledRejectionEvent = handleErrorEvent(cy, 'spec')('unhandledrejection')
+
+  const handleUnload = () => {
+    window.removeEventListener('unload', handleUnload)
+    window.removeEventListener('error', handleWindowErrorEvent)
+    window.removeEventListener('unhandledrejection', handleWindowUnhandledRejectionEvent)
+  }
+
+  window.addEventListener('unload', handleUnload)
+  window.addEventListener('error', handleWindowErrorEvent)
+  window.addEventListener('unhandledrejection', handleWindowUnhandledRejectionEvent)
+}
diff --git a/packages/driver/src/cross-origin/events/test.ts b/packages/driver/src/cross-origin/events/test.ts
new file mode 100644
index 000000000000..26922646aeca
--- /dev/null
+++ b/packages/driver/src/cross-origin/events/test.ts
@@ -0,0 +1,9 @@
+export const handleTestEvents = (Cypress: Cypress.Cypress) => {
+  Cypress.specBridgeCommunicator.on('test:before:run', (...args) => {
+    Cypress.emit('test:before:run', ...args)
+  })
+
+  Cypress.specBridgeCommunicator.on('test:before:run:async', (...args) => {
+    Cypress.emit('test:before:run:async', ...args)
+  })
+}
diff --git a/packages/driver/src/cross-origin/unsupported_apis.ts b/packages/driver/src/cross-origin/unsupported_apis.ts
new file mode 100644
index 000000000000..9e7722a9956b
--- /dev/null
+++ b/packages/driver/src/cross-origin/unsupported_apis.ts
@@ -0,0 +1,37 @@
+import type { $Cy } from '../cypress/cy'
+import $errUtils from '../cypress/error_utils'
+
+export const handleUnsupportedAPIs = (Cypress: Cypress.Cypress, cy: $Cy) => {
+  // The following commands/methods are not supported within the `origin`
+  // callback since they are deprecated
+  // @ts-ignore
+  cy.route = () => $errUtils.throwErrByPath('origin.unsupported.route')
+  // @ts-ignore
+  cy.server = () => $errUtils.throwErrByPath('origin.unsupported.server')
+  Cypress.Server = new Proxy(Cypress.Server, {
+    get: () => $errUtils.throwErrByPath('origin.unsupported.Server'),
+    // @ts-ignore
+    set: () => $errUtils.throwErrByPath('origin.unsupported.Server'),
+  })
+
+  // @ts-ignore
+  Cypress.Cookies.preserveOnce = () => $errUtils.throwErrByPath('origin.unsupported.Cookies_preserveOnce')
+
+  // Nested `origin` is not currently supported, but will be in the future
+  // @ts-ignore
+  cy.origin = () => $errUtils.throwErrByPath('origin.unsupported.origin')
+
+  // `intercept` and `session` are not supported within the `origin`
+  // callback, but can be used outside of it for the same effect. It's unlikely
+  // they will ever be supported unless we discover uses-cases that require it
+  // @ts-ignore
+  cy.intercept = () => $errUtils.throwErrByPath('origin.unsupported.intercept')
+  // @ts-ignore
+  cy.session = () => $errUtils.throwErrByPath('origin.unsupported.session')
+  // @ts-ignore
+  Cypress.session = new Proxy(Cypress.session, {
+    get: () => $errUtils.throwErrByPath('origin.unsupported.Cypress_session'),
+    // @ts-ignore
+    set: () => $errUtils.throwErrByPath('origin.unsupported.Cypress_session'),
+  })
+}
diff --git a/packages/driver/src/cy/chai.ts b/packages/driver/src/cy/chai.ts
index 57bf42c49a6c..49fdd466e851 100644
--- a/packages/driver/src/cy/chai.ts
+++ b/packages/driver/src/cy/chai.ts
@@ -8,6 +8,7 @@ import sinonChai from '@cypress/sinon-chai'
 
 import $dom from '../dom'
 import $utils from '../cypress/utils'
+import { escapeBackslashes, escapeQuotes } from '../util/escape'
 import $errUtils from '../cypress/error_utils'
 import $stackUtils from '../cypress/stack_utils'
 import $chaiJquery from '../cypress/chai_jquery'
@@ -29,6 +30,8 @@ const trailingWhitespaces = /\s*'\*\*/g
 const whitespace = /\s/g
 const valueHasLeadingOrTrailingWhitespaces = /\*\*'\s+|\s+'\*\*/g
 const imageMarkdown = /!\[.*?\]\(.*?\)/g
+const doubleslashRe = /\\\\/g
+const escapedDoubleslashRe = /__double_slash__/g
 
 type CreateFunc = ((specWindow, state, assertFn) => ({
   chai: Chai.ChaiStatic
@@ -103,6 +106,9 @@ chai.use((chai, u) => {
     return
   })
 
+  const escapeDoubleSlash = (str: string) => str.replace(doubleslashRe, '__double_slash__')
+  const restoreDoubleSlash = (str: string) => str.replace(escapedDoubleslashRe, '\\\\')
+
   // remove any single quotes between our **,
   // except escaped quotes, empty strings and number strings.
   const removeOrKeepSingleQuotesBetweenStars = (message) => {
@@ -277,7 +283,9 @@ chai.use((chai, u) => {
           return _super.apply(this, arguments)
         }
 
-        const escText = $utils.escapeQuotes(text)
+        const escText = escapeQuotes(
+          escapeBackslashes(text),
+        )
 
         const selector = `:contains('${escText}'), [type='submit'][value~='${escText}']`
 
@@ -457,7 +465,9 @@ chai.use((chai, u) => {
       let message = chaiUtils.getMessage(this, customArgs as Chai.AssertionArgs)
       const actual = chaiUtils.getActual(this, customArgs as Chai.AssertionArgs)
 
+      message = escapeDoubleSlash(message)
       message = removeOrKeepSingleQuotesBetweenStars(message)
+      message = restoreDoubleSlash(message)
       message = escapeMarkdown(message)
 
       try {
diff --git a/packages/driver/src/cy/commands/actions/focus.ts b/packages/driver/src/cy/commands/actions/focus.ts
index 5f5bc457a762..e866def4c133 100644
--- a/packages/driver/src/cy/commands/actions/focus.ts
+++ b/packages/driver/src/cy/commands/actions/focus.ts
@@ -4,16 +4,29 @@ import $dom from '../../../dom'
 import $utils from '../../../cypress/utils'
 import $errUtils from '../../../cypress/error_utils'
 import $elements from '../../../dom/elements'
+import type { Log } from '../../../cypress/log'
+
+interface InternalFocusOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  $el: JQuery
+  error: boolean
+  verify: boolean
+}
+
+interface InternalBlurOptions extends Partial<Cypress.BlurOptions> {
+  _log?: Log
+  $el: JQuery
+  $focused: JQuery
+  error: boolean
+  verify: boolean
+}
 
 export default (Commands, Cypress, cy) => {
   return Commands.addAll({ prevSubject: ['element', 'window'] }, {
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    focus (subject, options: any = {}) {
-      const userOptions = options
-
+    focus (subject, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
       // we should throw errors by default!
       // but allow them to be silenced
-      options = _.defaults({}, userOptions, {
+      const options: InternalFocusOptions = _.defaults({}, userOptions, {
         $el: subject,
         error: true,
         log: true,
@@ -85,13 +98,10 @@ export default (Commands, Cypress, cy) => {
       return verifyAssertions()
     },
 
-    // TODO: any -> Partial<Cypress.BlurOptions>
-    blur (subject, options: any = {}) {
-      const userOptions = options
-
+    blur (subject, userOptions: Partial<Cypress.BlurOptions> = {}) {
       // we should throw errors by default!
       // but allow them to be silenced
-      options = _.defaults({}, userOptions, {
+      const options: InternalBlurOptions = _.defaults({}, userOptions, {
         $el: subject,
         $focused: cy.getFocused(),
         error: true,
diff --git a/packages/driver/src/cy/commands/actions/scroll.ts b/packages/driver/src/cy/commands/actions/scroll.ts
index 48077d99b2eb..f918f0f459a4 100644
--- a/packages/driver/src/cy/commands/actions/scroll.ts
+++ b/packages/driver/src/cy/commands/actions/scroll.ts
@@ -5,6 +5,7 @@ import Promise from 'bluebird'
 import $dom from '../../../dom'
 import $utils from '../../../cypress/utils'
 import $errUtils from '../../../cypress/error_utils'
+import type { Log } from '../../../cypress/log'
 
 const findScrollableParent = ($el, win) => {
   const $parent = $dom.getParent($el)
@@ -28,12 +29,26 @@ const isNaNOrInfinity = (item) => {
   return _.isNaN(num) || !_.isFinite(num)
 }
 
+interface InternalScrollIntoViewOptions extends Partial<Cypress.ScrollToOptions> {
+  _log?: Log
+  $el: JQuery
+  $parent: any
+  axis: string
+  offset?: object
+}
+
+interface InternalScrollToOptions extends Partial<Cypress.ScrollToOptions> {
+  _log?: Log
+  $el: any
+  x: number
+  y: number
+  error?: any
+  axis: string
+}
+
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({ prevSubject: 'element' }, {
-    // TODO: any -> Partial<Cypress.ScrollToOptions>
-    scrollIntoView (subject, options: any = {}) {
-      const userOptions = options
-
+    scrollIntoView (subject, userOptions: Partial<Cypress.ScrollToOptions> = {}) {
       if (!_.isObject(userOptions)) {
         $errUtils.throwErrByPath('scrollIntoView.invalid_argument', { args: { arg: userOptions } })
       }
@@ -49,7 +64,7 @@ export default (Commands, Cypress, cy, state) => {
         $errUtils.throwErrByPath('scrollIntoView.multiple_elements', { args: { num: subject.length } })
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalScrollIntoViewOptions = _.defaults({}, userOptions, {
         $el: subject,
         $parent: state('window'),
         log: true,
@@ -115,9 +130,6 @@ export default (Commands, Cypress, cy, state) => {
       const scrollIntoView = () => {
         return new Promise((resolve, reject) => {
           // scroll our axes
-          // TODO: done() came from jQuery animate(), specifically, EffectsOptions at misc.d.ts
-          // The type definition should be fixed at @types/jquery.scrollto.
-          // @ts-ignore
           return $(options.$parent).scrollTo(options.$el, {
             axis: options.axis,
             easing: options.easing,
@@ -157,10 +169,8 @@ export default (Commands, Cypress, cy, state) => {
   })
 
   Commands.addAll({ prevSubject: ['optional', 'element', 'window'] }, {
-    // TODO: any -> Partial<Cypress.ScrollToOptions>
-    scrollTo (subject, xOrPosition, yOrOptions, options: any = {}) {
+    scrollTo (subject, xOrPosition, yOrOptions, userOptions: Partial<Cypress.ScrollToOptions> = {}) {
       let x; let y
-      let userOptions = options
 
       // check for undefined or null values
       if (xOrPosition === undefined || xOrPosition === null) {
@@ -261,7 +271,7 @@ export default (Commands, Cypress, cy, state) => {
         $errUtils.throwErrByPath('scrollTo.multiple_containers', { args: { num: $container.length } })
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalScrollToOptions = _.defaults({}, userOptions, {
         $el: $container,
         log: true,
         duration: 0,
@@ -361,10 +371,7 @@ export default (Commands, Cypress, cy, state) => {
 
       const scrollTo = () => {
         return new Promise((resolve, reject) => {
-          // scroll our axis'
-          // TODO: done() came from jQuery animate(), specifically, EffectsOptions at misc.d.ts
-          // The type definition should be fixed at @types/jquery.scrollto.
-          // @ts-ignore
+          // scroll our axis
           $(options.$el).scrollTo({ left: x, top: y }, {
             axis: options.axis,
             easing: options.easing,
diff --git a/packages/driver/src/cy/commands/actions/select.ts b/packages/driver/src/cy/commands/actions/select.ts
index 12b3a28ea7c7..e21e2e31d806 100644
--- a/packages/driver/src/cy/commands/actions/select.ts
+++ b/packages/driver/src/cy/commands/actions/select.ts
@@ -5,13 +5,19 @@ import $dom from '../../../dom'
 import $utils from '../../../cypress/utils'
 import $errUtils from '../../../cypress/error_utils'
 import $elements from '../../../dom/elements'
+import type { Log } from '../../../cypress/log'
 
 const newLineRe = /\n/g
 
+interface InternalSelectOptions extends Partial<Cypress.SelectOptions> {
+  _log?: Log
+  $el: JQuery<HTMLSelectElement>
+  error?: any
+}
+
 export default (Commands, Cypress, cy) => {
   Commands.addAll({ prevSubject: 'element' }, {
-    // TODO: any -> Partial<Cypress.SelectOptions>
-    select (subject, valueOrTextOrIndex, options: any = {}) {
+    select (subject, valueOrTextOrIndex, userOptions: Partial<Cypress.SelectOptions> = {}) {
       if (
         !_.isNumber(valueOrTextOrIndex)
         && !_.isString(valueOrTextOrIndex)
@@ -28,9 +34,7 @@ export default (Commands, Cypress, cy) => {
         $errUtils.throwErrByPath('select.invalid_array_argument', { args: { value: JSON.stringify(valueOrTextOrIndex) } })
       }
 
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+      const options: InternalSelectOptions = _.defaults({}, userOptions, {
         $el: subject,
         log: true,
         force: false,
@@ -55,7 +59,7 @@ export default (Commands, Cypress, cy) => {
           },
         })
 
-        options._log.snapshot('before', { next: 'after' })
+        options._log!.snapshot('before', { next: 'after' })
       }
 
       let node
diff --git a/packages/driver/src/cy/commands/actions/submit.ts b/packages/driver/src/cy/commands/actions/submit.ts
index cbd61919c931..de2b6e10474a 100644
--- a/packages/driver/src/cy/commands/actions/submit.ts
+++ b/packages/driver/src/cy/commands/actions/submit.ts
@@ -5,14 +5,17 @@ import $dom from '../../../dom'
 import $utils from '../../../cypress/utils'
 import $errUtils from '../../../cypress/error_utils'
 import $actionability from '../../actionability'
+import type { Log } from '../../../cypress/log'
+
+interface InternalSubmitOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable>{
+  _log?: Log
+  $el: JQuery<HTMLFormElement>
+}
 
 export default (Commands, Cypress, cy) => {
   Commands.addAll({ prevSubject: 'element' }, {
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    submit (subject, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    submit (subject: JQuery<HTMLFormElement>, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalSubmitOptions = _.defaults({}, userOptions, {
         log: true,
         $el: subject,
       })
@@ -35,7 +38,7 @@ export default (Commands, Cypress, cy) => {
           },
         })
 
-        options._log.snapshot('before', { next: 'after' })
+        options._log!.snapshot('before', { next: 'after' })
       }
 
       if (!options.$el.is('form')) {
diff --git a/packages/driver/src/cy/commands/actions/type.ts b/packages/driver/src/cy/commands/actions/type.ts
index e131970b38f8..a168ebf88160 100644
--- a/packages/driver/src/cy/commands/actions/type.ts
+++ b/packages/driver/src/cy/commands/actions/type.ts
@@ -8,23 +8,33 @@ import $utils from '../../../cypress/utils'
 import $errUtils from '../../../cypress/error_utils'
 import $actionability from '../../actionability'
 import $Keyboard from '../../../cy/keyboard'
+import type { Log } from '../../../cypress/log'
+
 import debugFn from 'debug'
 const debug = debugFn('cypress:driver:command:type')
 
+interface InternalTypeOptions extends Partial<Cypress.TypeOptions> {
+  _log?: Log
+  $el: JQuery
+  ensure?: object
+  verify: boolean
+  interval?: number
+}
+
+interface InternalClearOptions extends Partial<Cypress.ClearOptions> {
+  _log?: Log
+  ensure?: object
+}
+
 export default function (Commands, Cypress, cy, state, config) {
   const { keyboard } = cy.devices
 
-  // Note: These "change type of `any` to X" comments are written instead of changing them directly
-  //       because Cypress extends user-given options with Cypress internal options.
-  //       These comments will be removed after removing `// @ts-nocheck` comments in `packages/driver`.
-  // TODO: change the type of `any` to `Partial<Cypress.TypeOptions>`
-  function type (subject, chars, options: any = {}) {
-    const userOptions = options
+  function type (subject, chars, userOptions: Partial<Cypress.TypeOptions> = {}) {
     let updateTable
 
     // allow the el we're typing into to be
     // changed by options -- used by cy.clear()
-    options = _.defaults({}, userOptions, {
+    const options: InternalTypeOptions = _.defaults({}, userOptions, {
       $el: subject,
       log: true,
       verify: true,
@@ -110,7 +120,7 @@ export default function (Commands, Cypress, cy, state, config) {
         },
       })
 
-      options._log.snapshot('before', { next: 'after' })
+      options._log!.snapshot('before', { next: 'after' })
     }
 
     if (options.$el.length > 1) {
@@ -572,11 +582,8 @@ export default function (Commands, Cypress, cy, state, config) {
     })
   }
 
-  // TODO: change the type of `any` to `Partial<ClearOptions>`
-  function clear (subject, options: any = {}) {
-    const userOptions = options
-
-    options = _.defaults({}, userOptions, {
+  function clear (subject, userOptions: Partial<Cypress.ClearOptions> = {}) {
+    const options: InternalClearOptions = _.defaults({}, userOptions, {
       log: true,
       force: false,
       waitForAnimations: config('waitForAnimations'),
diff --git a/packages/driver/src/cy/commands/angular.ts b/packages/driver/src/cy/commands/angular.ts
index 48661b05d8a2..f6b4bf374979 100644
--- a/packages/driver/src/cy/commands/angular.ts
+++ b/packages/driver/src/cy/commands/angular.ts
@@ -3,9 +3,14 @@ import $ from 'jquery'
 import Promise from 'bluebird'
 
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
 
 const ngPrefixes = ['ng-', 'ng_', 'data-ng-', 'x-ng-']
 
+interface InternalNgOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+}
+
 export default (Commands, Cypress, cy, state) => {
   const findByNgBinding = (binding, options) => {
     const selector = '.ng-binding'
@@ -89,10 +94,7 @@ export default (Commands, Cypress, cy, state) => {
   }
 
   Commands.addAll({
-    // TODO: Change the options type from `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`.
-    ng (type, selector, options: any = {}) {
-      const userOptions = options
-
+    ng (type: string, selector: string, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
       // what about requirejs / browserify?
       // we need to intelligently check to see if we're using those
       // and if angular is available through them.  throw a very specific
@@ -102,7 +104,7 @@ export default (Commands, Cypress, cy, state) => {
         $errUtils.throwErrByPath('ng.no_global')
       }
 
-      options = _.defaults({}, userOptions, { log: true })
+      const options: InternalNgOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
         options._log = Cypress.log({
diff --git a/packages/driver/src/cy/commands/clock.ts b/packages/driver/src/cy/commands/clock.ts
index aa202fbeff46..6ac0a36bb5a1 100644
--- a/packages/driver/src/cy/commands/clock.ts
+++ b/packages/driver/src/cy/commands/clock.ts
@@ -42,8 +42,7 @@ export default function (Commands, Cypress, cy, state) {
   })
 
   return Commands.addAll({ type: 'utility' }, {
-    // TODO: change the options type from `any` to Partial<Loggable>.
-    clock (subject, now, methods, options: any = {}) {
+    clock (subject, now, methods, options: Partial<Cypress.Loggable> = {}) {
       let userOptions = options
       const ctx = state('ctx')
 
diff --git a/packages/driver/src/cy/commands/cookies.ts b/packages/driver/src/cy/commands/cookies.ts
index 9002763dc0db..176a8e359c45 100644
--- a/packages/driver/src/cy/commands/cookies.ts
+++ b/packages/driver/src/cy/commands/cookies.ts
@@ -3,6 +3,7 @@ import Promise from 'bluebird'
 
 import $utils from '../../cypress/utils'
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
 import { $Location } from '../../cypress/location'
 
 // TODO: add hostOnly to COOKIE_PROPS
@@ -78,6 +79,30 @@ function cookieValidatesSecurePrefix (options) {
   return options.secure === false
 }
 
+interface InternalGetCookieOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  cookie?: Cypress.Cookie
+}
+
+interface InternalGetCookiesOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  cookies?: Cypress.Cookie[]
+}
+
+interface InternalSetCookieOptions extends Partial<Cypress.SetCookieOptions> {
+  _log?: Log
+  name: string
+  cookie?: Cypress.Cookie
+}
+
+type InternalClearCookieOptions = InternalGetCookieOptions
+
+interface InternalClearCookiesOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  cookies?: Cypress.Cookie[]
+  domain?: any
+}
+
 export default function (Commands, Cypress, cy, state, config) {
   const automateCookies = function (event, obj = {}, log, timeout) {
     const automate = () => {
@@ -158,17 +183,14 @@ export default function (Commands, Cypress, cy, state, config) {
   // stuff, or handling this in the runner itself?
   // Cypress sessions will clear cookies on its own before each test
   Cypress.on('test:before:run:async', () => {
-    if (!Cypress.config('experimentalSessionSupport')) {
+    if (!Cypress.config('experimentalSessionAndOrigin')) {
       return getAndClear()
     }
   })
 
   return Commands.addAll({
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    getCookie (name, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    getCookie (name, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalGetCookieOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: config('responseTimeout'),
       })
@@ -211,11 +233,8 @@ export default function (Commands, Cypress, cy, state, config) {
       .catch(handleBackendError('getCookie', 'reading the requested cookie from', onFail))
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    getCookies (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    getCookies (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalGetCookiesOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: config('responseTimeout'),
       })
@@ -250,11 +269,8 @@ export default function (Commands, Cypress, cy, state, config) {
       .catch(handleBackendError('getCookies', 'reading cookies from', options._log))
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.SetCookieOptions>`
-    setCookie (name, value, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    setCookie (name, value, userOptions: Partial<Cypress.SetCookieOptions> = {}) {
+      const options: InternalSetCookieOptions = _.defaults({}, userOptions, {
         name,
         value,
         path: '/',
@@ -332,11 +348,8 @@ export default function (Commands, Cypress, cy, state, config) {
       }).catch(handleBackendError('setCookie', 'setting the requested cookie in', onFail))
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    clearCookie (name, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    clearCookie (name, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalClearCookieOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: config('responseTimeout'),
       })
@@ -382,11 +395,8 @@ export default function (Commands, Cypress, cy, state, config) {
       .catch(handleBackendError('clearCookie', 'clearing the requested cookie in', onFail))
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    clearCookies (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    clearCookies (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalClearCookiesOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: config('responseTimeout'),
       })
@@ -396,12 +406,12 @@ export default function (Commands, Cypress, cy, state, config) {
           message: '',
           timeout: options.timeout,
           consoleProps () {
-            let c
+            const c = options.cookies
             const obj = {}
 
             obj['Yielded'] = 'null'
 
-            if ((c = options.cookies) && c.length) {
+            if (c && c.length) {
               obj['Cleared Cookies'] = c
               obj['Num Cookies'] = c.length
             } else {
diff --git a/packages/driver/src/cy/commands/debugging.ts b/packages/driver/src/cy/commands/debugging.ts
index 6318e904b9ef..8ac152cf0604 100644
--- a/packages/driver/src/cy/commands/debugging.ts
+++ b/packages/driver/src/cy/commands/debugging.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 
 import $utils from '../../cypress/utils'
+import type { Log } from '../../cypress/log'
 
 const resume = (state, resumeAll = true) => {
   const onResume = state('onResume')
@@ -32,6 +33,14 @@ const getNextQueuedCommand = (state, queue) => {
   return search(state('index'))
 }
 
+interface InternalPauseOptions extends Partial<Cypress.Loggable> {
+  _log?: Log
+}
+
+interface InternalDebugOptions extends Partial<Cypress.Loggable> {
+  _log?: Log
+}
+
 export default (Commands, Cypress, cy, state, config) => {
   Cypress.on('resume:next', () => {
     return resume(state, false)
@@ -42,18 +51,15 @@ export default (Commands, Cypress, cy, state, config) => {
   })
 
   Commands.addAll({ type: 'utility', prevSubject: 'optional' }, {
-    // TODO: change the options type from `any` to `Loggable`.
     // pause should indefinitely pause until the user
     // presses a key or clicks in the UI to continue
-    pause (subject, options: any = {}) {
+    pause (subject, userOptions: Partial<Cypress.Loggable> = {}) {
       // bail if we're in run mode, unless --headed and --no-exit flags are passed
       if (!config('isInteractive') && (!config('browser').isHeaded || config('exit'))) {
         return subject
       }
 
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+      const options: InternalPauseOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
         options._log = Cypress.log({
@@ -72,8 +78,8 @@ export default (Commands, Cypress, cy, state, config) => {
           // pause on the very next one
             state('onPaused', null)
 
-            if (options.log) {
-              options._log.end()
+            if (options._log) {
+              options._log!.end()
             }
           }
 
@@ -103,11 +109,8 @@ export default (Commands, Cypress, cy, state, config) => {
       return subject
     },
 
-    // TODO: change `any` to Loggable
-    debug (subject, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    debug (subject, userOptions: Partial<Cypress.Loggable> = {}) {
+      const options: InternalDebugOptions = _.defaults({}, userOptions, {
         log: true,
       })
 
diff --git a/packages/driver/src/cy/commands/exec.ts b/packages/driver/src/cy/commands/exec.ts
index d6114590579f..a0131c604ef1 100644
--- a/packages/driver/src/cy/commands/exec.ts
+++ b/packages/driver/src/cy/commands/exec.ts
@@ -2,14 +2,17 @@ import _ from 'lodash'
 import Promise from 'bluebird'
 
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
+
+interface InternalExecOptions extends Partial<Cypress.ExecOptions> {
+  _log?: Log
+  cmd?: string
+}
 
 export default (Commands, Cypress, cy) => {
   Commands.addAll({
-    // TODO: change the type of `any` to `Partical<Cypress.ExecOptions>`
-    exec (cmd, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    exec (cmd: string, userOptions: Partial<Cypress.ExecOptions> = {}) {
+      const options: InternalExecOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: Cypress.config('execTimeout'),
         failOnNonZeroExit: true,
diff --git a/packages/driver/src/cy/commands/files.ts b/packages/driver/src/cy/commands/files.ts
index 473bc7b02d80..02512836a209 100644
--- a/packages/driver/src/cy/commands/files.ts
+++ b/packages/driver/src/cy/commands/files.ts
@@ -2,19 +2,26 @@ import _ from 'lodash'
 import { basename } from 'path'
 
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
+
+interface InternalReadFileOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  encoding: Cypress.Encodings
+}
+
+interface InternalWriteFileOptions extends Partial<Cypress.WriteFileOptions & Cypress.Timeoutable> {
+  _log?: Log
+}
 
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    readFile (file, encoding, options: any = {}) {
-      let userOptions = options
-
+    readFile (file, encoding, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
       if (_.isObject(encoding)) {
         userOptions = encoding
         encoding = undefined
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalReadFileOptions = _.defaults({}, userOptions, {
         // https://github.com/cypress-io/cypress/issues/1558
         // If no encoding is specified, then Cypress has historically defaulted
         // to `utf8`, because of it's focus on text files. This is in contrast to
@@ -109,16 +116,13 @@ export default (Commands, Cypress, cy, state) => {
       return verifyAssertions()
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.WriteFileOPtions & Cypress.Timeoutable>`
-    writeFile (fileName, contents, encoding, options: any = {}) {
-      let userOptions = options
-
+    writeFile (fileName, contents, encoding, userOptions: Partial<Cypress.WriteFileOptions & Cypress.Timeoutable> = {}) {
       if (_.isObject(encoding)) {
         userOptions = encoding
         encoding = undefined
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalWriteFileOptions = _.defaults({}, userOptions, {
         // https://github.com/cypress-io/cypress/issues/1558
         // If no encoding is specified, then Cypress has historically defaulted
         // to `utf8`, because of it's focus on text files. This is in contrast to
diff --git a/packages/driver/src/cy/commands/index.ts b/packages/driver/src/cy/commands/index.ts
index cc49499de962..d9f6ccd1003b 100644
--- a/packages/driver/src/cy/commands/index.ts
+++ b/packages/driver/src/cy/commands/index.ts
@@ -30,6 +30,8 @@ import * as Location from './location'
 
 import * as Misc from './misc'
 
+import * as Origin from './origin'
+
 import * as Popups from './popups'
 
 import * as Navigation from './navigation'
@@ -69,6 +71,7 @@ export const allCommands = {
   LocalStorage,
   Location,
   Misc,
+  Origin,
   Popups,
   Navigation,
   ...Querying,
diff --git a/packages/driver/src/cy/commands/location.ts b/packages/driver/src/cy/commands/location.ts
index 837d39b8a3d3..900d12cabca1 100644
--- a/packages/driver/src/cy/commands/location.ts
+++ b/packages/driver/src/cy/commands/location.ts
@@ -2,15 +2,21 @@ import _ from 'lodash'
 import Promise from 'bluebird'
 
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
 const { throwErrByPath } = $errUtils
 
+interface InternalUrlOptions extends Partial<Cypress.UrlOptions> {
+  _log?: Log
+}
+
+interface InternalHashOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+}
+
 export default (Commands, Cypress, cy) => {
   Commands.addAll({
-    // TODO: change the type of `any` to `Partial<Cypress.UrlOptions>`
-    url (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    url (userOptions: Partial<Cypress.UrlOptions> = {}) {
+      const options: InternalUrlOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log !== false) {
         options._log = Cypress.log({
@@ -38,11 +44,8 @@ export default (Commands, Cypress, cy) => {
       return resolveHref()
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    hash (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    hash (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalHashOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log !== false) {
         options._log = Cypress.log({
diff --git a/packages/driver/src/cy/commands/misc.ts b/packages/driver/src/cy/commands/misc.ts
index 5a0db7a0f094..54d862663cc6 100644
--- a/packages/driver/src/cy/commands/misc.ts
+++ b/packages/driver/src/cy/commands/misc.ts
@@ -4,6 +4,12 @@ import Promise from 'bluebird'
 import $Command from '../../cypress/command'
 import $dom from '../../dom'
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
+
+interface InternalWrapOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  timeout: number
+}
 
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({ prevSubject: 'optional' }, {
@@ -49,11 +55,8 @@ export default (Commands, Cypress, cy, state) => {
       return null
     },
 
-    // TODO: change the type of `any` to `Partial<Cypress.Loggable & Cypress.Timeoutable>`
-    wrap (arg, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    wrap (arg, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalWrapOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: Cypress.config('defaultCommandTimeout'),
       })
@@ -68,7 +71,7 @@ export default (Commands, Cypress, cy, state) => {
         })
 
         if ($dom.isElement(arg)) {
-          options._log.set({ $el: arg })
+          options._log!.set({ $el: arg })
         }
       }
 
diff --git a/packages/driver/src/cy/commands/navigation.ts b/packages/driver/src/cy/commands/navigation.ts
index 97bbb11359e7..1d560bca334e 100644
--- a/packages/driver/src/cy/commands/navigation.ts
+++ b/packages/driver/src/cy/commands/navigation.ts
@@ -5,15 +5,15 @@ import Promise from 'bluebird'
 
 import $utils from '../../cypress/utils'
 import $errUtils from '../../cypress/error_utils'
-import { LogUtils } from '../../cypress/log'
+import { LogUtils, Log } from '../../cypress/log'
 import { bothUrlsMatchAndOneHasHash } from '../navigation'
-import { $Location } from '../../cypress/location'
+import { $Location, LocationObject } from '../../cypress/location'
 
 import debugFn from 'debug'
 const debug = debugFn('cypress:driver:navigation')
 
 let id = null
-let previousDomainVisited: boolean = false
+let previouslyVisitedLocation: LocationObject | undefined
 let hasVisitedAboutBlank: boolean = false
 let currentlyVisitingAboutBlank: boolean = false
 let knownCommandCausedInstability: boolean = false
@@ -30,7 +30,7 @@ const reset = (test: any = {}) => {
 
   // continuously reset this
   // before each test run!
-  previousDomainVisited = false
+  previouslyVisitedLocation = undefined
 
   // make sure we reset that we haven't
   // visited about blank again
@@ -50,27 +50,58 @@ const isValidVisitMethod = (method) => {
 const timedOutWaitingForPageLoad = (ms, log) => {
   debug('timedOutWaitingForPageLoad')
 
-  $errUtils.throwErrByPath('navigation.timed_out', {
+  const anticipatedCrossOriginHref = cy.state('anticipatingCrossOriginResponse')?.href
+
+  // Were we anticipating a cross origin page when we timed out?
+  if (!anticipatedCrossOriginHref) {
+    $errUtils.throwErrByPath('navigation.timed_out', {
+      args: {
+        configFile: Cypress.config('configFile'),
+        ms,
+      },
+      onFail: log,
+    })
+  }
+
+  // We remain in an anticipating state until either a load even happens or a timeout.
+  cy.isAnticipatingCrossOriginResponseFor(undefined)
+
+  // By default origins is just this location.
+  let originPolicies = [$Location.create(location.href).originPolicy]
+
+  const currentCommand = cy.queue.state('current')
+
+  if (currentCommand?.get('name') === 'origin') {
+    // If the current command is a cy.origin command, we should have gotten a request on the origin it expects.
+    originPolicies = [cy.state('latestActiveOriginPolicy')]
+  } else if (Cypress.isCrossOriginSpecBridge && cy.queue.isOnLastCommand()) {
+    // If this is a cross origin spec bridge and we're on the last command, we should have gotten a request on the origin of one of the parents.
+    originPolicies = cy.state('parentOriginPolicies')
+  }
+
+  $errUtils.throwErrByPath('navigation.cross_origin_load_timed_out', {
     args: {
       configFile: Cypress.config('configFile'),
       ms,
+      crossOriginUrl: $Location.create(anticipatedCrossOriginHref),
+      originPolicies,
     },
     onFail: log,
   })
 }
 
-const cannotVisitDifferentOrigin = (origin, previousUrlVisited, remoteUrl, existingUrl, log) => {
+const cannotVisitDifferentOrigin = ({ remote, existing, originalUrl, previouslyVisitedLocation, log, isCrossOriginSpecBridge = false }) => {
   const differences: string[] = []
 
-  if (remoteUrl.protocol !== existingUrl.protocol) {
+  if (remote.protocol !== existing.protocol) {
     differences.push('protocol')
   }
 
-  if (remoteUrl.port !== existingUrl.port) {
+  if (remote.port !== existing.port) {
     differences.push('port')
   }
 
-  if (remoteUrl.superDomain !== existingUrl.superDomain) {
+  if (remote.superDomain !== existing.superDomain) {
     differences.push('superdomain')
   }
 
@@ -78,14 +109,36 @@ const cannotVisitDifferentOrigin = (origin, previousUrlVisited, remoteUrl, exist
     onFail: log,
     args: {
       differences: differences.join(', '),
-      previousUrl: previousUrlVisited,
-      attemptedUrl: origin,
+      previousUrl: previouslyVisitedLocation,
+      attemptedUrl: remote,
+      originalUrl,
+      isCrossOriginSpecBridge,
+      experimentalSessionAndOrigin: Cypress.config('experimentalSessionAndOrigin'),
+    },
+    errProps: {
+      isCrossOrigin: true,
     },
   }
 
   $errUtils.throwErrByPath('visit.cannot_visit_different_origin', errOpts)
 }
 
+const cannotVisitPreviousOrigin = ({ remote, originalUrl, previouslyVisitedLocation, log }) => {
+  const errOpts = {
+    onFail: log,
+    args: {
+      attemptedUrl: remote,
+      previousUrl: previouslyVisitedLocation,
+      originalUrl,
+    },
+    errProps: {
+      isCrossOrigin: true,
+    },
+  }
+
+  $errUtils.throwErrByPath('origin.cannot_visit_previous_origin', errOpts)
+}
+
 const specifyFileByRelativePath = (url, log) => {
   $errUtils.throwErrByPath('visit.specify_file_by_relative_path', {
     onFail: log,
@@ -342,23 +395,75 @@ const stabilityChanged = (Cypress, state, config, stable) => {
 
     debug('waiting for window:load')
 
-    return new Promise((resolve) => {
-      return cy.once('window:load', (e) => {
+    const promise = new Promise((resolve) => {
+      const onWindowLoad = (win) => {
         // this prevents a log occurring when we navigate to about:blank inbetween tests
         if (!state('duringUserTestExecution')) return
 
         cy.state('onPageLoadErr', null)
 
-        if (e.window.location.href === 'about:blank') {
+        if (win.location.href === 'about:blank') {
           // we treat this as a system log since navigating to about:blank must have been caused by Cypress
           options._log.set({ message: '', name: 'Clear Page', type: 'system' }).snapshot().end()
         } else {
           options._log.set('message', '--page loaded--').snapshot().end()
         }
 
-        return resolve()
+        resolve()
+      }
+
+      const onCrossOriginWindowLoad = ({ url }) => {
+        options._log.set('message', '--page loaded--').snapshot().end()
+
+        // Updating the URL state, This is done to display the new url event when we return to the primary origin
+        let urls = state('urls') || []
+        let urlPosition = state('urlPosition')
+
+        if (urlPosition === undefined) {
+          urlPosition = -1
+        }
+
+        urls.push(url)
+        urlPosition = urlPosition + 1
+
+        state('urls', urls)
+        state('url', url)
+        state('urlPosition', urlPosition)
+
+        resolve()
+      }
+
+      const onCrossOriginFailure = (err) => {
+        options._log.set('message', '--page loaded--').snapshot().error(err)
+
+        resolve()
+      }
+
+      const onInternalWindowLoad = (details) => {
+        switch (details.type) {
+          case 'same:origin':
+            return onWindowLoad(details.window)
+          case 'cross:origin':
+            return onCrossOriginWindowLoad(details)
+          case 'cross:origin:failure':
+            return onCrossOriginFailure(details.error)
+          default:
+            throw new Error(`Unexpected internal:window:load type: ${details?.type}`)
+        }
+      }
+
+      cy.once('internal:window:load', onInternalWindowLoad)
+
+      // If this request is still pending after the test run, resolve it, no commands were waiting on its result.
+      cy.once('test:after:run', () => {
+        if (promise.isPending()) {
+          options._log.set('message', '').end()
+          resolve()
+        }
       })
     })
+
+    return promise
   }
 
   const reject = (err) => {
@@ -387,18 +492,25 @@ const stabilityChanged = (Cypress, state, config, stable) => {
   }
 }
 
+// filter the options to only the REQUEST_URL_OPTS options, normalize the timeout
+// value to the responseTimeout, and add the isCrossOriginSpecBridge value.
+//
 // there are really two timeout values - pageLoadTimeout
 // and the underlying responseTimeout. for the purposes
-// of resolving resolving the url, we only care about
+// of resolving the url, we only care about
 // responseTimeout - since pageLoadTimeout is a driver
 // and browser concern. therefore we normalize the options
 // object and send 'responseTimeout' as options.timeout
 // for the backend.
-const normalizeTimeoutOptions = (options) => {
+const normalizeOptions = (options) => {
   return _
   .chain(options)
   .pick(REQUEST_URL_OPTS)
-  .extend({ timeout: options.responseTimeout })
+  .extend({
+    timeout: options.responseTimeout,
+    isCrossOrigin: Cypress.isCrossOriginSpecBridge,
+    hasAlreadyVisitedUrl: options.hasAlreadyVisitedUrl,
+  })
   .value()
 }
 
@@ -410,6 +522,11 @@ type InvalidContentTypeError = Error & {
   invalidContentType: boolean
 }
 
+interface InternalVisitOptions extends Partial<Cypress.VisitOptions> {
+  _log?: Log
+  hasAlreadyVisitedUrl: boolean
+}
+
 export default (Commands, Cypress, cy, state, config) => {
   reset()
 
@@ -449,7 +566,7 @@ export default (Commands, Cypress, cy, state, config) => {
     return Cypress.backend(
       'resolve:url',
       url,
-      normalizeTimeoutOptions(options),
+      normalizeOptions(options),
     )
     .then((resp: any = {}) => {
       if (!resp.isOkStatusCode) {
@@ -496,6 +613,10 @@ export default (Commands, Cypress, cy, state, config) => {
     } catch (e) {} // eslint-disable-line no-empty
   })
 
+  Cypress.primaryOriginCommunicator.on('visit:url', ({ url }) => {
+    $utils.iframeSrc(Cypress.$autIframe, url)
+  })
+
   Commands.addAll({
     reload (...args) {
       let forceReload
@@ -693,14 +814,11 @@ export default (Commands, Cypress, cy, state, config) => {
       return $errUtils.throwErrByPath('go.invalid_argument', { onFail: options._log })
     },
 
-    // TODO: Change the type of `any` to `Partial<Cypress.VisitOptions>`.
-    visit (url, options: any = {}) {
-      if (options.url && url) {
-        $errUtils.throwErrByPath('visit.no_duplicate_url', { args: { optionsUrl: options.url, url } })
+    visit (url, userOptions: Partial<Cypress.VisitOptions> = {}) {
+      if (userOptions.url && url) {
+        $errUtils.throwErrByPath('visit.no_duplicate_url', { args: { optionsUrl: userOptions.url, url } })
       }
 
-      let userOptions = options
-
       if (_.isObject(url) && _.isEqual(userOptions, {})) {
         // options specified as only argument
         userOptions = url
@@ -717,7 +835,7 @@ export default (Commands, Cypress, cy, state, config) => {
         consoleProps['Options'] = _.pick(userOptions, VISIT_OPTS)
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalVisitOptions = _.defaults({}, userOptions, {
         auth: null,
         failOnStatusCode: true,
         retryOnNetworkFailure: true,
@@ -733,6 +851,8 @@ export default (Commands, Cypress, cy, state, config) => {
         onLoad () {},
       })
 
+      options.hasAlreadyVisitedUrl = !!previouslyVisitedLocation
+
       if (!_.isUndefined(options.qs) && !_.isObject(options.qs)) {
         $errUtils.throwErrByPath('visit.invalid_qs', { args: { qs: String(options.qs) } })
       }
@@ -773,10 +893,14 @@ export default (Commands, Cypress, cy, state, config) => {
 
       url = $Location.normalize(url)
 
-      const baseUrl = config('baseUrl')
+      if (Cypress.isCrossOriginSpecBridge) {
+        url = $Location.qualifyWithBaseUrl(Cypress.state('originCommandBaseUrl'), url)
+      } else {
+        const baseUrl = config('baseUrl')
 
-      if (baseUrl) {
-        url = $Location.qualifyWithBaseUrl(baseUrl, url)
+        if (baseUrl) {
+          url = $Location.qualifyWithBaseUrl(baseUrl, url)
+        }
       }
 
       const qs = options.qs
@@ -850,6 +974,12 @@ export default (Commands, Cypress, cy, state, config) => {
 
           knownCommandCausedInstability = true
 
+          // if this is a cross origin spec bridge, we need to tell the primary to change
+          // the AUT iframe since we don't have access to it
+          if (Cypress.isCrossOriginSpecBridge) {
+            return Cypress.specBridgeCommunicator.toPrimary('visit:url', { url })
+          }
+
           return $utils.iframeSrc($autIframe, url)
         })
       }
@@ -916,33 +1046,36 @@ export default (Commands, Cypress, cy, state, config) => {
         const existingHash = remote.hash || ''
         const existingAuth = remote.auth || ''
 
-        if (previousDomainVisited && (remote.originPolicy !== existing.originPolicy)) {
-          // if we've already visited a new superDomain
-          // then die else we'd be in a terrible endless loop
-          // we also need to disable retries to prevent the endless loop
-          $utils.getTestFromRunnable(state('runnable'))._retries = 0
-
-          return cannotVisitDifferentOrigin(remote.origin, previousDomainVisited, remote, existing, options._log)
-        }
-
-        const current = $Location.create(win.location.href)
-
-        // if all that is changing is the hash then we know
-        // the browser won't actually make a new http request
-        // for this, and so we need to resolve onLoad immediately
-        // and bypass the actual visit resolution stuff
-        if (bothUrlsMatchAndOneHasHash(current, remote)) {
-          // https://github.com/cypress-io/cypress/issues/1311
-          if (current.hash === remote.hash) {
-            consoleProps['Note'] = 'Because this visit was to the same hash, the page did not reload and the onBeforeLoad and onLoad callbacks did not fire.'
+        // in a cross origin spec bridge, the window may not have been set yet if nothing has been loaded in the secondary origin,
+        // it's also possible for a new test to start and for a cross-origin failure to occur if the win is set but
+        // the AUT hasn't yet navigated to the secondary origin
+        if (win) {
+          try {
+            const current = $Location.create(win.location.href)
+
+            // if all that is changing is the hash then we know
+            // the browser won't actually make a new http request
+            // for this, and so we need to resolve onLoad immediately
+            // and bypass the actual visit resolution stuff
+            if (bothUrlsMatchAndOneHasHash(current, remote)) {
+              // https://github.com/cypress-io/cypress/issues/1311
+              if (current.hash === remote.hash) {
+                consoleProps['Note'] = 'Because this visit was to the same hash, the page did not reload and the onBeforeLoad and onLoad callbacks did not fire.'
+
+                return onLoad({ runOnLoadCallback: false })
+              }
 
-            return onLoad({ runOnLoadCallback: false })
+              return changeIframeSrc(remote.href, 'hashchange')
+              .then(() => {
+                return onLoad({})
+              })
+            }
+          } catch (e) {
+            // if this is a cross-origin error, skip it
+            if (e.name !== 'SecurityError') {
+              throw e
+            }
           }
-
-          return changeIframeSrc(remote.href, 'hashchange')
-          .then(() => {
-            return onLoad({})
-          })
         }
 
         if (existingHash) {
@@ -958,7 +1091,7 @@ export default (Commands, Cypress, cy, state, config) => {
 
         return requestUrl(url, options)
         .then((resp: any = {}) => {
-          let { url, originalUrl, cookies, redirects, filePath } = resp
+          let { url, originalUrl, cookies, redirects, filePath, isPrimaryOrigin } = resp
 
           // reapply the existing hash
           url += existingHash
@@ -972,14 +1105,14 @@ export default (Commands, Cypress, cy, state, config) => {
             }
           }
 
-          if (options.log) {
-            let message = options._log.get('message')
+          if (options._log) {
+            let message = options._log!.get('message')
 
             if (redirects && redirects.length) {
               message = [message].concat(redirects).join(' -> ')
             }
 
-            options._log.set({ message })
+            options._log!.set({ message })
           }
 
           consoleProps['Resolved Url'] = url
@@ -990,10 +1123,8 @@ export default (Commands, Cypress, cy, state, config) => {
 
           // if the origin currently matches
           // then go ahead and change the iframe's src
-          // and we're good to go
-          // if origin is existing.origin
           if (remote.originPolicy === existing.originPolicy) {
-            previousDomainVisited = remote.origin
+            previouslyVisitedLocation = remote
 
             url = $Location.fullyQualifyUrl(url)
 
@@ -1003,13 +1134,28 @@ export default (Commands, Cypress, cy, state, config) => {
             })
           }
 
-          // if we've already visited a new origin
-          // then die else we'd be in a terrible endless loop
-          if (previousDomainVisited) {
-            return cannotVisitDifferentOrigin(remote.origin, previousDomainVisited, remote, existing, options._log)
+          // if we've already cy.visit'ed in the test and we are visiting a new origin,
+          // throw an error, else we'd be in a endless loop,
+          // we also need to disable retries to prevent the endless loop
+          if (previouslyVisitedLocation) {
+            $utils.getTestFromRunnable(state('runnable'))._retries = 0
+
+            const params = { remote, existing, originalUrl, previouslyVisitedLocation, log: options._log }
+
+            return cannotVisitDifferentOrigin(params)
+          }
+
+          // if we are in a cross origin spec bridge and the origin policies weren't the same,
+          // we need to throw an error since the user tried to visit a new
+          // origin which isn't allowed within a cy.origin block
+          if (Cypress.isCrossOriginSpecBridge) {
+            const existingAutOrigin = win ? $Location.create(win.location.href) : $Location.create(Cypress.state('currentActiveOriginPolicy'))
+            const params = { remote, existing, originalUrl, previouslyVisitedLocation: existingAutOrigin, log: options._log, isCrossOriginSpecBridge: true, isPrimaryOrigin }
+
+            return isPrimaryOrigin ? cannotVisitPreviousOrigin(params) : cannotVisitDifferentOrigin(params)
           }
 
-          // tell our backend we're changing domains
+          // tell our backend we're changing origins
           // TODO: add in other things we want to preserve
           // state for like scrollTop
           let s: Record<string, any> = {
@@ -1087,10 +1233,11 @@ export default (Commands, Cypress, cy, state, config) => {
             return
           }
 
-          // if it came from the user's onBeforeLoad or onLoad callback, it's
+          // if the err came from the user's onBeforeLoad/onLoad callback or is cross-origin, it's
           // not a network failure, and we should throw the original error
-          if (err.isCallbackError) {
+          if (err.isCallbackError || err.isCrossOrigin) {
             delete err.isCallbackError
+            delete err.isCrossOrigin
             throw err
           }
 
@@ -1118,7 +1265,10 @@ export default (Commands, Cypress, cy, state, config) => {
         // so that we nuke the previous state. subsequent
         // visits will not navigate to about:blank so that
         // our history entries are intact
-        if (!hasVisitedAboutBlank) {
+        // skip for cross origin spec bridges since they require
+        // session support which already visits
+        // about:blank between tests
+        if (!hasVisitedAboutBlank && !Cypress.isCrossOriginSpecBridge) {
           hasVisitedAboutBlank = true
           currentlyVisitingAboutBlank = true
 
diff --git a/packages/driver/src/cy/commands/origin/index.ts b/packages/driver/src/cy/commands/origin/index.ts
new file mode 100644
index 000000000000..df58404bc749
--- /dev/null
+++ b/packages/driver/src/cy/commands/origin/index.ts
@@ -0,0 +1,279 @@
+import Bluebird from 'bluebird'
+import $errUtils from '../../../cypress/error_utils'
+import $stackUtils from '../../../cypress/stack_utils'
+import { Validator } from './validator'
+import { createUnserializableSubjectProxy } from './unserializable_subject_proxy'
+import { serializeRunnable } from './util'
+import { preprocessConfig, preprocessEnv, syncConfigToCurrentOrigin, syncEnvToCurrentOrigin } from '../../../util/config'
+import { $Location } from '../../../cypress/location'
+import { LogUtils } from '../../../cypress/log'
+import logGroup from '../../logGroup'
+
+const reHttp = /^https?:\/\//
+
+const normalizeOrigin = (urlOrDomain) => {
+  let origin = urlOrDomain
+
+  // If just a domain, convert it to an origin by adding the protocol
+  if (!reHttp.test(urlOrDomain)) {
+    origin = `https://${urlOrDomain}`
+  }
+
+  return $Location.normalize(origin)
+}
+
+export default (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy, state: Cypress.State, config: Cypress.InternalConfig) => {
+  let timeoutId
+
+  const communicator = Cypress.primaryOriginCommunicator
+
+  communicator.on('delaying:html', (request) => {
+    // when a cross origin request is detected by the proxy, it holds it up
+    // to provide time for the spec bridge to be set up. normally, the queue
+    // will not continue until the page is stable, but this signals it to go
+    // ahead because we're anticipating a cross origin request
+    cy.isAnticipatingCrossOriginResponseFor(request)
+    const location = $Location.create(request.href)
+
+    // If this event has occurred while a cy.origin command is running with
+    // the same origin policy, do not set the time out and allow cy.origin
+    // to handle the ready for origin event
+    if (cy.state('currentActiveOriginPolicy') === location.originPolicy) {
+      return
+    }
+
+    // If we haven't seen a cy.origin and cleared the timeout within 300ms,
+    // go ahead and inform the server to release the response.
+    // This typically happens during a redirect where the user does
+    // not have a cy.origin for the intermediary origin.
+    timeoutId = setTimeout(() => {
+      Cypress.backend('cross:origin:release:html')
+    }, 1000)
+  })
+
+  Commands.addAll({
+    origin<T> (urlOrDomain: string, optionsOrFn: { args: T } | (() => {}), fn?: (args?: T) => {}) {
+      const userInvocationStack = state('current').get('userInvocationStack')
+
+      // store the invocation stack in the case that `cy.origin` errors
+      communicator.userInvocationStack = userInvocationStack
+
+      clearTimeout(timeoutId)
+      // this command runs for as long as the commands in the secondary
+      // origin run, so it can't have its own timeout
+      cy.clearTimeout()
+
+      if (!config('experimentalSessionAndOrigin')) {
+        $errUtils.throwErrByPath('origin.experiment_not_enabled')
+      }
+
+      let options
+      let callbackFn
+
+      if (fn) {
+        callbackFn = fn
+        options = optionsOrFn
+      } else {
+        callbackFn = optionsOrFn
+        options = {
+          args: undefined,
+        }
+      }
+
+      let log
+
+      logGroup(Cypress, {
+        name: 'origin',
+        type: 'parent',
+        message: urlOrDomain,
+        // @ts-ignore TODO: revisit once log-grouping has more implementations
+      }, (_log) => {
+        log = _log
+      })
+
+      const validator = new Validator({
+        log,
+        onFailure: () => {
+          Cypress.backend('cross:origin:release:html')
+        },
+      })
+
+      validator.validate({
+        callbackFn,
+        options,
+        urlOrDomain,
+      })
+
+      // use URL to ensure unicode characters are correctly handled
+      const url = new URL(normalizeOrigin(urlOrDomain)).toString()
+      const location = $Location.create(url)
+
+      validator.validateLocation(location, urlOrDomain)
+
+      const originPolicy = location.originPolicy
+
+      // This is intentionally not reset after leaving the cy.origin command.
+      cy.state('latestActiveOriginPolicy', originPolicy)
+      // This is set while IN the cy.origin command.
+      cy.state('currentActiveOriginPolicy', originPolicy)
+
+      return new Bluebird((resolve, reject, onCancel) => {
+        const cleanup = ({ readyForOriginFailed }: {readyForOriginFailed?: boolean} = {}): void => {
+          cy.state('currentActiveOriginPolicy', undefined)
+          if (!readyForOriginFailed) {
+            Cypress.backend('cross:origin:finished', location.originPolicy)
+          }
+
+          communicator.off('queue:finished', onQueueFinished)
+          communicator.off('sync:globals', onSyncGlobals)
+        }
+
+        onCancel && onCancel(() => {
+          cleanup()
+        })
+
+        const _resolve = ({ subject, unserializableSubjectType }) => {
+          cleanup()
+          resolve(unserializableSubjectType ? createUnserializableSubjectProxy(unserializableSubjectType) : subject)
+        }
+
+        const _reject = (err, cleanupOptions: {readyForOriginFailed?: boolean} = {}) => {
+          cleanup(cleanupOptions)
+          log?.error(err)
+          reject(err)
+        }
+
+        const onQueueFinished = ({ err, subject, unserializableSubjectType }) => {
+          if (err) {
+            return _reject(err)
+          }
+
+          _resolve({ subject, unserializableSubjectType })
+        }
+
+        const onSyncGlobals = ({ config, env }) => {
+          syncConfigToCurrentOrigin(config)
+          syncEnvToCurrentOrigin(env)
+        }
+
+        communicator.once('sync:globals', onSyncGlobals)
+
+        communicator.once('ran:origin:fn', (details) => {
+          const { subject, unserializableSubjectType, err, finished } = details
+
+          // lets the proxy know to allow the response for the secondary
+          // origin html through, so the page will finish loading
+          Cypress.backend('cross:origin:release:html')
+
+          if (err) {
+            if (err?.name === 'ReferenceError') {
+              const wrappedErr = $errUtils.errByPath('origin.ran_origin_fn_reference_error', {
+                error: err.message,
+              })
+
+              wrappedErr.name = err.name
+              wrappedErr.stack = $stackUtils.replacedStack(wrappedErr, err.stack)
+
+              // Prevent cypress from trying to add the function to the error log
+              wrappedErr.onFail = () => {}
+
+              return _reject(wrappedErr)
+            }
+
+            return _reject(err)
+          }
+
+          // if there are not commands and a synchronous return from the callback,
+          // this resolves immediately
+          if (finished || subject || unserializableSubjectType) {
+            _resolve({ subject, unserializableSubjectType })
+          }
+        })
+
+        communicator.once('queue:finished', onQueueFinished)
+
+        // We don't unbind this even after queue:finished, because an async
+        // error could be thrown after the queue is done, but make sure not
+        // to stack up listeners on it after it's originally bound
+        if (!communicator.listeners('uncaught:error').length) {
+          communicator.once('uncaught:error', ({ err }) => {
+            cy.fail(err, { async: true })
+          })
+        }
+
+        // fired once the spec bridge is set up and ready to receive messages
+        communicator.once('bridge:ready', async (_data, specBridgeOriginPolicy) => {
+          if (specBridgeOriginPolicy === originPolicy) {
+            // now that the spec bridge is ready, instantiate Cypress with the current app config and environment variables for initial sync when creating the instance
+            communicator.toSpecBridge(originPolicy, 'initialize:cypress', {
+              config: preprocessConfig(Cypress.config()),
+              env: preprocessEnv(Cypress.env()),
+            })
+
+            await Cypress.backend('cross:origin:bridge:ready', { originPolicy })
+
+            // once the secondary origin page loads, send along the
+            // user-specified callback to run in that origin
+            try {
+              communicator.toSpecBridge(originPolicy, 'run:origin:fn', {
+                args: options?.args || undefined,
+                fn: callbackFn.toString(),
+                // let the spec bridge version of Cypress know if config read-only values can be overwritten since window.top cannot be accessed in cross-origin iframes
+                // this should only be used for internal testing. Cast to boolean to guarantee serialization
+                // @ts-ignore
+                skipConfigValidation: !!window.top.__cySkipValidateConfig,
+                state: {
+                  viewportWidth: Cypress.state('viewportWidth'),
+                  viewportHeight: Cypress.state('viewportHeight'),
+                  runnable: serializeRunnable(Cypress.state('runnable')),
+                  duringUserTestExecution: Cypress.state('duringUserTestExecution'),
+                  hookId: Cypress.state('hookId'),
+                  originCommandBaseUrl: location.href,
+                  parentOriginPolicies: [cy.getRemoteLocation('originPolicy')],
+                  isStable: Cypress.state('isStable'),
+                  autOrigin: Cypress.state('autOrigin'),
+                },
+                config: preprocessConfig(Cypress.config()),
+                env: preprocessEnv(Cypress.env()),
+                logCounter: LogUtils.getCounter(),
+              })
+            } catch (err: any) {
+              // Release the request if 'run:origin:fn' fails
+              Cypress.backend('cross:origin:release:html')
+
+              const wrappedErr = $errUtils.errByPath('origin.run_origin_fn_errored', {
+                error: err.message,
+              })
+
+              wrappedErr.name = err.name
+
+              const stack = $stackUtils.replacedStack(wrappedErr, userInvocationStack)
+
+              // add the actual stack, since it might be useful for debugging
+              // the failure
+              wrappedErr.stack = $stackUtils.stackWithContentAppended({
+                appendToStack: {
+                  title: 'From Cypress Internals',
+                  content: $stackUtils.stackWithoutMessage(err.stack),
+                },
+              }, stack)
+
+              // @ts-ignore - This keeps Bluebird from messing with the stack.
+              // It tries to add a bunch of stuff that's not useful and ends up
+              // messing up the stack that we want on the error
+              wrappedErr.__stackCleaned__ = true
+
+              // Prevent cypress from trying to add the function to the error log
+              wrappedErr.onFail = () => {}
+
+              _reject(wrappedErr, { readyForOriginFailed: true })
+            }
+          }
+        })
+
+        // this signals to the runner to create the spec bridge for the specified origin policy
+        communicator.emit('expect:origin', location)
+      })
+    },
+  })
+}
diff --git a/packages/driver/src/cy/commands/origin/unserializable_subject_proxy.ts b/packages/driver/src/cy/commands/origin/unserializable_subject_proxy.ts
new file mode 100644
index 000000000000..02faaceeff33
--- /dev/null
+++ b/packages/driver/src/cy/commands/origin/unserializable_subject_proxy.ts
@@ -0,0 +1,64 @@
+import $errUtils from '../../../cypress/error_utils'
+
+// These properties are required to avoid failing prior to attempting to use the subject.
+// If Symbol.toStringTag is passed through to the target we will not properly fail the 'cy.invoke' command.
+const passThroughProps = [
+  'then',
+  Symbol.isConcatSpreadable,
+  'jquery',
+  'nodeType',
+  'window',
+  'document',
+  'inspect',
+  'isSinonProxy',
+  '_spreadArray',
+  'selector',
+]
+
+/**
+ * Create a proxy object to fail when accessed or called.
+ * @param type The type of operand that failed to serialize
+ * @returns A proxy object that will fail when accessed.
+ */
+export const createUnserializableSubjectProxy = (type: string) => {
+  let target = {}
+
+  // If the failed subject is a function, use a function as the target.
+  if (type === 'function') {
+    target = () => {}
+  }
+
+  // Symbol note: The target can't be a symbol, but we can use an object until the symbol is accessed, then provide a different error.
+
+  return new Proxy(target, {
+    /**
+     * Throw an error if the proxy is called like a function.
+     * @param target the proxy target
+     * @param thisArg this
+     * @param argumentsList args passed.
+     */
+    apply () {
+      $errUtils.throwErrByPath('origin.failed_to_serialize_function')
+    },
+
+    /**
+     * Throw an error if any properties besides the listed ones are accessed.
+     * @param target The proxy target
+     * @param prop The property being accessed
+     * @param receiver Either the proxy or an object that inherits from the proxy.
+     * @returns either an error or the result of the allowed get on the target.
+     */
+    get (target, prop) {
+      if (passThroughProps.includes(prop)) {
+        return target[prop]
+      }
+
+      // Provide a slightly different message if the object was meant to be a symbol.
+      if (type === 'symbol') {
+        $errUtils.throwErrByPath('origin.failed_to_serialize_symbol')
+      } else {
+        $errUtils.throwErrByPath('origin.failed_to_serialize_object')
+      }
+    },
+  })
+}
diff --git a/packages/driver/src/cy/commands/origin/util.ts b/packages/driver/src/cy/commands/origin/util.ts
new file mode 100644
index 000000000000..bbb042adb649
--- /dev/null
+++ b/packages/driver/src/cy/commands/origin/util.ts
@@ -0,0 +1,19 @@
+import _ from 'lodash'
+
+export const serializeRunnable = (runnable) => {
+  if (!runnable) return undefined
+
+  const fields = _.pick(runnable, ['id', 'type', 'title', 'parent', 'ctx', 'titlePath', '_timeout'])
+
+  fields.ctx = _.pick(runnable.ctx, ['currentTest.id', 'currentTest._currentRetry', 'currentTest.type', 'currentTest.title'])
+
+  // recursively call serializeRunnable for the parent field
+  if (fields.parent) {
+    fields.titlePath = fields.titlePath()
+    fields.parent = serializeRunnable(fields.parent)
+  } else {
+    fields.titlePath = undefined
+  }
+
+  return fields
+}
diff --git a/packages/driver/src/cy/commands/origin/validator.ts b/packages/driver/src/cy/commands/origin/validator.ts
new file mode 100644
index 000000000000..6c3ee8adbd9e
--- /dev/null
+++ b/packages/driver/src/cy/commands/origin/validator.ts
@@ -0,0 +1,72 @@
+import $utils from '../../../cypress/utils'
+import $errUtils from '../../../cypress/error_utils'
+import { difference, isPlainObject, isString } from 'lodash'
+
+const validOptionKeys = Object.freeze(['args'])
+
+export class Validator {
+  log: Cypress.Log
+  onFailure: () => {}
+
+  constructor ({ log, onFailure }) {
+    this.log = log
+    this.onFailure = onFailure
+  }
+
+  validate ({ callbackFn, options, urlOrDomain }) {
+    if (!isString(urlOrDomain)) {
+      this.onFailure()
+
+      $errUtils.throwErrByPath('origin.invalid_url_argument', {
+        onFail: this.log,
+        args: { arg: $utils.stringify(urlOrDomain) },
+      })
+    }
+
+    if (options) {
+      if (!isPlainObject(options)) {
+        this.onFailure()
+
+        $errUtils.throwErrByPath('origin.invalid_options_argument', {
+          onFail: this.log,
+          args: { arg: $utils.stringify(options) },
+        })
+      }
+
+      const extraneousKeys = difference(Object.keys(options), validOptionKeys)
+
+      if (extraneousKeys.length) {
+        this.onFailure()
+
+        $errUtils.throwErrByPath('origin.extraneous_options_argument', {
+          onFail: this.log,
+          args: {
+            extraneousKeys: extraneousKeys.join(', '),
+            validOptionKeys: validOptionKeys.join(', '),
+          },
+        })
+      }
+    }
+
+    if (typeof callbackFn !== 'function') {
+      this.onFailure()
+
+      $errUtils.throwErrByPath('origin.invalid_fn_argument', {
+        onFail: this.log,
+        args: { arg: $utils.stringify(callbackFn) },
+      })
+    }
+  }
+
+  validateLocation (location, urlOrDomain) {
+    // we don't support query params
+    if (location.search.length > 0) {
+      this.onFailure()
+
+      $errUtils.throwErrByPath('origin.invalid_url_argument', {
+        onFail: this.log,
+        args: { arg: $utils.stringify(urlOrDomain) },
+      })
+    }
+  }
+}
diff --git a/packages/driver/src/cy/commands/querying/focused.ts b/packages/driver/src/cy/commands/querying/focused.ts
index 45f67366ae20..c96acf77cc4c 100644
--- a/packages/driver/src/cy/commands/querying/focused.ts
+++ b/packages/driver/src/cy/commands/querying/focused.ts
@@ -2,14 +2,17 @@ import _ from 'lodash'
 import Promise from 'bluebird'
 
 import $dom from '../../../dom'
+import type { Log } from '../../../cypress/log'
+
+interface InternalFocusedOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable>{
+  _log?: Log
+  verify: boolean
+}
 
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    focused (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    focused (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalFocusedOptions = _.defaults({}, userOptions, {
         verify: true,
         log: true,
       })
@@ -23,7 +26,7 @@ export default (Commands, Cypress, cy, state) => {
           return
         }
 
-        options._log.set({
+        options._log!.set({
           $el,
           consoleProps () {
             const ret = $el ? $dom.getElements($el) : '--nothing--'
diff --git a/packages/driver/src/cy/commands/querying/querying.ts b/packages/driver/src/cy/commands/querying/querying.ts
index aa80eeb3c268..0c4ffb9f1d93 100644
--- a/packages/driver/src/cy/commands/querying/querying.ts
+++ b/packages/driver/src/cy/commands/querying/querying.ts
@@ -4,14 +4,25 @@ import Promise from 'bluebird'
 import $dom from '../../../dom'
 import $elements from '../../../dom/elements'
 import $errUtils from '../../../cypress/error_utils'
+import type { Log } from '../../../cypress/log'
 import { resolveShadowDomInclusion } from '../../../cypress/shadow_dom_utils'
 import { getAliasedRequests, isDynamicAliasingPossible } from '../../net-stubbing/aliasing'
 
+interface InternalGetOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow> {
+  _log?: Log
+  _retries?: number
+  filter?: any
+  onRetry?: Function
+  verify?: boolean
+}
+
+interface InternalContainsOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.CaseMatchable & Cypress.Shadow> {
+  _log?: Log
+}
+
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>
-    get (selector, options: any = {}) {
-      const userOptions = options
+    get (selector, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow> = {}) {
       const ctx = this
 
       if ((userOptions === null) || _.isArray(userOptions) || !_.isPlainObject(userOptions)) {
@@ -20,7 +31,7 @@ export default (Commands, Cypress, cy, state) => {
         })
       }
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalGetOptions = _.defaults({}, userOptions, {
         retry: true,
         withinSubject: state('withinSubject'),
         log: true,
@@ -28,7 +39,7 @@ export default (Commands, Cypress, cy, state) => {
         verify: true,
       })
 
-      options.includeShadowDom = resolveShadowDomInclusion(Cypress, userOptions.includeShadowDom)
+      options.includeShadowDom = resolveShadowDomInclusion(Cypress, options.includeShadowDom)
 
       let aliasObj
       const consoleProps: Record<string, any> = {}
@@ -100,7 +111,7 @@ export default (Commands, Cypress, cy, state) => {
           return consoleProps
         }
 
-        options._log.set(obj)
+        options._log!.set(obj)
       }
 
       let allParts
@@ -263,14 +274,14 @@ export default (Commands, Cypress, cy, state) => {
         consoleProps.Yielded = $dom.getElements($el)
         consoleProps.Elements = $el != null ? $el.length : undefined
 
-        options._log.set({ $el })
+        options._log!.set({ $el })
       }
 
       const getElements = () => {
         let $el
 
         try {
-          let scope = options.withinSubject
+          let scope: (typeof options.withinSubject) | Node[] = options.withinSubject
 
           if (options.includeShadowDom) {
             const root = options.withinSubject ? options.withinSubject[0] : cy.state('document')
@@ -295,7 +306,7 @@ export default (Commands, Cypress, cy, state) => {
               return err
             }
 
-            options._log.error(err)
+            options._log!.error(err)
           }
 
           throw err
@@ -305,7 +316,7 @@ export default (Commands, Cypress, cy, state) => {
         // and we have been explictly told to filter
         // then just attempt to filter out elements from our within subject
         if (!$el.length && options.withinSubject && options.filter) {
-          const filtered = options.withinSubject.filter(selector)
+          const filtered = (options.withinSubject as JQuery).filter(selector)
 
           // reset $el if this found anything
           if (filtered.length) {
@@ -350,10 +361,7 @@ export default (Commands, Cypress, cy, state) => {
   })
 
   Commands.addAll({ prevSubject: ['optional', 'window', 'document', 'element'] }, {
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.CaseMatchable & Cypress.Shadow>
-    contains (subject, filter, text, options: any = {}) {
-      let userOptions = options
-
+    contains (subject, filter, text, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.CaseMatchable & Cypress.Shadow> = {}) {
       // nuke our subject if its present but not an element.
       // in these cases its either window or document but
       // we dont care.
@@ -389,7 +397,7 @@ export default (Commands, Cypress, cy, state) => {
         $errUtils.throwErrByPath('contains.regex_conflict')
       }
 
-      options = _.defaults({}, userOptions, { log: true, matchCase: true })
+      const options: InternalContainsOptions = _.defaults({}, userOptions, { log: true, matchCase: true })
 
       if (!(_.isString(text) || _.isFinite(text) || _.isRegExp(text))) {
         $errUtils.throwErrByPath('contains.invalid_argument')
@@ -459,7 +467,7 @@ export default (Commands, Cypress, cy, state) => {
         consoleProps.Yielded = $dom.getElements($el)
         consoleProps.Elements = $el != null ? $el.length : undefined
 
-        options._log.set({ $el })
+        options._log!.set({ $el })
       }
 
       // find elements by the :cy-contains psuedo selector
diff --git a/packages/driver/src/cy/commands/querying/root.ts b/packages/driver/src/cy/commands/querying/root.ts
index 579bc461d31f..6847c9b955e3 100644
--- a/packages/driver/src/cy/commands/querying/root.ts
+++ b/packages/driver/src/cy/commands/querying/root.ts
@@ -1,12 +1,14 @@
 import _ from 'lodash'
+import type { Log } from '../../../cypress/log'
+
+interface InternalRootOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+}
 
 export default (Commands, Cypress, cy, state) => {
   Commands.addAll({
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    root (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    root (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalRootOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log !== false) {
         options._log = Cypress.log({
@@ -16,8 +18,8 @@ export default (Commands, Cypress, cy, state) => {
       }
 
       const log = ($el) => {
-        if (options.log) {
-          options._log.set({ $el })
+        if (options._log) {
+          options._log!.set({ $el })
         }
 
         return $el
diff --git a/packages/driver/src/cy/commands/request.ts b/packages/driver/src/cy/commands/request.ts
index 7ae76418ae21..4f1f20016653 100644
--- a/packages/driver/src/cy/commands/request.ts
+++ b/packages/driver/src/cy/commands/request.ts
@@ -144,7 +144,12 @@ export default (Commands, Cypress, cy, state, config) => {
       // origin may return an empty string if we haven't visited anything yet
       options.url = $Location.normalize(options.url)
 
-      const originOrBase = config('baseUrl') || cy.getRemoteLocation('origin')
+      // If passed a relative url, determine the fully qualified URL to use.
+      // In the multi-origin version of the driver, we use originCommandBaseUrl,
+      // which is set to the origin that is associated with it.
+      // In the primary driver (where originCommandBaseUrl is undefined), we
+      // use the baseUrl or remote origin.
+      const originOrBase = Cypress.state('originCommandBaseUrl') || config('baseUrl') || cy.getRemoteLocation('origin')
 
       if (originOrBase) {
         options.url = $Location.qualifyWithBaseUrl(originOrBase, options.url)
diff --git a/packages/driver/src/cy/commands/screenshot.ts b/packages/driver/src/cy/commands/screenshot.ts
index 53987c587c0b..a5920a9a35c8 100644
--- a/packages/driver/src/cy/commands/screenshot.ts
+++ b/packages/driver/src/cy/commands/screenshot.ts
@@ -8,6 +8,7 @@ import $Screenshot from '../../cypress/screenshot'
 import $dom from '../../dom'
 import $errUtils from '../../cypress/error_utils'
 import $utils from '../../cypress/utils'
+import type { Log } from '../../cypress/log'
 
 const getViewportHeight = (state) => {
   // TODO this doesn't seem correct
@@ -330,7 +331,7 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options: TakeScreensho
     }
   }
 
-  const before = () => {
+  const before = ($el) => {
     return Promise.try(() => {
       if (disableTimersAndAnimations) {
         return cy.pauseTimers(true)
@@ -339,11 +340,41 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options: TakeScreensho
       return null
     })
     .then(() => {
+      // could fail if iframe is cross-origin, so fail gracefully
+      try {
+        if (disableTimersAndAnimations) {
+          $dom.addCssAnimationDisabler($el)
+        }
+
+        _.each(getBlackout(screenshotConfig), (selector) => {
+          $dom.addBlackouts($el, selector)
+        })
+      } catch (err) {
+        /* eslint-disable no-console */
+        console.error('Failed to modify app dom:')
+        console.error(err)
+        /* eslint-enable no-console */
+      }
+
       return sendAsync('before:screenshot', getOptions(true))
     })
   }
 
-  const after = () => {
+  const after = ($el) => {
+    // could fail if iframe is cross-origin, so fail gracefully
+    try {
+      if (disableTimersAndAnimations) {
+        $dom.removeCssAnimationDisabler($el)
+      }
+
+      $dom.removeBlackouts($el)
+    } catch (err) {
+      /* eslint-disable no-console */
+      console.error('Failed to modify app dom:')
+      console.error(err)
+      /* eslint-enable no-console */
+    }
+
     send('after:screenshot', getOptions(false))
 
     return Promise.try(() => {
@@ -380,7 +411,7 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options: TakeScreensho
     ? subject
     : $dom.wrap(state('document').documentElement)
 
-  return before()
+  return before($el)
   .then(() => {
     if (onBeforeScreenshot) {
       onBeforeScreenshot.call(state('ctx'), $el)
@@ -407,7 +438,11 @@ const takeScreenshot = (Cypress, state, screenshotConfig, options: TakeScreensho
 
     return props
   })
-  .finally(after)
+  .finally(() => after($el))
+}
+
+interface InternalScreenshotOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.ScreenshotOptions> {
+  _log?: Log
 }
 
 export default function (Commands, Cypress, cy, state, config) {
@@ -440,10 +475,7 @@ export default function (Commands, Cypress, cy, state, config) {
   })
 
   Commands.addAll({ prevSubject: ['optional', 'element', 'window', 'document'] }, {
-    // TODO: any -> Partial<Loggable & Timeoutable & ScreenshotOptions>
-    screenshot (subject, name, options: any = {}) {
-      let userOptions = options
-
+    screenshot (subject, name, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.ScreenshotOptions> = {}) {
       if (_.isObject(name)) {
         userOptions = name
         name = null
@@ -452,7 +484,7 @@ export default function (Commands, Cypress, cy, state, config) {
       // make sure when we capture the entire test runner
       // we are not limited to "within" subject
       // https://github.com/cypress-io/cypress/issues/14253
-      if (options.capture !== 'runner') {
+      if (userOptions.capture !== 'runner') {
         const withinSubject = state('withinSubject')
 
         if (withinSubject && $dom.isElement(withinSubject)) {
@@ -463,7 +495,7 @@ export default function (Commands, Cypress, cy, state, config) {
       // TODO: handle hook titles
       const runnable = state('runnable')
 
-      options = _.defaults({}, userOptions, {
+      const options: InternalScreenshotOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: config('responseTimeout'),
       })
diff --git a/packages/driver/src/cy/commands/sessions.ts b/packages/driver/src/cy/commands/sessions/index.ts
similarity index 75%
rename from packages/driver/src/cy/commands/sessions.ts
rename to packages/driver/src/cy/commands/sessions/index.ts
index f6f5faf41c03..732c3c4d0feb 100644
--- a/packages/driver/src/cy/commands/sessions.ts
+++ b/packages/driver/src/cy/commands/sessions/index.ts
@@ -1,10 +1,16 @@
 import _ from 'lodash'
-import $ from 'jquery'
-import { $Location } from '../../cypress/location'
-import $errUtils from '../../cypress/error_utils'
+import { $Location } from '../../../cypress/location'
+import $errUtils from '../../../cypress/error_utils'
 import stringifyStable from 'json-stable-stringify'
-import $stackUtils from '../../cypress/stack_utils'
-import Bluebird from 'bluebird'
+import $stackUtils from '../../../cypress/stack_utils'
+import {
+  getSessionDetails,
+  getCurrentOriginStorage,
+  setPostMessageLocalStorage,
+  getConsoleProps,
+  getPostMessageLocalStorage,
+  navigateAboutBlank,
+} from './utils'
 const currentTestRegisteredSessions = new Map()
 
 type ActiveSessions = Cypress.Commands.Session.ActiveSessions
@@ -18,193 +24,6 @@ type SessionData = Cypress.Commands.Session.SessionData
  * therefore session data should be cleared with spec browser launch
  */
 
-const getSessionDetails = (sessState: SessionData) => {
-  return {
-    id: sessState.id,
-    data: _.merge(
-      _.mapValues(_.groupBy(sessState.cookies, 'domain'), (v) => ({ cookies: v.length })),
-      ..._.map(sessState.localStorage, (v) => ({ [$Location.create(v.origin).hostname]: { localStorage: Object.keys(v.value).length } })),
-    ) }
-}
-
-const getSessionDetailsForTable = (sessState: SessionData) => {
-  return _.merge(
-    _.mapValues(_.groupBy(sessState.cookies, 'domain'), (v) => ({ cookies: v })),
-    ..._.map(sessState.localStorage, (v) => ({ [$Location.create(v.origin).hostname]: { localStorage: v } })),
-  )
-}
-
-const isSecureContext = (url: string) => url.startsWith('https:')
-
-const getCurrentOriginStorage = () => {
-  // localStorage.length property is not always accurate, we must stringify to check for entries
-  // for ex) try setting localStorage.key = 'val' and reading localStorage.length, may be 0.
-  const _localStorageStr = JSON.stringify(window.localStorage)
-  const _localStorage = _localStorageStr.length > 2 && JSON.parse(_localStorageStr)
-  const _sessionStorageStr = JSON.stringify(window.sessionStorage)
-  const _sessionStorage = _sessionStorageStr.length > 2 && JSON.parse(JSON.stringify(window.sessionStorage))
-
-  const value = {} as any
-
-  if (_localStorage) {
-    value.localStorage = _localStorage
-  }
-
-  if (_sessionStorage) {
-    value.sessionStorage = _sessionStorage
-  }
-
-  return value
-}
-
-const setPostMessageLocalStorage = async (specWindow, originOptions) => {
-  const origins = originOptions.map((v) => v.origin) as string[]
-
-  const iframes: JQuery<HTMLElement>[] = []
-
-  const $iframeContainer = $(`<div style="display:none"></div>`).appendTo($('body', specWindow.document))
-
-  // if we're on an https domain, there is no way for the secure context to access insecure origins from iframes
-  // since there is no way for the app to access localStorage on insecure contexts, we don't have to clear any localStorage on http domains.
-  if (isSecureContext(specWindow.location.href)) {
-    _.remove(origins, (v) => !isSecureContext(v))
-  }
-
-  if (!origins.length) return []
-
-  _.each(origins, (u) => {
-    const $iframe = $(`<iframe src="${`${u}/${Cypress.config('namespace')}/automation/setLocalStorage?${u}`}"></iframe>`)
-
-    $iframe.appendTo($iframeContainer)
-    iframes.push($iframe)
-  })
-
-  let onPostMessage
-
-  const successOrigins = [] as string[]
-
-  return new Bluebird((resolve) => {
-    onPostMessage = (event) => {
-      const data = event.data
-
-      if (data.type === 'set:storage:load') {
-        if (!event.source) {
-          throw new Error('failed to get localStorage')
-        }
-
-        const opts = _.find(originOptions, { origin: event.origin })!
-
-        event.source.postMessage({ type: 'set:storage:data', data: opts }, '*')
-      } else if (data.type === 'set:storage:complete') {
-        successOrigins.push(event.origin)
-        if (successOrigins.length === origins.length) {
-          resolve()
-        }
-      }
-    }
-
-    specWindow.addEventListener('message', onPostMessage)
-  })
-  // timeout just in case something goes wrong and the iframe never loads in
-  .timeout(2000)
-  .finally(() => {
-    specWindow.removeEventListener('message', onPostMessage)
-    $iframeContainer.remove()
-  })
-  .catch(() => {
-    Cypress.log({
-      name: 'warning',
-      message: `failed to access session localStorage data on origin(s): ${_.xor(origins, successOrigins).join(', ')}`,
-    })
-  })
-}
-
-const getConsoleProps = (sessState: SessionData) => {
-  const sessionDetails = getSessionDetailsForTable(sessState)
-
-  const tables = _.flatMap(sessionDetails, (val, domain) => {
-    const cookiesTable = () => {
-      return {
-        name: `🍪 Cookies - ${domain} (${val.cookies.length})`,
-        data: val.cookies,
-      }
-    }
-
-    const localStorageTable = () => {
-      return {
-        name: `📁 Storage - ${domain} (${_.keys(val.localStorage.value).length})`,
-        data: _.map(val.localStorage.value, (value, key) => {
-          return {
-            key,
-            value,
-          }
-        }),
-      }
-    }
-
-    return [
-      val.cookies && cookiesTable,
-      val.localStorage && localStorageTable,
-    ]
-  })
-
-  return {
-    id: sessState.id,
-    table: _.compact(tables),
-  }
-}
-
-const getPostMessageLocalStorage = (specWindow, origins): Promise<any[]> => {
-  const results = [] as any[]
-  const iframes: JQuery<HTMLElement>[] = []
-  let onPostMessage
-  const successOrigins = [] as string[]
-
-  const $iframeContainer = $(`<div style="display:none"></div>`).appendTo($('body', specWindow.document))
-
-  _.each(origins, (u) => {
-    const $iframe = $(`<iframe src="${`${u}/__cypress/automation/getLocalStorage`}"></iframe>`)
-
-    $iframe.appendTo($iframeContainer)
-    iframes.push($iframe)
-  })
-
-  return new Bluebird((resolve) => {
-    // when the cross-domain iframe for each domain is loaded
-    // we can only communicate through postmessage
-    onPostMessage = ((event) => {
-      const data = event.data
-
-      if (data.type !== 'localStorage') return
-
-      const value = data.value
-
-      results.push([event.origin, value])
-
-      successOrigins.push(event.origin)
-      if (successOrigins.length === origins.length) {
-        resolve(results)
-      }
-    })
-
-    specWindow.addEventListener('message', onPostMessage)
-  })
-  // timeout just in case something goes wrong and the iframe never loads in
-  .timeout(2000)
-  .finally(() => {
-    specWindow.removeEventListener('message', onPostMessage)
-    $iframeContainer.remove()
-  })
-  .catch((err) => {
-    Cypress.log({
-      name: 'warning',
-      message: `failed to access session localStorage data on origin(s): ${_.xor(origins, successOrigins).join(', ')}`,
-    })
-
-    return []
-  })
-}
-
 export default function (Commands, Cypress, cy) {
   const { Promise } = Cypress
 
@@ -289,8 +108,12 @@ export default function (Commands, Cypress, cy) {
   }
 
   function throwIfNoSessionSupport () {
-    if (!Cypress.config('experimentalSessionSupport')) {
-      $errUtils.throwErrByPath('sessions.experimentNotEnabled')
+    if (!Cypress.config('experimentalSessionAndOrigin')) {
+      $errUtils.throwErrByPath('sessions.experimentNotEnabled', {
+        args: {
+          experimentalSessionSupport: Cypress.config('experimentalSessionSupport'),
+        },
+      })
     }
   }
 
@@ -386,7 +209,7 @@ export default function (Commands, Cypress, cy) {
      * 1) if we only need currentOrigin localStorage, access sync
      * 2) if cross-origin http, we need to load in iframe from our proxy that will intercept all http reqs at /__cypress/automation/*
      *      and postMessage() the localStorage value to us
-     * 3) if cross-origin https, since we pass-thru https conntections in the proxy, we need to
+     * 3) if cross-origin https, since we pass-thru https connections in the proxy, we need to
      *      send a message telling our proxy server to intercept the next req to the https domain,
      *      then follow 2)
      */
@@ -492,7 +315,7 @@ export default function (Commands, Cypress, cy) {
 
     registerSessionHooks () {
       Cypress.on('test:before:run:async', () => {
-        if (Cypress.config('experimentalSessionSupport')) {
+        if (Cypress.config('experimentalSessionAndOrigin')) {
           currentTestRegisteredSessions.clear()
 
           return navigateAboutBlank(false)
@@ -814,7 +637,7 @@ export default function (Commands, Cypress, cy) {
 
           // we have a saved session on the server AND setup matches
           if (serverStoredSession && serverStoredSession.setup === existingSession.setup.toString()) {
-            _.extend(existingSession, serverStoredSession)
+            _.extend(existingSession, _.omit(serverStoredSession, 'setup'))
             existingSession.hydrated = true
           } else {
             onValidationError = throwValidationError
@@ -866,9 +689,3 @@ export default function (Commands, Cypress, cy) {
 
   Cypress.session = sessions
 }
-
-function navigateAboutBlank (session = true) {
-  Cypress.action('cy:url:changed', '')
-
-  return Cypress.action('cy:visit:blank', { type: session ? 'session' : 'session-lifecycle' }) as unknown as Promise<void>
-}
diff --git a/packages/driver/src/cy/commands/sessions/utils.ts b/packages/driver/src/cy/commands/sessions/utils.ts
new file mode 100644
index 000000000000..9f20ebea5021
--- /dev/null
+++ b/packages/driver/src/cy/commands/sessions/utils.ts
@@ -0,0 +1,208 @@
+import _ from 'lodash'
+import $ from 'jquery'
+import { $Location } from '../../../cypress/location'
+import Bluebird from 'bluebird'
+
+type SessionData = Cypress.Commands.Session.SessionData
+
+const getSessionDetails = (sessState: SessionData) => {
+  return {
+    id: sessState.id,
+    data: _.merge(
+      _.mapValues(_.groupBy(sessState.cookies, 'domain'), (v) => ({ cookies: v.length })),
+      ..._.map(sessState.localStorage, (v) => ({ [$Location.create(v.origin).hostname]: { localStorage: Object.keys(v.value).length } })),
+    ) }
+}
+
+const getSessionDetailsForTable = (sessState: SessionData) => {
+  return _.merge(
+    _.mapValues(_.groupBy(sessState.cookies, 'domain'), (v) => ({ cookies: v })),
+    ..._.map(sessState.localStorage, (v) => ({ [$Location.create(v.origin).hostname]: { localStorage: v } })),
+  )
+}
+
+const isSecureContext = (url: string) => url.startsWith('https:')
+
+const getCurrentOriginStorage = () => {
+  // localStorage.length property is not always accurate, we must stringify to check for entries
+  // for ex) try setting localStorage.key = 'val' and reading localStorage.length, may be 0.
+  const _localStorageStr = JSON.stringify(window.localStorage)
+  const _localStorage = _localStorageStr.length > 2 && JSON.parse(_localStorageStr)
+  const _sessionStorageStr = JSON.stringify(window.sessionStorage)
+  const _sessionStorage = _sessionStorageStr.length > 2 && JSON.parse(JSON.stringify(window.sessionStorage))
+
+  const value = {} as any
+
+  if (_localStorage) {
+    value.localStorage = _localStorage
+  }
+
+  if (_sessionStorage) {
+    value.sessionStorage = _sessionStorage
+  }
+
+  return value
+}
+
+const setPostMessageLocalStorage = async (specWindow, originOptions) => {
+  const origins = originOptions.map((v) => v.origin) as string[]
+
+  const iframes: JQuery<HTMLElement>[] = []
+
+  const $iframeContainer = $(`<div style="display:none"></div>`).appendTo($('body', specWindow.document))
+
+  // if we're on an https domain, there is no way for the secure context to access insecure origins from iframes
+  // since there is no way for the app to access localStorage on insecure contexts, we don't have to clear any localStorage on http domains.
+  if (isSecureContext(specWindow.location.href)) {
+    _.remove(origins, (v) => !isSecureContext(v))
+  }
+
+  if (!origins.length) return []
+
+  _.each(origins, (u) => {
+    const $iframe = $(`<iframe src="${`${u}/__cypress/automation/setLocalStorage?${u}`}"></iframe>`)
+
+    $iframe.appendTo($iframeContainer)
+    iframes.push($iframe)
+  })
+
+  let onPostMessage
+
+  const successOrigins = [] as string[]
+
+  return new Bluebird((resolve) => {
+    onPostMessage = (event) => {
+      const data = event.data
+
+      if (data.type === 'set:storage:load') {
+        if (!event.source) {
+          throw new Error('failed to get localStorage')
+        }
+
+        const opts = _.find(originOptions, { origin: event.origin })!
+
+        event.source.postMessage({ type: 'set:storage:data', data: opts }, '*')
+      } else if (data.type === 'set:storage:complete') {
+        successOrigins.push(event.origin)
+        if (successOrigins.length === origins.length) {
+          resolve()
+        }
+      }
+    }
+
+    specWindow.addEventListener('message', onPostMessage)
+  })
+  // timeout just in case something goes wrong and the iframe never loads in
+  .timeout(2000)
+  .finally(() => {
+    specWindow.removeEventListener('message', onPostMessage)
+    $iframeContainer.remove()
+  })
+  .catch(() => {
+    Cypress.log({
+      name: 'warning',
+      message: `failed to access session localStorage data on origin(s): ${_.xor(origins, successOrigins).join(', ')}`,
+    })
+  })
+}
+
+const getConsoleProps = (sessState: SessionData) => {
+  const sessionDetails = getSessionDetailsForTable(sessState)
+
+  const tables = _.flatMap(sessionDetails, (val, domain) => {
+    const cookiesTable = () => {
+      return {
+        name: `🍪 Cookies - ${domain} (${val.cookies.length})`,
+        data: val.cookies,
+      }
+    }
+
+    const localStorageTable = () => {
+      return {
+        name: `📁 Storage - ${domain} (${_.keys(val.localStorage.value).length})`,
+        data: _.map(val.localStorage.value, (value, key) => {
+          return {
+            key,
+            value,
+          }
+        }),
+      }
+    }
+
+    return [
+      val.cookies && cookiesTable,
+      val.localStorage && localStorageTable,
+    ]
+  })
+
+  return {
+    id: sessState.id,
+    table: _.compact(tables),
+  }
+}
+
+const getPostMessageLocalStorage = (specWindow, origins): Promise<any[]> => {
+  const results = [] as any[]
+  const iframes: JQuery<HTMLElement>[] = []
+  let onPostMessage
+  const successOrigins = [] as string[]
+
+  const $iframeContainer = $(`<div style="display:none"></div>`).appendTo($('body', specWindow.document))
+
+  _.each(origins, (u) => {
+    const $iframe = $(`<iframe src="${`${u}/__cypress/automation/getLocalStorage`}"></iframe>`)
+
+    $iframe.appendTo($iframeContainer)
+    iframes.push($iframe)
+  })
+
+  return new Bluebird((resolve) => {
+    // when the cross-domain iframe for each domain is loaded
+    // we can only communicate through postmessage
+    onPostMessage = ((event) => {
+      const data = event.data
+
+      if (data.type !== 'localStorage') return
+
+      const value = data.value
+
+      results.push([event.origin, value])
+
+      successOrigins.push(event.origin)
+      if (successOrigins.length === origins.length) {
+        resolve(results)
+      }
+    })
+
+    specWindow.addEventListener('message', onPostMessage)
+  })
+  // timeout just in case something goes wrong and the iframe never loads in
+  .timeout(2000)
+  .finally(() => {
+    specWindow.removeEventListener('message', onPostMessage)
+    $iframeContainer.remove()
+  })
+  .catch((err) => {
+    Cypress.log({
+      name: 'warning',
+      message: `failed to access session localStorage data on origin(s): ${_.xor(origins, successOrigins).join(', ')}`,
+    })
+
+    return []
+  })
+}
+
+function navigateAboutBlank (session: boolean = true) {
+  Cypress.action('cy:url:changed', '')
+
+  return Cypress.action('cy:visit:blank', { type: session ? 'session' : 'session-lifecycle' }) as unknown as Promise<void>
+}
+
+export {
+  getSessionDetails,
+  getCurrentOriginStorage,
+  setPostMessageLocalStorage,
+  getConsoleProps,
+  getPostMessageLocalStorage,
+  navigateAboutBlank,
+}
diff --git a/packages/driver/src/cy/commands/task.ts b/packages/driver/src/cy/commands/task.ts
index ff07b7bf8d7e..7223b95084e7 100644
--- a/packages/driver/src/cy/commands/task.ts
+++ b/packages/driver/src/cy/commands/task.ts
@@ -4,14 +4,16 @@ import Promise from 'bluebird'
 import $utils from '../../cypress/utils'
 import $errUtils from '../../cypress/error_utils'
 import $stackUtils from '../../cypress/stack_utils'
+import type { Log } from '../../cypress/log'
+
+interface InternalTaskOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+}
 
 export default (Commands, Cypress, cy) => {
   Commands.addAll({
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    task (task, arg, options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, {
+    task (task, arg, userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalTaskOptions = _.defaults({}, userOptions, {
         log: true,
         timeout: Cypress.config('taskTimeout'),
       })
diff --git a/packages/driver/src/cy/commands/window.ts b/packages/driver/src/cy/commands/window.ts
index a4005d888443..a187a4c3ec7f 100644
--- a/packages/driver/src/cy/commands/window.ts
+++ b/packages/driver/src/cy/commands/window.ts
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import Promise from 'bluebird'
 
 import $errUtils from '../../cypress/error_utils'
+import type { Log } from '../../cypress/log'
 
 const viewports = {
   'macbook-16': '1536x960',
@@ -35,12 +36,36 @@ type CurrentViewport = Pick<Cypress.Config, 'viewportWidth' | 'viewportHeight'>
 // refresh would cause viewport to hang
 let currentViewport: CurrentViewport | null = null
 
+interface InternalTitleOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+}
+
+interface InternalWindowOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  error?: any
+}
+
+interface InternalDocumentOptions extends Partial<Cypress.Loggable & Cypress.Timeoutable> {
+  _log?: Log
+  error?: any
+}
+
+interface InternalViewportOptions extends Partial<Cypress.Loggable> {
+  _log?: Log
+}
+
 export default (Commands, Cypress, cy, state) => {
   const defaultViewport: CurrentViewport = _.pick(Cypress.config() as Cypress.Config, 'viewportWidth', 'viewportHeight')
 
   // currentViewport could already be set due to previous runs
   currentViewport = currentViewport || defaultViewport
 
+  // sync the global viewport state when the viewport has changed in the primary or secondary
+  Cypress.primaryOriginCommunicator.on('sync:viewport', (viewport) => {
+    currentViewport = viewport
+    state(viewport)
+  })
+
   Cypress.on('test:before:run:async', () => {
     // if we have viewportDefaults it means
     // something has changed the default and we
@@ -78,11 +103,8 @@ export default (Commands, Cypress, cy, state) => {
   }
 
   Commands.addAll({
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    title (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    title (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalTitleOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
         options._log = Cypress.log({ timeout: options.timeout })
@@ -101,11 +123,8 @@ export default (Commands, Cypress, cy, state) => {
       return resolveTitle()
     },
 
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    window (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    window (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalWindowOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
         options._log = Cypress.log({ timeout: options.timeout })
@@ -144,11 +163,8 @@ export default (Commands, Cypress, cy, state) => {
       return verifyAssertions()
     },
 
-    // TODO: any -> Partial<Cypress.Loggable & Cypress.Timeoutable>
-    document (options: any = {}) {
-      const userOptions = options
-
-      options = _.defaults({}, userOptions, { log: true })
+    document (userOptions: Partial<Cypress.Loggable & Cypress.Timeoutable> = {}) {
+      const options: InternalDocumentOptions = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
         options._log = Cypress.log({ timeout: options.timeout })
@@ -188,15 +204,12 @@ export default (Commands, Cypress, cy, state) => {
       return verifyAssertions()
     },
 
-    // TODO: any -> Partial<Cypress.Loggable>
-    viewport (presetOrWidth, heightOrOrientation, options: any = {}) {
-      const userOptions = options
-
+    viewport (presetOrWidth, heightOrOrientation, userOptions: Partial<Cypress.Loggable> = {}) {
       if (_.isObject(heightOrOrientation)) {
-        options = heightOrOrientation
+        userOptions = heightOrOrientation
       }
 
-      options = _.defaults({}, userOptions, { log: true })
+      const options: InternalViewportOptions = _.defaults({}, userOptions, { log: true })
 
       let height
       let width
@@ -208,10 +221,6 @@ export default (Commands, Cypress, cy, state) => {
         const isPreset = typeof presetOrWidth === 'string'
 
         options._log = Cypress.log({
-          // TODO: timeout below should be removed
-          // because cy.viewport option doesn't support `timeout`
-          // @see https://docs.cypress.io/api/commands/viewport#Arguments
-          timeout: options.timeout,
           consoleProps () {
             const obj: Record<string, string | number> = {}
 
diff --git a/packages/driver/src/cy/jquery.ts b/packages/driver/src/cy/jquery.ts
index 436fb9d104ac..6585056a9b00 100644
--- a/packages/driver/src/cy/jquery.ts
+++ b/packages/driver/src/cy/jquery.ts
@@ -9,6 +9,14 @@ const remoteJQueryisNotSameAsGlobal = (remoteJQuery) => {
 
 // eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces
 export const create = (state) => ({
+  $$ (selector, context) {
+    if (context == null) {
+      context = state('document')
+    }
+
+    return $dom.query(selector, context)
+  },
+
   getRemotejQueryInstance (subject) {
     // we make assumptions that you cannot have
     // an array of mixed types, so we only look at
diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts
index f03306b6fa21..c44791ce2fc3 100644
--- a/packages/driver/src/cy/keyboard.ts
+++ b/packages/driver/src/cy/keyboard.ts
@@ -12,6 +12,7 @@ import type { HTMLTextLikeElement } from '../dom/elements'
 import $selection from '../dom/selection'
 import $utils from '../cypress/utils'
 import $window from '../dom/window'
+import type { Log } from '../cypress/log'
 
 const debug = Debug('cypress:driver:keyboard')
 
@@ -680,7 +681,7 @@ export interface typeOptions {
   force?: boolean
   simulated?: boolean
   release?: boolean
-  _log?: any
+  _log?: Log
   delay?: number
   onError?: Function
   onEvent?: Function
diff --git a/packages/driver/src/cy/listeners.ts b/packages/driver/src/cy/listeners.ts
index deba8927e160..1d5f5cb9cab3 100644
--- a/packages/driver/src/cy/listeners.ts
+++ b/packages/driver/src/cy/listeners.ts
@@ -59,6 +59,7 @@ type BoundCallbacks = {
   onError: (handlerType) => (event) => undefined
   onHistoryNav: (delta) => void
   onSubmit: (e) => any
+  onLoad: (e) => any
   onBeforeUnload: (e) => undefined
   onUnload: (e) => any
   onNavigation: (...args) => any
@@ -78,6 +79,10 @@ export const bindToListeners = (contentWindow, callbacks: BoundCallbacks) => {
   addListener(contentWindow, 'error', callbacks.onError('error'))
   addListener(contentWindow, 'unhandledrejection', callbacks.onError('unhandledrejection'))
 
+  addListener(contentWindow, 'load', (e) => {
+    callbacks.onLoad(e)
+  })
+
   addListener(contentWindow, 'beforeunload', (e) => {
     // bail if we've canceled this event (from another source)
     // or we've set a returnValue on the original event
diff --git a/packages/driver/src/cy/location.ts b/packages/driver/src/cy/location.ts
index 64c46c52cdfb..34b9d51dd158 100644
--- a/packages/driver/src/cy/location.ts
+++ b/packages/driver/src/cy/location.ts
@@ -3,7 +3,7 @@ import $utils from '../cypress/utils'
 
 // eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces
 export const create = (state) => ({
-  getRemoteLocation (key, win) {
+  getRemoteLocation (key?: string | undefined, win?: Window) {
     try {
       const remoteUrl = $utils.locToString(win ?? state('window'))
       const location = $Location.create(remoteUrl)
@@ -15,7 +15,7 @@ export const create = (state) => ({
       return location
     } catch (e) {
       // it is possible we do not have access to the location
-      // for example, if the app has redirected to a 2nd domain
+      // for example, if the app has redirected to a different origin
       return ''
     }
   },
diff --git a/packages/driver/src/cy/logGroup.ts b/packages/driver/src/cy/logGroup.ts
index 5444e352c4c1..908ea08dad12 100644
--- a/packages/driver/src/cy/logGroup.ts
+++ b/packages/driver/src/cy/logGroup.ts
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import { $Command } from '../cypress/command'
 import $errUtils from '../cypress/error_utils'
 
diff --git a/packages/driver/src/cy/overrides.ts b/packages/driver/src/cy/overrides.ts
new file mode 100644
index 000000000000..20e1c4a56742
--- /dev/null
+++ b/packages/driver/src/cy/overrides.ts
@@ -0,0 +1,70 @@
+import _ from 'lodash'
+// @ts-ignore
+import { registerFetch } from 'unfetch'
+import $selection from '../dom/selection'
+
+export const create = (state, config, focused, snapshots) => {
+  const wrapNativeMethods = function (contentWindow) {
+    try {
+      // return null to trick contentWindow into thinking
+      // its not been iframed if modifyObstructiveCode is true
+      if (config('modifyObstructiveCode')) {
+        Object.defineProperty(contentWindow, 'frameElement', {
+          get () {
+            return null
+          },
+        })
+      }
+
+      contentWindow.HTMLElement.prototype.focus = function (focusOption) {
+        return focused.interceptFocus(this, contentWindow, focusOption)
+      }
+
+      contentWindow.HTMLElement.prototype.blur = function () {
+        return focused.interceptBlur(this)
+      }
+
+      contentWindow.SVGElement.prototype.focus = function (focusOption) {
+        return focused.interceptFocus(this, contentWindow, focusOption)
+      }
+
+      contentWindow.SVGElement.prototype.blur = function () {
+        return focused.interceptBlur(this)
+      }
+
+      contentWindow.HTMLInputElement.prototype.select = function () {
+        return $selection.interceptSelect.call(this)
+      }
+
+      contentWindow.document.hasFocus = function () {
+        return focused.documentHasFocus.call(this)
+      }
+
+      const cssModificationSpy = function (original, ...args) {
+        snapshots.onCssModified(this.href)
+
+        return original.apply(this, args)
+      }
+
+      const { insertRule } = contentWindow.CSSStyleSheet.prototype
+      const { deleteRule } = contentWindow.CSSStyleSheet.prototype
+
+      contentWindow.CSSStyleSheet.prototype.insertRule = _.wrap(insertRule, cssModificationSpy)
+      contentWindow.CSSStyleSheet.prototype.deleteRule = _.wrap(deleteRule, cssModificationSpy)
+
+      if (config('experimentalFetchPolyfill')) {
+        // drop "fetch" polyfill that replaces it with XMLHttpRequest
+        // from the app iframe that we wrap for network stubbing
+        contentWindow.fetch = registerFetch(contentWindow)
+        // flag the polyfill to test this experimental feature easier
+        state('fetchPolyfilled', true)
+      }
+    } catch (error) {} // eslint-disable-line no-empty
+  }
+
+  return {
+    wrapNativeMethods,
+  }
+}
+
+export interface IOverrides extends ReturnType<typeof create> {}
diff --git a/packages/driver/src/cy/retries.ts b/packages/driver/src/cy/retries.ts
index 0bb0e431bb6d..c1f23d9a2afc 100644
--- a/packages/driver/src/cy/retries.ts
+++ b/packages/driver/src/cy/retries.ts
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import Promise from 'bluebird'
 
 import $errUtils from '../cypress/error_utils'
+import * as cors from '@packages/network/lib/cors'
 
 const { errByPath, modifyErrMsg, throwErr, mergeErrProps } = $errUtils
 
@@ -73,6 +74,18 @@ export const create = (Cypress, state, timeout, clearTimeout, whenStable, finish
       }).message
 
       const retryErrProps = modifyErrMsg(error, prependMsg, (msg1, msg2) => {
+        const autOrigin = Cypress.state('autOrigin')
+        const commandOrigin = window.location.origin
+
+        if (autOrigin && !cors.urlOriginsMatch(commandOrigin, autOrigin)) {
+          const appendMsg = errByPath('miscellaneous.cross_origin_command', {
+            commandOrigin,
+            autOrigin,
+          }).message
+
+          return `${msg2}${msg1}\n\n${appendMsg}`
+        }
+
         return `${msg2}${msg1}`
       })
 
diff --git a/packages/driver/src/cy/snapshots.ts b/packages/driver/src/cy/snapshots.ts
index c0cc082da39e..9d0a05328101 100644
--- a/packages/driver/src/cy/snapshots.ts
+++ b/packages/driver/src/cy/snapshots.ts
@@ -5,6 +5,8 @@ import { create as createSnapshotsCSS } from './snapshots_css'
 
 export const HIGHLIGHT_ATTR = 'data-cypress-el'
 
+export const FINAL_SNAPSHOT_NAME = 'final state'
+
 export const create = ($$, state) => {
   const snapshotsCss = createSnapshotsCSS($$, state)
   const snapshotsMap = new WeakMap()
@@ -99,15 +101,20 @@ export const create = ($$, state) => {
   }
 
   const getStyles = (snapshot) => {
-    const styleIds = snapshotsMap.get(snapshot)
+    const { ids, styles } = snapshotsMap.get(snapshot) || {}
 
-    if (!styleIds) {
+    if (!ids && !styles) {
       return {}
     }
 
+    // If a cross origin processed snapshot, styles are directly added into the CSS map. Simply return them.
+    if (styles?.headStyles || styles?.bodyStyles) {
+      return styles
+    }
+
     return {
-      headStyles: snapshotsCss.getStylesByIds(styleIds.headStyleIds),
-      bodyStyles: snapshotsCss.getStylesByIds(styleIds.bodyStyleIds),
+      headStyles: snapshotsCss.getStylesByIds(ids?.headStyleIds),
+      bodyStyles: snapshotsCss.getStylesByIds(ids?.bodyStyleIds),
     }
   }
 
@@ -119,20 +126,24 @@ export const create = ($$, state) => {
     $body.find('script,link[rel="stylesheet"],style').remove()
 
     const snapshot = {
-      name: 'final state',
+      name: FINAL_SNAPSHOT_NAME,
       htmlAttrs,
       body: {
         get: () => $body.detach(),
       },
     }
 
-    snapshotsMap.set(snapshot, { headStyleIds, bodyStyleIds })
+    snapshotsMap.set(snapshot, {
+      ids: {
+        headStyleIds,
+        bodyStyleIds,
+      },
+    })
 
     return snapshot
   }
 
-  const createSnapshot = (name, $elToHighlight) => {
-    Cypress.action('cy:snapshot', name)
+  const createSnapshotBody = ($elToHighlight) => {
     // create a unique selector for this el
     // but only IF the subject is truly an element. For example
     // we might be wrapping a primitive like "$([1, 2]).first()"
@@ -141,64 +152,89 @@ export const create = ($$, state) => {
     // jQuery v3 runs in strict mode and throws an error if you attempt to set a property
 
     // TODO: in firefox sometimes this throws a cross-origin access error
-    try {
-      const isJqueryElement = $dom.isElement($elToHighlight) && $dom.isJquery($elToHighlight)
+    const isJqueryElement = $dom.isElement($elToHighlight) && $dom.isJquery($elToHighlight)
 
-      if (isJqueryElement) {
-        ($elToHighlight as JQuery<HTMLElement>).attr(HIGHLIGHT_ATTR, 'true')
-      }
+    if (isJqueryElement) {
+      ($elToHighlight as JQuery<HTMLElement>).attr(HIGHLIGHT_ATTR, 'true')
+    }
 
-      // TODO: throw error here if cy is undefined!
-
-      // cloneNode can actually trigger functions attached to custom elements
-      // so we have to use importNode to clone the element
-      // https://github.com/cypress-io/cypress/issues/7187
-      // https://github.com/cypress-io/cypress/issues/1068
-      // we import it to a transient document (snapshotDocument) so that there
-      // are no side effects from cloning it. see below for how we re-attach
-      // it to the AUT document
-      // https://github.com/cypress-io/cypress/issues/8679
-      // this can fail if snapshotting before the page has fully loaded,
-      // so we catch this below and return null for the snapshot
-      // https://github.com/cypress-io/cypress/issues/15816
-      const $body = $$(snapshotDocument.importNode($$('body')[0], true))
-
-      // for the head and body, get an array of all CSS,
-      // whether it's links or style tags
-      // if it's same-origin, it will get the actual styles as a string
-      // it it's cross-domain, it will get a reference to the link's href
-      const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds()
-
-      // replaces iframes with placeholders
-      replaceIframes($body)
-
-      // remove tags we don't want in body
-      $body.find('script,link[rel=\'stylesheet\'],style').remove()
-
-      // here we need to figure out if we're in a remote manual environment
-      // if so we need to stringify the DOM:
-      // 1. grab all inputs / textareas / options and set their value on the element
-      // 2. convert DOM to string: body.prop("outerHTML")
-      // 3. send this string via websocket to our server
-      // 4. server rebroadcasts this to our client and its stored as a property
-
-      // its also possible for us to store the DOM string completely on the server
-      // without ever sending it back to the browser (until its requests).
-      // we could just store it in memory and wipe it out intelligently.
-      // this would also prevent having to store the DOM structure on the client,
-      // which would reduce memory, and some CPU operations
-
-      // now remove it after we clone
-      if (isJqueryElement) {
-        ($elToHighlight as JQuery<HTMLElement>).removeAttr(HIGHLIGHT_ATTR)
-      }
+    // TODO: throw error here if cy is undefined!
+
+    // cloneNode can actually trigger functions attached to custom elements
+    // so we have to use importNode to clone the element
+    // https://github.com/cypress-io/cypress/issues/7187
+    // https://github.com/cypress-io/cypress/issues/1068
+    // we import it to a transient document (snapshotDocument) so that there
+    // are no side effects from cloning it. see below for how we re-attach
+    // it to the AUT document
+    // https://github.com/cypress-io/cypress/issues/8679
+    // this can fail if snapshotting before the page has fully loaded,
+    // so we catch this below and return null for the snapshot
+    // https://github.com/cypress-io/cypress/issues/15816
+    const $body = $$(snapshotDocument.importNode($$('body')[0], true))
+    // for the head and body, get an array of all CSS,
+    // whether it's links or style tags
+    // if it's same-origin, it will get the actual styles as a string
+    // if it's cross-origin, it will get a reference to the link's href
+    const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds()
+
+    // replaces iframes with placeholders
+    replaceIframes($body)
+
+    // remove tags we don't want in body
+    $body.find('script,link[rel=\'stylesheet\'],style').remove()
+
+    // here we need to figure out if we're in a remote manual environment
+    // if so we need to stringify the DOM:
+    // 1. grab all inputs / textareas / options and set their value on the element
+    // 2. convert DOM to string: body.prop("outerHTML")
+    // 3. send this string via websocket to our server
+    // 4. server rebroadcasts this to our client and its stored as a property
+
+    // its also possible for us to store the DOM string completely on the server
+    // without ever sending it back to the browser (until its requests).
+    // we could just store it in memory and wipe it out intelligently.
+    // this would also prevent having to store the DOM structure on the client,
+    // which would reduce memory, and some CPU operations
+
+    // now remove it after we clone
+    if (isJqueryElement) {
+      ($elToHighlight as JQuery<HTMLElement>).removeAttr(HIGHLIGHT_ATTR)
+    }
+
+    const $htmlAttrs = getHtmlAttrs($$('html')[0])
+
+    return {
+      $body,
+      $htmlAttrs,
+      headStyleIds,
+      bodyStyleIds,
+    }
+  }
+
+  const reifySnapshotBody = (preprocessedSnapshot) => {
+    const $body = preprocessedSnapshot.body.get()
+    const $htmlAttrs = preprocessedSnapshot.htmlAttrs
+    const { headStyles, bodyStyles } = preprocessedSnapshot.styles
+
+    return {
+      $body,
+      $htmlAttrs,
+      headStyles,
+      bodyStyles,
+    }
+  }
+
+  const createSnapshot = (name, $elToHighlight, preprocessedSnapshot) => {
+    Cypress.action('cy:snapshot', name)
+
+    try {
+      const {
+        $body,
+        $htmlAttrs,
+        ...styleAttrs
+      } = preprocessedSnapshot ? reifySnapshotBody(preprocessedSnapshot) : createSnapshotBody($elToHighlight)
 
-      // preserve attributes on the <html> tag
-      const htmlAttrs = getHtmlAttrs($$('html')[0])
-      // the body we clone via importNode above is attached to a transient document
-      // so that there are no side effects from cloning it. we only attach it back
-      // to the AUT document at the last moment (when restoring the snapshot)
-      // https://github.com/cypress-io/cypress/issues/8679
       let attachedBody
       const body = {
         get: () => {
@@ -212,11 +248,38 @@ export const create = ($$, state) => {
 
       const snapshot = {
         name,
-        htmlAttrs,
+        htmlAttrs: $htmlAttrs,
         body,
       }
 
-      snapshotsMap.set(snapshot, { headStyleIds, bodyStyleIds })
+      const {
+        headStyleIds,
+        bodyStyleIds,
+        headStyles,
+        bodyStyles,
+      }: {
+        headStyleIds?: string[]
+        bodyStyleIds?: string[]
+        headStyles?: string[]
+        bodyStyles?: string[]
+      } = styleAttrs
+
+      if (headStyleIds && bodyStyleIds) {
+        snapshotsMap.set(snapshot, {
+          ids: {
+            headStyleIds,
+            bodyStyleIds,
+          },
+        })
+      } else if (headStyles && bodyStyles) {
+        // The Snapshot is being reified from cross origin. Get inline styles of reified snapshot.
+        snapshotsMap.set(snapshot, {
+          styles: {
+            headStyles,
+            bodyStyles,
+          },
+        })
+      }
 
       return snapshot
     } catch (e) {
diff --git a/packages/driver/src/cy/snapshots_css.ts b/packages/driver/src/cy/snapshots_css.ts
index 66312f7ff56c..0115c668cdde 100644
--- a/packages/driver/src/cy/snapshots_css.ts
+++ b/packages/driver/src/cy/snapshots_css.ts
@@ -59,7 +59,7 @@ const makePathsAbsoluteToStylesheet = $utils.memoize((styles, href) => {
 }, makePathsAbsoluteToStylesheetCache)
 
 const getExternalCssContents = (href, stylesheet) => {
-  //// some browsers may throw a SecurityError if the stylesheet is cross-domain
+  //// some browsers may throw a SecurityError if the stylesheet is cross-origin
   //// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet#Notes
   //// for others, it will just be null
   try {
@@ -164,7 +164,7 @@ export const create = ($$, state) => {
       const href = stylesheet.href
 
       //// if there's an href, it's a link tag
-      //// return the CSS rules as a string, or, if cross-domain,
+      //// return the CSS rules as a string, or, if cross-origin,
       //// a reference to the stylesheet's href
       if (href) {
         return getStyleId(href, stylesheets[href]) || { href }
diff --git a/packages/driver/src/cy/stability.ts b/packages/driver/src/cy/stability.ts
index 7e03bd7422a2..217803dacb4e 100644
--- a/packages/driver/src/cy/stability.ts
+++ b/packages/driver/src/cy/stability.ts
@@ -9,10 +9,7 @@ export const create = (Cypress, state) => ({
 
     const whenStable = state('whenStable')
 
-    // if we are going back to stable and we have
-    // a whenStable callback
     if (stable && whenStable) {
-      // invoke it
       whenStable()
     }
 
@@ -20,28 +17,83 @@ export const create = (Cypress, state) => ({
 
     // we notify the outside world because this is what the runner uses to
     // show the 'loading spinner' during an app page loading transition event
-    return Cypress.action('cy:stability:changed', stable, event)
+    Cypress.action('cy:stability:changed', stable, event)
   },
 
   whenStable: (fn: () => any) => {
-    // if we are not stable
-    if (state('isStable') === false) {
-      return new Promise((resolve, reject) => {
-        // then when we become stable
-        return state('whenStable', () => {
-          // reset this callback function
-          state('whenStable', null)
-
-          // and invoke the original function
-          return Promise.try(fn)
-          .then(resolve)
-          .catch(reject)
-        })
+    if (state('isStable') !== false) {
+      return Promise.try(fn)
+    }
+
+    return new Promise((resolve, reject) => {
+      // then when we become stable
+      state('whenStable', () => {
+        // reset this callback function
+        state('whenStable', null)
+
+        // and invoke the original function
+        Promise.try(fn)
+        .then(resolve)
+        .catch(reject)
       })
+    })
+  },
+
+  isAnticipatingCrossOriginResponseFor (request: {href: string}): void {
+    if (state('anticipatingCrossOriginResponse') === request) {
+      return
+    }
+
+    const whenAnticipatingCrossOriginResponse = state('whenAnticipatingCrossOriginResponse')
+
+    if (!!request?.href && whenAnticipatingCrossOriginResponse) {
+      whenAnticipatingCrossOriginResponse()
+    }
+
+    state('anticipatingCrossOriginResponse', request)
+  },
+
+  whenStableOrAnticipatingCrossOriginResponse (fn, command) {
+    const commandIsOrigin = command?.get('name') === 'origin'
+    const commandIsEndLogGroup = command?.get('name') === 'end-logGroup'
+
+    if (
+      // cy.origin() needs to run when unstable (if we're anticipating
+      // a cross-origin response) in order to allow it to set up a spec bridge
+      // before the page loads and stability is restored
+      (!!state('anticipatingCrossOriginResponse') && commandIsOrigin)
+      // the end-logGroup command is inserted internally to mark the end of
+      // a command group and needs to be allowed or stability will hang things
+      // up if chaining cy.origin commands
+      || commandIsEndLogGroup
+      || state('isStable') !== false
+    ) {
+      return Promise.try(fn)
     }
 
-    // else invoke it right now
-    return Promise.try(fn)
+    return new Promise((resolve, reject) => {
+      let fulfilled = false
+
+      const onSignal = () => {
+        if (fulfilled) return
+
+        fulfilled = true
+
+        state('whenStable', null)
+        state('whenAnticipatingCrossOriginResponse', null)
+
+        Promise.try(fn)
+        .then(resolve)
+        .catch(reject)
+      }
+
+      state('whenStable', onSignal)
+
+      // We only care to listen for anticipating cross origin request when the command we're waiting for is origin
+      if (commandIsOrigin) {
+        state('whenAnticipatingCrossOriginResponse', onSignal)
+      }
+    })
   },
 })
 
diff --git a/packages/driver/src/cy/testConfigOverrides.ts b/packages/driver/src/cy/testConfigOverrides.ts
index 8b9c23353a83..4b93bb7caf71 100644
--- a/packages/driver/src/cy/testConfigOverrides.ts
+++ b/packages/driver/src/cy/testConfigOverrides.ts
@@ -143,7 +143,9 @@ export class TestConfigOverride {
   restoreAndSetTestConfigOverrides (test, config, env) {
     if (this.restoreTestConfigFn) this.restoreTestConfigFn()
 
-    const resolvedTestConfig = test._testConfig || {}
+    const resolvedTestConfig = test._testConfig || {
+      unverifiedTestConfig: [],
+    }
 
     if (Object.keys(resolvedTestConfig.unverifiedTestConfig).length > 0) {
       this.restoreTestConfigFn = mutateConfiguration(resolvedTestConfig, config, env)
diff --git a/packages/driver/src/cy/video-recorder.ts b/packages/driver/src/cy/video-recorder.ts
index 980d4aa75e7b..008d4cb6c8d4 100644
--- a/packages/driver/src/cy/video-recorder.ts
+++ b/packages/driver/src/cy/video-recorder.ts
@@ -24,8 +24,6 @@ export const initVideoRecorder = (Cypress) => {
         mimeType: 'video/webm',
       }
 
-      // TODO: update TypeScript to 4.4+.
-      // @ts-ignore
       const mediaRecorder = new window.MediaRecorder(stream, options)
 
       mediaRecorder.start(200)
diff --git a/packages/driver/src/cypress.ts b/packages/driver/src/cypress.ts
index 654752e065de..83ebef44eb09 100644
--- a/packages/driver/src/cypress.ts
+++ b/packages/driver/src/cypress.ts
@@ -37,6 +37,7 @@ import ProxyLogging from './cypress/proxy-logging'
 import * as $Events from './cypress/events'
 import $Keyboard from './cy/keyboard'
 import * as resolvers from './cypress/resolvers'
+import { PrimaryOriginCommunicator, SpecBridgeCommunicator } from './cross-origin/communicator'
 
 const debug = debugFn('cypress:driver:cypress')
 
@@ -107,6 +108,9 @@ class $Cypress {
   emit: any
   emitThen: any
   emitMap: any
+  primaryOriginCommunicator: PrimaryOriginCommunicator
+  specBridgeCommunicator: SpecBridgeCommunicator
+  isCrossOriginSpecBridge: boolean
 
   // attach to $Cypress to access
   // all of the constructors
@@ -144,7 +148,7 @@ class $Cypress {
   static $: any
   static utils: any
 
-  constructor (config = {}) {
+  constructor () {
     this.cy = null
     this.chai = null
     this.mocha = null
@@ -153,43 +157,23 @@ class $Cypress {
     this.Commands = null
     this.$autIframe = null
     this.onSpecReady = null
+    this.primaryOriginCommunicator = new PrimaryOriginCommunicator()
+    this.specBridgeCommunicator = new SpecBridgeCommunicator()
+    this.isCrossOriginSpecBridge = false
 
     this.events = $Events.extend(this)
     this.$ = jqueryProxyFn.bind(this)
 
     _.extend(this.$, $)
-
-    this.setConfig(config)
   }
 
-  setConfig (config: Record<string, any> = {}) {
-    // config.remote
-    // {
-    //   origin: "http://localhost:2020"
-    //   domainName: "localhost"
-    //   props: null
-    //   strategy: "file"
-    // }
-
-    // -- or --
-
-    // {
-    //   origin: "https://foo.google.com"
-    //   domainName: "google.com"
-    //   strategy: "http"
-    //   props: {
-    //     port: 443
-    //     tld: "com"
-    //     domain: "google"
-    //   }
-    // }
-
-    let d = config.remote ? config.remote.domainName : undefined
+  configure (config: Cypress.ObjectLike = {}) {
+    const domainName = config.remote ? config.remote.domainName : undefined
 
     // set domainName but allow us to turn
     // off this feature in testing
-    if (d && config.testingType === 'e2e') {
-      document.domain = d
+    if (domainName && config.testingType === 'e2e') {
+      document.domain = domainName
     }
 
     // a few static props for the host OS, browser
@@ -210,6 +194,9 @@ class $Cypress {
     // slice up the behavior
     config.isInteractive = !config.isTextTerminal
 
+    // true if this Cypress belongs to a cross origin spec bridge
+    this.isCrossOriginSpecBridge = config.isCrossOriginSpecBridge || false
+
     // enable long stack traces when
     // we not are running headlessly
     // for debuggability but disable
@@ -224,14 +211,14 @@ class $Cypress {
     // change this in the NEXT_BREAKING
     const { env } = config
 
-    config = _.omit(config, 'env', 'remote', 'resolved', 'scaffoldedFiles', 'state', 'testingType')
+    config = _.omit(config, 'env', 'remote', 'resolved', 'scaffoldedFiles', 'state', 'testingType', 'isCrossOriginSpecBridge')
 
     _.extend(this, browserInfo(config))
 
     this.state = $SetterGetter.create({})
     this.originalConfig = _.cloneDeep(config)
     this.config = $SetterGetter.create(config, (config) => {
-      if (!window.top!.__cySkipValidateConfig) {
+      if (this.isCrossOriginSpecBridge ? !window.__cySkipValidateConfig : !window.top!.__cySkipValidateConfig) {
         validateNoReadOnlyConfig(config, (errProperty) => {
           const errPath = this.state('runnable')
             ? 'config.invalid_cypress_config_override'
@@ -276,7 +263,7 @@ class $Cypress {
       return null
     }
 
-    this.Cookies = $Cookies.create(config.namespace, d)
+    this.Cookies = $Cookies.create(config.namespace, domainName)
 
     // TODO: Remove this after $Events functions are added to $Cypress.
     // @ts-ignore
@@ -630,6 +617,9 @@ class $Cypress {
       case 'cy:command:end':
         return this.emit('command:end', ...args)
 
+      case 'cy:skipped:command:end':
+        return this.emit('skipped:command:end', ...args)
+
       case 'cy:command:retry':
         return this.emit('command:retry', ...args)
 
@@ -642,6 +632,9 @@ class $Cypress {
       case 'cy:command:queue:end':
         return this.emit('command:queue:end')
 
+      case 'cy:enqueue:command':
+        return this.emit('enqueue:command', ...args)
+
       case 'cy:url:changed':
         return this.emit('url:changed', args[0])
 
@@ -684,6 +677,11 @@ class $Cypress {
         return this.emit('form:submitted', args[0])
 
       case 'app:window:load':
+        this.emit('internal:window:load', {
+          type: 'same:origin',
+          window: args[0],
+        })
+
         return this.emit('window:load', args[0])
 
       case 'app:window:before:unload':
@@ -798,7 +796,11 @@ class $Cypress {
   }
 
   static create (config) {
-    return new $Cypress(config)
+    const cypress = new $Cypress()
+
+    cypress.configure(config)
+
+    return cypress
   }
 }
 
diff --git a/packages/driver/src/cypress/browser.ts b/packages/driver/src/cypress/browser.ts
index 559d74843496..a3d188955c06 100644
--- a/packages/driver/src/cypress/browser.ts
+++ b/packages/driver/src/cypress/browser.ts
@@ -35,8 +35,7 @@ const _isBrowser = (browser, matcher, errPrefix) => {
   }
 }
 
-// TODO: change the type of `any` to `IsBrowserMatcher`
-const isBrowser = (config, obj: any = '', errPrefix: string = '`Cypress.isBrowser()`') => {
+const isBrowser = (config, obj: Cypress.IsBrowserMatcher = '', errPrefix: string = '`Cypress.isBrowser()`') => {
   return _
   .chain(obj)
   .concat([])
diff --git a/packages/driver/src/cypress/chainer.ts b/packages/driver/src/cypress/chainer.ts
index c81ed819d00e..3fe45e41fc33 100644
--- a/packages/driver/src/cypress/chainer.ts
+++ b/packages/driver/src/cypress/chainer.ts
@@ -11,7 +11,10 @@ export class $Chainer {
   constructor (userInvocationStack, specWindow) {
     this.userInvocationStack = userInvocationStack
     this.specWindow = specWindow
-    this.chainerId = _.uniqueId('chainer')
+    // the id prefix needs to be unique per origin, so there are not
+    // collisions when chainers created in a secondary origin are passed
+    // to the primary origin for the command log, etc.
+    this.chainerId = _.uniqueId(`ch-${window.location.origin}-`)
     this.firstCall = true
     this.useInitialStack = null
   }
diff --git a/packages/driver/src/cypress/command.ts b/packages/driver/src/cypress/command.ts
index f4b3380cad9d..df1861417c79 100644
--- a/packages/driver/src/cypress/command.ts
+++ b/packages/driver/src/cypress/command.ts
@@ -6,10 +6,18 @@ export class $Command {
   // @ts-ignore
   attributes: Record<string, any>
 
-  constructor (obj = {}) {
+  constructor (attrs: any = {}) {
     this.reset()
 
-    this.set(obj)
+    // if the command came from a secondary origin, it already has an id
+    if (!attrs.id) {
+      // the id prefix needs to be unique per origin, so there are not
+      // collisions when commands created in a secondary origin are passed
+      // to the primary origin for the command log, etc.
+      attrs.id = _.uniqueId(`cmd-${window.location.origin}-`)
+    }
+
+    this.set(attrs)
   }
 
   set (key, val?) {
diff --git a/packages/driver/src/cypress/command_queue.ts b/packages/driver/src/cypress/command_queue.ts
index d9321d35de45..ea9b091e295a 100644
--- a/packages/driver/src/cypress/command_queue.ts
+++ b/packages/driver/src/cypress/command_queue.ts
@@ -63,16 +63,16 @@ const commandRunningFailed = (Cypress, state, err) => {
 export class CommandQueue extends Queue<Command> {
   state: any
   timeout: any
-  whenStable: any
+  stability: any
   cleanup: any
   fail: any
   isCy: any
 
-  constructor (state, timeout, whenStable, cleanup, fail, isCy) {
+  constructor (state, timeout, stability, cleanup, fail, isCy) {
     super()
     this.state = state
     this.timeout = timeout
-    this.whenStable = whenStable
+    this.stability = stability
     this.cleanup = cleanup
     this.fail = fail
     this.isCy = isCy
@@ -123,6 +123,14 @@ export class CommandQueue extends Queue<Command> {
     })
   }
 
+  /**
+   * Check if the current command index is the last command in the queue
+   * @returns boolean
+   */
+  isOnLastCommand (): boolean {
+    return this.state('index') === this.length
+  }
+
   private runCommand (command: Command) {
     // bail here prior to creating a new promise
     // because we could have stopped / canceled
@@ -135,11 +143,11 @@ export class CommandQueue extends Queue<Command> {
     this.state('current', command)
     this.state('chainerId', command.get('chainerId'))
 
-    return this.whenStable(() => {
+    return this.stability.whenStableOrAnticipatingCrossOriginResponse(() => {
       this.state('nestedIndex', this.state('index'))
 
       return command.get('args')
-    })
+    }, command)
     .then((args) => {
       // store this if we enqueue new commands
       // to check for promise violations
@@ -197,7 +205,7 @@ export class CommandQueue extends Queue<Command> {
         // if we got a return value and we enqueued
         // a new command and we didn't return cy
         // or an undefined value then throw
-        return $errUtils.throwErrByPath(
+        $errUtils.throwErrByPath(
           'miscellaneous.returned_value_and_commands_from_custom_command', {
             args: {
               current: command.get('name'),
@@ -260,14 +268,12 @@ export class CommandQueue extends Queue<Command> {
         return
       }
 
-      // start at 0 index if we dont have one
+      // start at 0 index if one is not already set
       let index = this.state('index') || this.state('index', 0)
 
       const command = this.at(index)
 
-      // if the command should be skipped
-      // just bail and increment index
-      // and set the subject
+      // if the command should be skipped, just bail and increment index
       if (command && command.get('skip')) {
         // must set prev + next since other
         // operations depend on this state being correct
@@ -279,6 +285,8 @@ export class CommandQueue extends Queue<Command> {
         this.state('index', index + 1)
         this.state('subject', command.get('subject'))
 
+        Cypress.action('cy:skipped:command:end', command)
+
         return next()
       }
 
@@ -287,11 +295,18 @@ export class CommandQueue extends Queue<Command> {
         // trigger queue is almost finished
         Cypress.action('cy:command:queue:before:end')
 
+        // If we're enabled experimentalSessionAndOrigin we no longer have to wait for stability at the end of the command queue.
+        if (Cypress.config('experimentalSessionAndOrigin')) {
+          Cypress.action('cy:command:queue:end')
+
+          return null
+        }
+
         // we need to wait after all commands have
         // finished running if the application under
         // test is no longer stable because we cannot
         // move onto the next test until its finished
-        return this.whenStable(() => {
+        return this.stability.whenStableOrAnticipatingCrossOriginResponse(() => {
           Cypress.action('cy:command:queue:end')
 
           return null
@@ -301,6 +316,12 @@ export class CommandQueue extends Queue<Command> {
       // store the previous timeout
       const prevTimeout = this.timeout()
 
+      // If we have created a timeout but are in an unstable state, clear the
+      // timeout in favor of the on load timeout already running.
+      if (!cy.state('isStable')) {
+        cy.clearTimeout()
+      }
+
       // store the current runnable
       const runnable = this.state('runnable')
 
diff --git a/packages/driver/src/cypress/commands.ts b/packages/driver/src/cypress/commands.ts
index 517f3cd08498..8fa9b65cacd7 100644
--- a/packages/driver/src/cypress/commands.ts
+++ b/packages/driver/src/cypress/commands.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import { allCommands } from '../cy/commands'
-import { addCommand } from '../cy/net-stubbing'
+import { addCommand as addNetstubbingCommand } from '../cy/net-stubbing'
 import $errUtils from './error_utils'
 import $stackUtils from './stack_utils'
 
@@ -10,7 +10,7 @@ const builtInCommands = [
   // `default` is necessary if a file uses `export default` syntax.
   // @ts-ignore
   ..._.toArray(allCommands).map((c) => c.default || c),
-  addCommand,
+  addNetstubbingCommand,
 ]
 
 const reservedCommandNames = {
diff --git a/packages/driver/src/cypress/cy.ts b/packages/driver/src/cypress/cy.ts
index ee7037479d52..a0f3a9e5ab6d 100644
--- a/packages/driver/src/cypress/cy.ts
+++ b/packages/driver/src/cypress/cy.ts
@@ -2,7 +2,6 @@
 import _ from 'lodash'
 import Promise from 'bluebird'
 import debugFn from 'debug'
-import { registerFetch } from 'unfetch'
 
 import $dom from '../dom'
 import $utils from './utils'
@@ -26,12 +25,12 @@ import { create as createTimer, ITimer } from '../cy/timers'
 import { create as createTimeouts, ITimeouts } from '../cy/timeouts'
 import { create as createRetries, IRetries } from '../cy/retries'
 import { create as createStability, IStability } from '../cy/stability'
-import $selection from '../dom/selection'
 import { create as createSnapshots, ISnapshots } from '../cy/snapshots'
 import { $Command } from './command'
 import { CommandQueue } from './command_queue'
 import { initVideoRecorder } from '../cy/video-recorder'
 import { TestConfigOverride } from '../cy/testConfigOverrides'
+import { create as createOverrides, IOverrides } from '../cy/overrides'
 import { historyNavigationTriggeredHashChange } from '../cy/navigation'
 import { EventEmitter2 } from 'eventemitter2'
 
@@ -69,9 +68,13 @@ const setTopOnError = function (Cypress, cy: $Cy) {
 
   curCy = cy
 
-  // prevent overriding top.onerror twice when loading more than one
-  // instance of test runner.
-  if (top.__alreadySetErrorHandlers__) {
+  try {
+    // prevent overriding top.onerror twice when loading more than one
+    // instance of test runner.
+    if (top.__alreadySetErrorHandlers__) {
+      return
+    }
+  } catch (err) {
     return
   }
 
@@ -122,6 +125,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
   config: any
   Cypress: any
   Cookies: any
+
   devices: {
     keyboard: Keyboard
     mouse: Mouse
@@ -133,12 +137,15 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
 
   isStable: IStability['isStable']
   whenStable: IStability['whenStable']
+  isAnticipatingCrossOriginResponseFor: IStability['isAnticipatingCrossOriginResponseFor']
+  whenStableOrAnticipatingCrossOriginResponse: IStability['whenStableOrAnticipatingCrossOriginResponse']
 
   assert: IAssertions['assert']
   verifyUpcomingAssertions: IAssertions['verifyUpcomingAssertions']
 
   retry: IRetries['retry']
 
+  $$: IJQuery['$$']
   getRemotejQueryInstance: IJQuery['getRemotejQueryInstance']
 
   getRemoteLocation: ILocation['getRemoteLocation']
@@ -195,6 +202,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
   documentHasFocus: ReturnType<typeof createFocused>['documentHasFocus']
   interceptFocus: ReturnType<typeof createFocused>['interceptFocus']
   interceptBlur: ReturnType<typeof createFocused>['interceptBlur']
+  overrides: IOverrides
 
   private testConfigOverride: TestConfigOverride
   private commandFns: Record<string, Function> = {}
@@ -215,7 +223,6 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     this.testConfigOverride = new TestConfigOverride()
 
     // bind methods
-    this.$$ = this.$$.bind(this)
     this.isCy = this.isCy.bind(this)
     this.fail = this.fail.bind(this)
     this.isStopped = this.isStopped.bind(this)
@@ -238,10 +245,12 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     this.timeout = timeouts.timeout
     this.clearTimeout = timeouts.clearTimeout
 
-    const statility = createStability(Cypress, state)
+    const stability = createStability(Cypress, state)
 
-    this.isStable = statility.isStable
-    this.whenStable = statility.whenStable
+    this.isStable = stability.isStable
+    this.whenStable = stability.whenStable
+    this.isAnticipatingCrossOriginResponseFor = stability.isAnticipatingCrossOriginResponseFor
+    this.whenStableOrAnticipatingCrossOriginResponse = stability.whenStableOrAnticipatingCrossOriginResponse
 
     const assertions = createAssertions(Cypress, this)
 
@@ -258,6 +267,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
 
     const jquery = createJQuery(state)
 
+    this.$$ = jquery.$$
     this.getRemotejQueryInstance = jquery.getRemotejQueryInstance
 
     const location = createLocation(state)
@@ -336,7 +346,9 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     this.onCssModified = snapshots.onCssModified
     this.onBeforeWindowLoad = snapshots.onBeforeWindowLoad
 
-    this.queue = new CommandQueue(state, this.timeout, this.whenStable, this.cleanup, this.fail, this.isCy)
+    this.overrides = createOverrides(state, config, focused, snapshots)
+
+    this.queue = new CommandQueue(state, this.timeout, stability, this.cleanup, this.fail, this.isCy)
 
     setTopOnError(Cypress, this)
 
@@ -344,14 +356,10 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     specWindow.cy = this
 
     extendEvents(this)
-  }
-
-  $$ (selector, context) {
-    if (context == null) {
-      context = this.state('document')
-    }
 
-    return $dom.query(selector, context)
+    Cypress.on('enqueue:command', (attrs: Cypress.EnqueuedCommand) => {
+      this.enqueue(attrs)
+    })
   }
 
   isCy (val) {
@@ -363,6 +371,11 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
   }
 
   fail (err, options: { async?: boolean } = {}) {
+    // if an onFail handler is provided, call this in its place (currently used for cross-origin support)
+    if (this.state('onFail')) {
+      return this.state('onFail')(err)
+    }
+
     // this means the error has already been through this handler and caught
     // again. but we don't need to run it through again, so we can re-throw
     // it and it will fail the test as-is
@@ -496,7 +509,9 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
 
       // if setting these props failed then we know we're in a cross origin failure
       try {
-        setWindowDocumentProps(getContentWindow($autIframe), this.state)
+        const autWindow = getContentWindow($autIframe)
+
+        setWindowDocumentProps(autWindow, this.state)
 
         // we may need to update the url now
         this.urlNavigationEvent('load')
@@ -505,19 +520,55 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
         // because they would have been automatically applied during
         // onBeforeAppWindowLoad, but in the case where we visited
         // about:blank in a visit, we do need these
-        this.contentWindowListeners(getContentWindow($autIframe))
+        this.contentWindowListeners(autWindow)
+
+        // stability is signalled after the window:load event to give event
+        // listeners time to be invoked prior to moving on, but not if
+        // there is a cross-origin error and the cy.origin API is
+        // not utilized
+        try {
+          this.Cypress.action('app:window:load', this.state('window'))
+          const remoteLocation = this.getRemoteLocation()
+
+          cy.state('autOrigin', remoteLocation.originPolicy)
+          this.Cypress.primaryOriginCommunicator.toAllSpecBridges('window:load', { url: remoteLocation.href })
+        } catch (err: any) {
+          // this catches errors thrown by user-registered event handlers
+          // for `window:load`. this is used in the `catch` below so they
+          // aren't mistaken as cross-origin errors
+          err.isFromWindowLoadEvent = true
+
+          throw err
+        } finally {
+          this.isStable(true, 'load')
+        }
+      } catch (err: any) {
+        if (err.isFromWindowLoadEvent) {
+          delete err.isFromWindowLoadEvent
 
-        this.Cypress.action('app:window:load', this.state('window'))
+          // the user's window:load handler threw an error, so propagate that
+          // and fail the test
+          const r = this.state('reject')
+
+          if (r) {
+            return r(err)
+          }
+        }
+
+        // we failed setting the remote window props which
+        // means the page navigated to a different origin
+
+        // With cross-origin support, this is an expected error that may or may
+        // not be bad, we will rely on the page load timeout to throw if we
+        // don't end up where we expect to be.
+        if (this.config('experimentalSessionAndOrigin') && err.name === 'SecurityError') {
+          return
+        }
 
-        // we are now stable again which is purposefully
-        // the last event we call here, to give our event
-        // listeners time to be invoked prior to moving on
-        return this.isStable(true, 'load')
-      } catch (err) {
         let e = err
 
         // we failed setting the remote window props
-        // which means we're in a cross domain failure
+        // which means we're in a cross origin failure
         // check first to see if you have a callback function
         // defined and let the page load change the error
         const onpl = this.state('onPageLoadErr')
@@ -526,12 +577,15 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
           e = onpl(e)
         }
 
-        // and now reject with it
-        const r = this.state('reject')
+        this.Cypress.emit('internal:window:load', {
+          type: 'cross:origin:failure',
+          error: e,
+        })
 
-        if (r) {
-          return r(e)
-        }
+        // need async:true since this is outside the command queue promise
+        // chain and cy.fail needs to know to use the reference to the
+        // last command to reject it
+        this.fail(e, { async: true })
       }
     })
   }
@@ -662,6 +716,19 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
         }
 
         cy.queue.run()
+        .then(() => {
+          const onQueueEnd = cy.state('onQueueEnd')
+
+          if (onQueueEnd) {
+            onQueueEnd()
+          }
+        })
+        .catch(() => {
+          // errors from the queue are propagated to cy.fail by the queue itself
+          // and can be safely ignored here. omitting this catch causes
+          // unhandled rejections to be logged because Bluebird sees a promise
+          // chain with no catch handler
+        })
       }
 
       return chain
@@ -774,7 +841,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
 
     this.contentWindowListeners(contentWindow)
 
-    this.wrapNativeMethods(contentWindow)
+    this.overrides.wrapNativeMethods(contentWindow)
 
     this.onBeforeWindowLoad()
   }
@@ -835,13 +902,9 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
 
     // reset the promise again
     this.state('promise', undefined)
-
     this.state('hookId', hookId)
-
     this.state('runnable', runnable)
-
     this.state('test', $utils.getTestFromRunnable(runnable))
-
     this.state('ctx', runnable.ctx)
 
     const { fn } = runnable
@@ -971,66 +1034,6 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     }
   }
 
-  private wrapNativeMethods (contentWindow) {
-    try {
-      // return null to trick contentWindow into thinking
-      // its not been iframed if modifyObstructiveCode is true
-      if (this.config('modifyObstructiveCode')) {
-        Object.defineProperty(contentWindow, 'frameElement', {
-          get () {
-            return null
-          },
-        })
-      }
-
-      const cy = this
-
-      contentWindow.HTMLElement.prototype.focus = function (focusOption) {
-        return cy.interceptFocus(this, contentWindow, focusOption)
-      }
-
-      contentWindow.HTMLElement.prototype.blur = function () {
-        return cy.interceptBlur(this)
-      }
-
-      contentWindow.SVGElement.prototype.focus = function (focusOption) {
-        return cy.interceptFocus(this, contentWindow, focusOption)
-      }
-
-      contentWindow.SVGElement.prototype.blur = function () {
-        return cy.interceptBlur(this)
-      }
-
-      contentWindow.HTMLInputElement.prototype.select = function () {
-        return $selection.interceptSelect.call(this)
-      }
-
-      contentWindow.document.hasFocus = function () {
-        return cy.documentHasFocus.call(this)
-      }
-
-      const cssModificationSpy = function (original, ...args) {
-        cy.onCssModified(this.href)
-
-        return original.apply(this, args)
-      }
-
-      const { insertRule } = contentWindow.CSSStyleSheet.prototype
-      const { deleteRule } = contentWindow.CSSStyleSheet.prototype
-
-      contentWindow.CSSStyleSheet.prototype.insertRule = _.wrap(insertRule, cssModificationSpy)
-      contentWindow.CSSStyleSheet.prototype.deleteRule = _.wrap(deleteRule, cssModificationSpy)
-
-      if (this.config('experimentalFetchPolyfill')) {
-        // drop "fetch" polyfill that replaces it with XMLHttpRequest
-        // from the app iframe that we wrap for network stubbing
-        contentWindow.fetch = registerFetch(contentWindow)
-        // flag the polyfill to test this experimental feature easier
-        this.state('fetchPolyfilled', true)
-      }
-    } catch (error) { } // eslint-disable-line no-empty
-  }
-
   private warnMixingPromisesAndCommands () {
     const title = this.state('runnable').fullTitle()
 
@@ -1101,6 +1104,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
       onSubmit (e) {
         return cy.Cypress.action('app:form:submitted', e)
       },
+      onLoad () {},
       onBeforeUnload (e) {
         cy.isStable(false, 'beforeunload')
 
@@ -1137,7 +1141,7 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     })
   }
 
-  private enqueue (obj) {
+  private enqueue (obj: PartialBy<Cypress.EnqueuedCommand, 'id'>) {
     // if we have a nestedIndex it means we're processing
     // nested commands and need to insert them into the
     // index past the current index as opposed to
diff --git a/packages/driver/src/cypress/error_messages.ts b/packages/driver/src/cypress/error_messages.ts
index dae7cf1945c6..14b0b35c97a9 100644
--- a/packages/driver/src/cypress/error_messages.ts
+++ b/packages/driver/src/cypress/error_messages.ts
@@ -903,6 +903,12 @@ export default {
       return `Timed out retrying after ${ms}ms: `
     },
     test_stopped: 'Cypress test was stopped while running this command.',
+    cross_origin_command ({ commandOrigin, autOrigin }) {
+      return stripIndent`\
+        The command was expected to run against origin \`${commandOrigin }\` but the application is at origin \`${autOrigin}\`.
+
+        This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly.`
+    },
   },
 
   mocha: {
@@ -1004,6 +1010,29 @@ export default {
 
         If so, increase \`redirectionLimit\` value in configuration.`
     },
+    cross_origin_load_timed_out ({ ms, projectRoot, configFile, crossOriginUrl, originPolicies }) {
+      return {
+        message: stripIndent`\
+          Timed out after waiting \`${ms}ms\` for your remote page to load on origin(s):
+
+          - ${originPolicies.map((originPolicy) => `\`${originPolicy}\``).join('\n       -')}
+
+          A cross-origin request for \`${crossOriginUrl.href}\` was detected.
+
+          A command that triggers cross-origin navigation must be immediately followed by a ${cmd('origin')} command:
+
+          \`cy.origin('${crossOriginUrl.originPolicy}', () => {\`
+          \`  <commands targeting ${crossOriginUrl.origin} go here>\`
+          \`})\`
+
+          If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\` value in ${formatConfigFile(projectRoot, configFile)} to wait longer.
+
+          Browsers will not fire the \`load\` event until all stylesheets and scripts are done downloading.
+
+          When this \`load\` event occurs, Cypress will continue running commands.`,
+        docsUrl: 'https://on.cypress.io/origin',
+      }
+    },
   },
 
   net_stubbing: {
@@ -1124,6 +1153,127 @@ export default {
     no_global: `Angular global (\`window.angular\`) was not found in your window. You cannot use ${cmd('ng')} methods without angular.`,
   },
 
+  origin: {
+    docsUrl: 'https://on.cypress.io/origin',
+    experiment_not_enabled: {
+      message: `${cmd('origin')} requires enabling the experimentalSessionAndOrigin flag`,
+    },
+    invalid_url_argument: {
+      message: `${cmd('origin')} requires the first argument to be either a url (\`https://www.example.com/path\`) or a domain name (\`example.com\`). Query parameters are not allowed. You passed: \`{{arg}}\``,
+    },
+    invalid_options_argument: {
+      message: `${cmd('origin')} requires the 'options' argument to be an object. You passed: \`{{arg}}\``,
+    },
+    extraneous_options_argument ({ extraneousKeys, validOptionKeys }) {
+      return stripIndent`\
+        ${cmd('origin')} detected extraneous keys in your options configuration.
+
+        The extraneous keys detected were:
+
+          > \`${extraneousKeys}\`
+
+        Valid keys include the following:
+
+          > \`${validOptionKeys}\`
+      `
+    },
+    invalid_fn_argument: {
+      message: `${cmd('origin')} requires the last argument to be a function. You passed: \`{{arg}}\``,
+    },
+    run_origin_fn_errored: {
+      message: stripIndent`
+      {{error}}
+
+      This is likely because the arguments specified are not serializable. Note that functions and DOM objects cannot be serialized.`,
+    },
+    ran_origin_fn_reference_error: {
+      message: stripIndent`
+        {{error}}
+
+        Variables must either be defined within the ${cmd('origin')} command or passed in using the args option.`,
+    },
+    callback_mixes_sync_and_async: {
+      message: stripIndent`\
+        ${cmd('origin')} failed because you are mixing up async and sync code.
+
+        In your callback function you invoked one or more cy commands but then returned a synchronous value.
+
+        Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.
+
+        You likely forgot to properly chain the cy commands using another \`cy.then()\`.
+
+        The value you synchronously returned was: \`{{value}}\``,
+    },
+    failed_to_serialize_object: {
+      message: stripIndent`\
+      ${cmd('origin')} could not serialize the subject due to one of its properties not being supported by the structured clone algorithm.
+
+      To properly serialize this subject, remove or serialize any unsupported properties.`,
+    },
+    failed_to_serialize_function: {
+      message: stripIndent`\
+      ${cmd('origin')} could not serialize the subject due to functions not being supported by the structured clone algorithm.`,
+    },
+    failed_to_serialize_symbol: {
+      message: stripIndent`\
+      ${cmd('origin')} could not serialize the subject due to symbols not being supported by the structured clone algorithm.`,
+    },
+    failed_to_serialize_or_map_thrown_value: {
+      message: stripIndent`\
+      ${cmd('origin')} could not serialize the thrown value. Please make sure the value being thrown is supported by the structured clone algorithm.`,
+    },
+    unsupported: {
+      route: {
+        message: `${cmd('route')} has been deprecated and its use is not supported in the ${cmd('origin')} callback. Consider using ${cmd('intercept')} (outside of the callback) instead.`,
+        docsUrl: 'https://on.cypress.io/intercept',
+      },
+      server: {
+        message: `${cmd('server')} has been deprecated and its use is not supported in the ${cmd('origin')} callback. Consider using ${cmd('intercept')} (outside of the callback) instead.`,
+        docsUrl: 'https://on.cypress.io/intercept',
+      },
+      Server: {
+        message: `\`Cypress.Server.*\` has been deprecated and its use is not supported in the ${cmd('origin')} callback. Consider using ${cmd('intercept')} (outside of the callback) instead.`,
+        docsUrl: 'https://on.cypress.io/intercept',
+      },
+      Cookies_preserveOnce: {
+        message: `\`Cypress.Cookies.preserveOnce\` use is not supported in the ${cmd('origin')} callback. Consider using ${cmd('session')} (outside of the callback) instead.`,
+        docsUrl: 'https://on.cypress.io/session',
+      },
+      origin: {
+        message: `${cmd('origin')} use is not currently supported in the ${cmd('origin')} callback, but is planned for a future release. Please 👍 the following issue and leave a comment with your use-case:`,
+        docsUrl: 'https://on.cypress.io/github-issue/20718',
+      },
+      intercept: {
+        message: `${cmd('intercept')} use is not supported in the ${cmd('origin')} callback. Consider using it outside of the callback instead. Otherwise, please 👍 the following issue and leave a comment with your use-case:`,
+        docsUrl: 'https://on.cypress.io/github-issue/20720',
+      },
+      session: {
+        message: `${cmd('session')} use is not supported in the ${cmd('origin')} callback. Consider using it outside of the callback instead. Otherwise, please 👍 the following issue and leave a comment with your use-case:`,
+        docsUrl: 'https://on.cypress.io/github-issue/20721',
+      },
+      Cypress_session: {
+        message: `\`Cypress.session.*\` methods are not supported in the ${cmd('switchToDomain')} callback. Consider using them outside of the callback instead.`,
+        docsUrl: 'https://on.cypress.io/session-api',
+      },
+    },
+    cannot_visit_previous_origin (args) {
+      return {
+        message: stripIndent`\
+          ${cmd('visit')} failed because you are attempting to visit a URL from a previous origin inside of ${cmd('origin')}.
+
+          Instead of placing the ${cmd('visit')} inside of ${cmd('origin')}, the ${cmd('visit')} should be placed outside of the ${cmd('origin')} block.
+
+          \`<commands targeting ${args.attemptedUrl.origin} go here>\`
+
+          \`cy.origin('${args.previousUrl.originPolicy}', () => {\`
+          \`  <commands targeting ${args.previousUrl.origin} go here>\`
+          \`})\`
+
+          \`cy.visit('${args.originalUrl}')\``,
+      }
+    },
+  },
+
   proxy: {
     js_rewriting_failed: stripIndent`\
       An error occurred in the Cypress proxy layer while rewriting your source code. This is a bug in Cypress. Open an issue if you see this message.
@@ -1522,9 +1672,18 @@ export default {
     validate_callback_false: {
       message: 'Your `cy.session` **validate** callback {{reason}}',
     },
-    experimentNotEnabled: {
-      message: 'experimentalSessionSupport is not enabled. You must enable the experimentalSessionSupport flag in order to use Cypress session commands',
-      docsUrl: 'https://on.cypress.io/session',
+    experimentNotEnabled (experimentalSessionSupport) {
+      if (experimentalSessionSupport) {
+        return {
+          message: stripIndent`
+          ${cmd('session')} requires enabling the \`experimentalSessionAndOrigin\` flag. The \`experimentalSessionSupport\` flag was enabled but was removed in Cypress version 9.6.0.`,
+        }
+      }
+
+      return {
+        message: `${cmd('session')} requires enabling the \`experimentalSessionAndOrigin\` flag`,
+        docsUrl: 'https://on.cypress.io/session',
+      }
     },
     session: {
       duplicateId: {
@@ -1983,26 +2142,42 @@ export default {
         \`url\` from the \`url\` parameter: {{url}}`,
       docsUrl: 'https://on.cypress.io/visit',
     },
-    cannot_visit_different_origin: {
-      message: stripIndent`\
-        ${cmd('visit')} failed because you are attempting to visit a URL that is of a different origin.
+    cannot_visit_different_origin (args) {
+      return {
+        message: stripIndent`\
+          ${cmd('visit')} failed because you are attempting to visit a URL that is of a different origin.
+
+          ${args.experimentalSessionAndOrigin ? `You likely forgot to use ${cmd('origin')}:` : `In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use ${cmd('origin')}:` }
 
-        The new URL is considered a different origin because the following parts of the URL are different:
+          ${args.isCrossOriginSpecBridge ?
+          `\`cy.origin('${args.previousUrl.originPolicy}', () => {\`
+          \`  cy.visit('${args.previousUrl}')\`
+          \`  <commands targeting ${args.previousUrl.origin} go here>\`
+          \`})\`` :
+          `\`cy.visit('${args.previousUrl}')\`
+          \`<commands targeting ${args.previousUrl.origin} go here>\``
+          }
 
-          > {{differences}}
+          \`cy.origin('${args.attemptedUrl.originPolicy}', () => {\`
+          \`  cy.visit('${args.originalUrl}')\`
+          \`  <commands targeting ${args.attemptedUrl.origin} go here>\`
+          \`})\`
 
-        You may only ${cmd('visit')} same-origin URLs within a single test.
+          The new URL is considered a different origin because the following parts of the URL are different:
 
-        The previous URL you visited was:
+            > {{differences}}
 
-          > '{{previousUrl}}'
+          You may only ${cmd('visit')} same-origin URLs within ${args.isCrossOriginSpecBridge ? cmd('origin') : 'a single test'}.
 
-        You're attempting to visit this URL:
+          The previous URL you visited was:
 
-          > '{{attemptedUrl}}'
+            > '${args.previousUrl.origin}'
 
-        You may need to restructure some of your test code to avoid this problem.`,
-      docsUrl: 'https://on.cypress.io/cannot-visit-different-origin-domain',
+          You're attempting to visit this URL:
+
+            > '${args.attemptedUrl.origin}'`,
+        docsUrl: 'https://on.cypress.io/cannot-visit-different-origin-domain',
+      }
     },
     loading_network_failed: stripIndent`\
       ${cmd('visit')} failed trying to load:
diff --git a/packages/driver/src/cypress/error_utils.ts b/packages/driver/src/cypress/error_utils.ts
index decbd3ba3bc5..94eee97065fd 100644
--- a/packages/driver/src/cypress/error_utils.ts
+++ b/packages/driver/src/cypress/error_utils.ts
@@ -260,6 +260,8 @@ const warnByPath = (errPath, options: any = {}) => {
 }
 
 export class InternalCypressError extends Error {
+  onFail?: undefined | Function
+
   constructor (message) {
     super(message)
 
@@ -275,6 +277,7 @@ export class CypressError extends Error {
   docsUrl?: string
   retry?: boolean
   userInvocationStack?: any
+  onFail?: undefined | Function
 
   constructor (message) {
     super(message)
diff --git a/packages/driver/src/cypress/location.ts b/packages/driver/src/cypress/location.ts
index 96837afd3b4c..50a24e0e5a19 100644
--- a/packages/driver/src/cypress/location.ts
+++ b/packages/driver/src/cypress/location.ts
@@ -16,6 +16,23 @@ const reFile = /^file:\/\//
 const reLocalHost = /^(localhost|0\.0\.0\.0|127\.0\.0\.1)/
 const reQueryParam = /\?[^/]+/
 
+export interface LocationObject {
+  auth: string
+  authObj?: Cypress.Auth
+  hash: string
+  href: string
+  host: string
+  hostname: string
+  origin: string
+  pathname: string
+  port: number
+  protocol: string
+  search: string
+  originPolicy: string
+  superDomain: string
+  toString: () => string
+}
+
 export class $Location {
   remote: UrlParse
 
@@ -89,13 +106,7 @@ export class $Location {
   }
 
   getOriginPolicy () {
-    // origin policy is comprised of
-    // protocol + superdomain
-    // and subdomain is not factored in
-    return _.compact([
-      `${this.getProtocol()}//${this.getSuperDomain()}`,
-      this.getPort(),
-    ]).join(':')
+    return cors.getOriginPolicy(this.remote.href)
   }
 
   getSuperDomain () {
@@ -106,7 +117,7 @@ export class $Location {
     return this.remote.toString()
   }
 
-  getObject () {
+  getObject (): LocationObject {
     return {
       auth: this.getAuth(),
       authObj: this.getAuthObj(),
@@ -249,7 +260,7 @@ export class $Location {
     return new URL(to, from).toString()
   }
 
-  static create (remote) {
+  static create (remote): LocationObject {
     const location = new $Location(remote)
 
     return location.getObject()
diff --git a/packages/driver/src/cypress/log.ts b/packages/driver/src/cypress/log.ts
index 6895af27d715..dfadf452f706 100644
--- a/packages/driver/src/cypress/log.ts
+++ b/packages/driver/src/cypress/log.ts
@@ -49,7 +49,7 @@ export const LogUtils = {
         return value()
       }
 
-      if (_.isFunction(value)) {
+      if (_.isFunction(value) || _.isSymbol(value)) {
         return value.toString()
       }
 
@@ -92,14 +92,12 @@ export const LogUtils = {
 
     return _
     .chain(tests)
-    .flatMap((test) => {
-      return [test, test.prevAttempts]
-    })
-    .flatMap<{id: number}>((tests) => {
-      return [].concat(tests.agents, tests.routes, tests.commands)
-    }).compact()
-    .union([{ id: 0 }])
-    .map('id')
+    .flatMap((test) => test.prevAttempts ? [test, ...test.prevAttempts] : [test])
+    .flatMap<{id: string}>((tests) => [].concat(tests.agents, tests.routes, tests.commands))
+    .compact()
+    .union([{ id: '0' }])
+    // id is a string in the form of 'log-origin-#', grab the number off the end.
+    .map(({ id }) => parseInt((id.match(/\d*$/) || ['0'])[0]))
     .max()
     .value()
   },
@@ -108,6 +106,10 @@ export const LogUtils = {
   setCounter: (num) => {
     return counter = num
   },
+
+  getCounter: () => {
+    return counter
+  },
 }
 
 const defaults = function (state: Cypress.State, config, obj) {
@@ -178,8 +180,10 @@ const defaults = function (state: Cypress.State, config, obj) {
     return t._currentRetry || 0
   }
 
+  counter++
+
   _.defaults(obj, {
-    id: (counter += 1),
+    id: `log-${window.location.origin}-${counter}`,
     state: 'pending',
     instrument: 'command',
     url: state('url'),
@@ -220,7 +224,7 @@ const defaults = function (state: Cypress.State, config, obj) {
   return obj
 }
 
-class Log {
+export class Log {
   cy: any
   state: Cypress.State
   config: any
@@ -441,7 +445,7 @@ class Log {
     this.obj = {
       highlightAttr: HIGHLIGHT_ATTR,
       numElements: $el.length,
-      visible: $el.length === $el.filter(':visible').length,
+      visible: this.get('visible') ?? $el.length === $el.filter(':visible').length,
     }
 
     return this.set(this.obj, { silent: true })
@@ -502,8 +506,11 @@ class Log {
 
       consoleObj[key] = _this.get('name')
 
+      // in the case a log is being recreated from the cross-origin spec bridge to the primary, consoleProps may be an Object
+      const consoleObjDefaults = _.isFunction(consoleProps) ? consoleProps.apply(this, args) : consoleProps
+
       // merge in the other properties from consoleProps
-      _.extend(consoleObj, consoleProps.apply(this, args))
+      _.extend(consoleObj, consoleObjDefaults)
 
       // TODO: right here we need to automatically
       // merge in "Yielded + Element" if there is an $el
diff --git a/packages/driver/src/cypress/proxy-logging.ts b/packages/driver/src/cypress/proxy-logging.ts
index 9a518de1f58a..c6194d0a18c0 100644
--- a/packages/driver/src/cypress/proxy-logging.ts
+++ b/packages/driver/src/cypress/proxy-logging.ts
@@ -324,13 +324,7 @@ export default class ProxyLogging {
     return proxyRequest
   }
 
-  private updateRequestWithResponse (responseReceived: BrowserResponseReceived): void {
-    const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === responseReceived.requestId)
-
-    if (!proxyRequest) {
-      return debug('unmatched responseReceived event %o', responseReceived)
-    }
-
+  private updateProxyRequestWithResponse (proxyRequest, responseReceived) {
     proxyRequest.responseReceived = responseReceived
 
     proxyRequest.updateConsoleProps()
@@ -343,6 +337,22 @@ export default class ProxyLogging {
     proxyRequest.log?.end()
   }
 
+  private updateRequestWithResponse (responseReceived: BrowserResponseReceived): void {
+    const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === responseReceived.requestId)
+
+    if (!proxyRequest) {
+      return debug('unmatched responseReceived event %o', responseReceived)
+    }
+
+    if (proxyRequest.xhr && proxyRequest.xhr.xhr.readyState !== XMLHttpRequest.DONE) {
+      proxyRequest.xhr.xhr.addEventListener('load', () => {
+        this.updateProxyRequestWithResponse(proxyRequest, responseReceived)
+      })
+    } else {
+      this.updateProxyRequestWithResponse(proxyRequest, responseReceived)
+    }
+  }
+
   private updateRequestWithError (error: RequestError): void {
     const proxyRequest = _.find(this.proxyRequests, ({ preRequest }) => preRequest.requestId === error.requestId)
 
diff --git a/packages/driver/src/cypress/runner.ts b/packages/driver/src/cypress/runner.ts
index dfd72017206a..5c8f754dc40a 100644
--- a/packages/driver/src/cypress/runner.ts
+++ b/packages/driver/src/cypress/runner.ts
@@ -1549,6 +1549,7 @@ export default {
           }
 
           cy.state('duringUserTestExecution', false)
+          Cypress.primaryOriginCommunicator.toAllSpecBridges('sync:state', { 'duringUserTestExecution': false })
 
           // our runnable is about to run, so let cy know. this enables
           // us to always have a correct runnable set even when we are
diff --git a/packages/driver/src/cypress/utils.ts b/packages/driver/src/cypress/utils.ts
index 378307718790..ef4f7d0f576e 100644
--- a/packages/driver/src/cypress/utils.ts
+++ b/packages/driver/src/cypress/utils.ts
@@ -10,7 +10,6 @@ import { $Location } from './location'
 
 const tagOpen = /\[([a-z\s='"-]+)\]/g
 const tagClosed = /\[\/([a-z]+)\]/g
-const quotesRe = /('|")/g
 
 const defaultOptions = {
   delay: 10,
@@ -267,12 +266,6 @@ export default {
     }
   },
 
-  escapeQuotes (text) {
-    // convert to str and escape any single
-    // or double quotes
-    return (`${text}`).replace(quotesRe, '\\$1')
-  },
-
   normalizeNumber (num) {
     const parsed = Number(num)
 
diff --git a/packages/driver/src/dom/animation.ts b/packages/driver/src/dom/animation.ts
new file mode 100644
index 000000000000..e18c2b2c2a31
--- /dev/null
+++ b/packages/driver/src/dom/animation.ts
@@ -0,0 +1,21 @@
+import $ from 'jquery'
+
+function addCssAnimationDisabler ($body) {
+  $(`
+    <style id="__cypress-animation-disabler">
+      *, *:before, *:after {
+        transition-property: none !important;
+        animation: none !important;
+      }
+    </style>
+  `).appendTo($body)
+}
+
+function removeCssAnimationDisabler ($body) {
+  $body.find('#__cypress-animation-disabler').remove()
+}
+
+export default {
+  addCssAnimationDisabler,
+  removeCssAnimationDisabler,
+}
diff --git a/packages/driver/src/dom/blackout.ts b/packages/driver/src/dom/blackout.ts
new file mode 100644
index 000000000000..bf8e991b475a
--- /dev/null
+++ b/packages/driver/src/dom/blackout.ts
@@ -0,0 +1,58 @@
+import $ from 'jquery'
+import $dimensions from '@packages/runner-shared/src/dimensions'
+
+const resetStyles = `
+  border: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+`
+
+const styles = (styleString) => {
+  return styleString.replace(/\s*\n\s*/g, '')
+}
+
+function addBlackoutForElement ($body, $el) {
+  const dimensions = $dimensions.getElementDimensions($el)
+  const width = dimensions.widthWithBorder
+  const height = dimensions.heightWithBorder
+  const top = dimensions.offset.top
+  const left = dimensions.offset.left
+
+  const style = styles(`
+    ${resetStyles}
+    position: absolute;
+    top: ${top}px;
+    left: ${left}px;
+    width: ${width}px;
+    height: ${height}px;
+    background-color: black;
+    z-index: 2147483647;
+  `)
+
+  $(`<div class="__cypress-blackout" style="${style}">`).appendTo($body)
+}
+
+function addBlackouts ($body, selector) {
+  let $el
+
+  try {
+    $el = $body.find(selector)
+    if (!$el.length) return
+  } catch (err) {
+    // if it's an invalid selector, just ignore it
+    return
+  }
+
+  $el.each(function (this: HTMLElement) {
+    addBlackoutForElement($body, $(this))
+  })
+}
+
+function removeBlackouts ($body) {
+  $body.find('.__cypress-blackout').remove()
+}
+
+export default {
+  addBlackouts,
+  removeBlackouts,
+}
diff --git a/packages/driver/src/dom/coordinates.ts b/packages/driver/src/dom/coordinates.ts
index 29ca38d389d7..976f6665e9ef 100644
--- a/packages/driver/src/dom/coordinates.ts
+++ b/packages/driver/src/dom/coordinates.ts
@@ -7,12 +7,31 @@ const getElementAtPointFromViewport = (doc, x, y) => {
   return $elements.elementFromPoint(doc, x, y)
 }
 
-const isAutIframe = (win) => {
+const isAUTFrame = (win) => {
   const parent = win.parent
 
   // https://github.com/cypress-io/cypress/issues/6412
   // ensure the parent is a Window before checking prop
-  return $window.isWindow(parent) && !$elements.getNativeProp(parent, 'frameElement')
+  if (!$window.isWindow(parent)) {
+    return false
+  }
+
+  try {
+    // window.frameElement only exists on iframe windows, so if it doesn't
+    // exist on parent, it must be the top frame, and `win` is the AUT
+    return !$elements.getNativeProp(parent, 'frameElement')
+  } catch (err) {
+    // if the AUT is cross-origin, accessing parent.frameElement will throw
+    // a cross-origin error, meaning this is the AUT
+    // NOTE: this will need to be updated once we add support for
+    // cross-origin iframes
+    if (err.name !== 'SecurityError') {
+      // re-throw any error that's not a cross-origin error
+      throw err
+    }
+
+    return true
+  }
 }
 
 const getFirstValidSizedRect = (el) => {
@@ -98,7 +117,7 @@ const getElementPositioning = ($el: JQuery<HTMLElement> | HTMLElement): ElementP
     // https://github.com/cypress-io/cypress/issues/6412
     // ensure the parent is a Window before checking prop
     // walk up from a nested iframe so we continually add the x + y values
-    while ($window.isWindow(curWindow) && !isAutIframe(curWindow) && curWindow.parent !== curWindow) {
+    while ($window.isWindow(curWindow) && !isAUTFrame(curWindow) && curWindow.parent !== curWindow) {
       frame = $elements.getNativeProp(curWindow, 'frameElement')
 
       if (curWindow && frame) {
@@ -375,4 +394,6 @@ export default {
   getElementCoordinatesByPosition,
 
   getElementCoordinatesByPositionRelativeToXY,
+
+  isAUTFrame,
 }
diff --git a/packages/driver/src/dom/elements/detached.ts b/packages/driver/src/dom/elements/detached.ts
index 6864d45fefc4..fe676233d6c2 100644
--- a/packages/driver/src/dom/elements/detached.ts
+++ b/packages/driver/src/dom/elements/detached.ts
@@ -9,7 +9,7 @@ export const isDetached = ($el) => {
 
 export const isAttached = function ($el) {
   // if we're being given window
-  // then these are automaticallyed attached
+  // then these are automatically attached
   if ($window.isWindow($el)) {
     // there is a code path when forcing focus and
     // blur on the window where this check is necessary.
diff --git a/packages/driver/src/dom/elements/find.ts b/packages/driver/src/dom/elements/find.ts
index 6669a9190111..8ac5466aba1b 100644
--- a/packages/driver/src/dom/elements/find.ts
+++ b/packages/driver/src/dom/elements/find.ts
@@ -4,7 +4,8 @@ import $document from '../document'
 import $jquery from '../jquery'
 import { getTagName } from './elementHelpers'
 import { isWithinShadowRoot, getShadowElementFromPoint } from './shadow'
-import { normalizeWhitespaces, escapeQuotes } from './utils'
+import { normalizeWhitespaces } from './utils'
+import { escapeQuotes, escapeBackslashes } from '../../util/escape'
 
 /**
  * Find Parents relative to an initial element
@@ -228,7 +229,9 @@ export const getContainsSelector = (text, filter = '', options: {
 } = {}) => {
   const $expr = $.expr[':']
 
-  const escapedText = escapeQuotes(text)
+  const escapedText = escapeQuotes(
+    escapeBackslashes(text),
+  )
 
   // they may have written the filter as
   // comma separated dom els, so we want to search all
diff --git a/packages/driver/src/dom/elements/utils.ts b/packages/driver/src/dom/elements/utils.ts
index c319dcceab1a..66238c2b0d33 100644
--- a/packages/driver/src/dom/elements/utils.ts
+++ b/packages/driver/src/dom/elements/utils.ts
@@ -5,7 +5,6 @@ import $window from '../window'
 import $document from '../document'
 
 const whitespaces = /\s+/g
-const quotesRe = /('|")/g
 
 // When multiple space characters are considered as a single whitespace in all tags except <pre>.
 export const normalizeWhitespaces = (elem) => {
@@ -29,12 +28,6 @@ export const isSelector = ($el: JQuery<HTMLElement>, selector) => {
   return $el.is(selector)
 }
 
-export function escapeQuotes (text) {
-  // convert to str and escape any single
-  // or double quotes
-  return (`${text}`).replace(quotesRe, '\\$1')
-}
-
 export function switchCase (value, casesObj, defaultKey = 'default') {
   if (_.has(casesObj, value)) {
     return _.result(casesObj, value)
diff --git a/packages/driver/src/dom/index.ts b/packages/driver/src/dom/index.ts
index 92bbc4bd0ea8..4018e3e6ed4f 100644
--- a/packages/driver/src/dom/index.ts
+++ b/packages/driver/src/dom/index.ts
@@ -5,6 +5,8 @@ import $elements from './elements'
 import $coordinates from './coordinates'
 import $selection from './selection'
 import $visibility from './visibility'
+import $blackout from './blackout'
+import $animation from './animation'
 
 const { isWindow, getWindowByElement } = $window
 const { isDocument, getDocumentFromElement } = $document
@@ -13,6 +15,8 @@ const { isVisible, isHidden, isStrictlyHidden, isHiddenByAncestors, getReasonIsH
 const { isInputType, isFocusable, isElement, isScrollable, isFocused, stringify, getElements, getContainsSelector, getFirstDeepestElement, getInputFromLabel, isDetached, isAttached, isTextLike, isSelector, isDescendent, getFirstFixedOrStickyPositionParent, getFirstStickyPositionParent, getFirstScrollableParent, isUndefinedOrHTMLBodyDoc, elementFromPoint, getParent, findAllShadowRoots, isWithinShadowRoot, getHostContenteditable } = $elements
 const { getCoordsByPosition, getElementPositioning, getElementCoordinatesByPosition, getElementAtPointFromViewport, getElementCoordinatesByPositionRelativeToXY } = $coordinates
 const { getSelectionBounds } = $selection
+const { addBlackouts, removeBlackouts } = $blackout
+const { removeCssAnimationDisabler, addCssAnimationDisabler } = $animation
 
 const isDom = (obj) => {
   return isElement(obj) || isWindow(obj) || isDocument(obj)
@@ -24,6 +28,10 @@ const isDom = (obj) => {
 // purposes or for overriding. Everything else
 // can be tucked away behind these interfaces.
 export default {
+  removeBlackouts,
+  addBlackouts,
+  removeCssAnimationDisabler,
+  addCssAnimationDisabler,
   wrap,
   isW3CFocusable,
   isW3CRendered,
diff --git a/packages/driver/src/util/config.ts b/packages/driver/src/util/config.ts
new file mode 100644
index 000000000000..00dc84e86b67
--- /dev/null
+++ b/packages/driver/src/util/config.ts
@@ -0,0 +1,62 @@
+import _ from 'lodash'
+import { options } from '@packages/config'
+import { preprocessForSerialization } from './serialization'
+
+/**
+ * Mutates the config/env object serialized from the other origin to omit read-only values
+ * to prevent trying to update differences in read-only config. This function does mutate this
+ * serialized config/env by reference, which should be ok since this object is a clone
+ * of what is being received back from the 'other' origin.
+ *
+ * @param objectLikeConfig the config/env object to omit read-only values from.
+ * @returns a reference to the config/env object passed in
+ */
+const omitConfigReadOnlyDifferences = (objectLikeConfig: Cypress.ObjectLike) => {
+  Object.keys(objectLikeConfig).forEach((key) => {
+    if (options.find((option) => option.name === key)?.canUpdateDuringTestTime === false) {
+      delete objectLikeConfig[key]
+    }
+  })
+
+  return objectLikeConfig
+}
+
+/**
+ * Takes a full config object from a different origin, finds the differences in the current config, and updates the config for the current origin.
+ * @param config The full config object from the other origin, serialized
+ * @param env The full env object from the other origin, serialized
+ * @returns Cypress.ObjectLike
+ */
+const syncToCurrentOrigin = (valuesFromOtherOrigin: Cypress.ObjectLike, valuesFromCurrentOrigin: Cypress.ObjectLike): Cypress.ObjectLike => {
+  // @ts-ignore
+  const shallowDifferencesInConfig = _.omitBy(valuesFromOtherOrigin, (value: any, key: string) => {
+    const valueToSync = value
+    const currentOriginValue = valuesFromCurrentOrigin[key]
+
+    // if the values being compared are objects, do a value comparison to see if the contents of each object are identical
+    return _.isEqual(valueToSync, currentOriginValue)
+  })
+
+  return shallowDifferencesInConfig
+}
+
+export const syncConfigToCurrentOrigin = (config: Cypress.Config) => {
+  const shallowConfigDiff = syncToCurrentOrigin(config, Cypress.config())
+  const valuesToSync = omitConfigReadOnlyDifferences(shallowConfigDiff)
+
+  Cypress.config(valuesToSync)
+}
+
+export const syncEnvToCurrentOrigin = (env: Cypress.ObjectLike) => {
+  const shallowConfigDiff = syncToCurrentOrigin(env, Cypress.env())
+
+  Cypress.env(shallowConfigDiff)
+}
+
+export const preprocessConfig = (config: Cypress.Config) => {
+  return preprocessForSerialization(config) as Cypress.Config
+}
+
+export const preprocessEnv = (env: Cypress.ObjectLike) => {
+  return preprocessForSerialization(env) as Cypress.Config
+}
diff --git a/packages/driver/src/util/escape.ts b/packages/driver/src/util/escape.ts
new file mode 100644
index 000000000000..ae6633f5a0fc
--- /dev/null
+++ b/packages/driver/src/util/escape.ts
@@ -0,0 +1,13 @@
+const quotesRe = /('|")/g
+const backslashRe = /\\/g
+
+export function escapeQuotes (text) {
+  // convert to str and escape any single
+  // or double quotes
+  return (`${text}`).replace(quotesRe, '\\$1')
+}
+
+export function escapeBackslashes (text) {
+  // convert to str and escape any backslashes
+  return (`${text}`).replace(backslashRe, '\\\\')
+}
diff --git a/packages/driver/src/util/queue.ts b/packages/driver/src/util/queue.ts
index 4a1564979d3f..1923086f51b2 100644
--- a/packages/driver/src/util/queue.ts
+++ b/packages/driver/src/util/queue.ts
@@ -77,7 +77,9 @@ export class Queue<T> {
       // have to go in the opposite direction from outer -> inner
       rejectOuterAndCancelInner = (err) => {
         inner.cancel()
-        reject(err)
+
+        // If this error is thrown after the promise is fulfilled, we still want to throw the error.
+        promise.isPending() ? reject(err) : onError(err)
       }
     })
     .catch(onError)
@@ -104,4 +106,16 @@ export class Queue<T> {
   get stopped () {
     return this._stopped
   }
+
+  /**
+   * Helper function to return the last item in the queue.
+   * @returns The last item or undefined if the queue is empty.
+   */
+  last (): T | undefined {
+    if (this.length < 1) {
+      return undefined
+    }
+
+    return this.at(this.length - 1)
+  }
 }
diff --git a/packages/driver/src/util/serialization/index.ts b/packages/driver/src/util/serialization/index.ts
new file mode 100644
index 000000000000..32cfc3ef353e
--- /dev/null
+++ b/packages/driver/src/util/serialization/index.ts
@@ -0,0 +1,165 @@
+import _ from 'lodash'
+import structuredClonePonyfill from 'core-js-pure/actual/structured-clone'
+import $stackUtils from '../../cypress/stack_utils'
+import $errUtils from '../../cypress/error_utils'
+
+export const UNSERIALIZABLE = '__cypress_unserializable_value'
+
+// If a native structuredClone exists, use that to determine if a value can be serialized or not. Otherwise, use the ponyfill.
+// we need this because some implementations of SCA treat certain values as unserializable (ex: Error is serializable in ponyfill but NOT in firefox implementations)
+// @ts-ignore
+const structuredCloneRef = window?.structuredClone || structuredClonePonyfill
+
+export const isSerializableInCurrentBrowser = (value: any) => {
+  try {
+    structuredCloneRef(value)
+
+    // @ts-ignore
+    if (Cypress.isBrowser('firefox') && _.isError(value) && structuredCloneRef !== window?.structuredClone) {
+      /**
+       * NOTE: structuredClone() was introduced in Firefox 94. Supported versions below 94 need to use the ponyfill
+       * to determine whether or not a value can be serialized through postMessage. Since the ponyfill deems Errors
+       * as clone-able, but postMessage does not in Firefox, we must make sure we do NOT attempt to send native errors through firefox
+       */
+      return false
+    }
+
+    // In some instances of structuredClone, Bluebird promises are considered serializable, but can be very deep objects
+    // For ours needs, we really do NOT want to serialize these
+    if (value instanceof Cypress.Promise) {
+      return false
+    }
+
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * Walks the prototype chain and finds any serializable properties that exist on the object or its prototypes.
+ * If the property can be serialized, the property is added to the literal.
+ * This means read-only properties are now read/write on the literal.
+ *
+ * Please see https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#things_that_dont_work_with_structured_clone for more details.
+ * @param obj Object that is being converted
+ * @returns a new object void of prototype chain (object literal) with all serializable properties
+ */
+const convertObjectToSerializableLiteral = (obj): typeof obj => {
+  const allProps: string[] = []
+  let currentObjectRef = obj
+
+  do {
+    const props = Object.getOwnPropertyNames(currentObjectRef)
+
+    props.forEach((prop: string) => {
+      try {
+        if (!allProps.includes(prop) && isSerializableInCurrentBrowser(currentObjectRef[prop])) {
+          allProps.push(prop)
+        }
+      } catch (err) {
+      /**
+       * In some browsers, properties of objects on the prototype chain point to the implementation object.
+       * Depending on implementation constraints, these properties may throw an error when accessed.
+       *
+       * ex: DOMException's prototype is Error, and calling the 'name' getter on DOMException's prototype
+       * throws a TypeError since Error does not implement the DOMException interface.
+       */
+        if (err?.name !== 'TypeError') {
+          throw err
+        }
+      }
+    })
+
+    currentObjectRef = Object.getPrototypeOf(currentObjectRef)
+  } while (currentObjectRef)
+
+  const objectAsLiteral = {}
+
+  allProps.forEach((key) => {
+    objectAsLiteral[key] = obj[key]
+  })
+
+  return objectAsLiteral
+}
+
+/**
+ * Sanitizes any unserializable values to prep for postMessage serialization. All Objects, including Errors, are mapped to an Object literal with
+ * whatever serialization properties they have, including their prototype hierarchy.
+ * This keeps behavior consistent between browsers without having to worry about the inner workings of structuredClone(). For example:
+ *
+ * chromium
+ * new Error('myError') -> Object literal with message key having value 'myError'. Also, other custom properties on the object are omitted and only name, message, and stack are preserved
+ *
+ * For instance:
+ * var a = new Error('myError')
+ * a.foo = 'bar'
+ * var b = structuredClone(a)
+ * b.foo // is undefined
+ *
+ * firefox
+ * structuredClone(new Error('myError')) -> throws error as native error cannot be serialized
+ *
+ * This method takes a similar approach as the 'chromium' structuredClone algorithm, except that the prototype chain is walked and ANY serializable value, including getters, is serialized.
+ * Please see https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#things_that_dont_work_with_structured_clone.
+ *
+ *  NOTE: If an object nested inside valueToSanitize contains an unserializable property, the whole object is deemed as unserializable
+ * @param valueToSanitize subject of sanitization that might be unserializable or have unserializable properties
+ * @returns a serializable form of the subject. If the value passed in cannot be serialized, an error is thrown
+ * @throws '__cypress_unserializable_value'
+ */
+export const preprocessForSerialization = <T>(valueToSanitize: { [key: string]: any }): T | undefined => {
+// Even if native errors can be serialized through postMessage, many properties are omitted on structuredClone(), including prototypical hierarchy
+// because of this, we preprocess native errors to objects and postprocess them once they come back to the primary origin
+
+  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays. This is important for commands like .selectFile() using buffer streams
+  if (_.isArray(valueToSanitize) || _.isTypedArray(valueToSanitize)) {
+    return _.map(valueToSanitize, preprocessForSerialization) as unknown as T
+  }
+
+  if (_.isObject(valueToSanitize)) {
+    try {
+      const sanitizedValueAsLiteral = convertObjectToSerializableLiteral(valueToSanitize) as T
+
+      // convert any nested structures as well, if objects or arrays, to literals. This is needed in the case of Proxy objects
+      _.forEach(sanitizedValueAsLiteral as any, (value, key) => {
+        sanitizedValueAsLiteral[key] = preprocessForSerialization(value)
+      })
+
+      return sanitizedValueAsLiteral
+    } catch (err) {
+      // if its not serializable, tell the primary to inform the user that the value thrown could not be serialized
+      throw UNSERIALIZABLE
+    }
+  }
+
+  if (!isSerializableInCurrentBrowser(valueToSanitize)) {
+    throw UNSERIALIZABLE
+  }
+
+  return valueToSanitize
+}
+
+export const reifySerializedError = (serializedError: any, userInvocationStack: string) => {
+  // we have no idea what type the error this is... could be 'undefined', a plain old object, or something else entirely
+
+  let reifiedError = $errUtils.errByPath('origin.failed_to_serialize_or_map_thrown_value')
+
+  if (_.isArray(serializedError)) {
+    // if the error is an array of anything, create a normal error with the stringified values of the passed in array
+    reifiedError = new Error(serializedError.toString())
+  } else if (_.isObject(serializedError as any)) {
+    // otherwise, try to determine if there are any error details in the object and merge the error objects together
+    let errorToMerge = serializedError?.message ? new Error(serializedError?.message || '') : reifiedError
+
+    reifiedError = _.assignWith(errorToMerge, serializedError)
+  } else if (serializedError !== UNSERIALIZABLE) {
+    reifiedError = new Error(`${serializedError}`)
+  }
+
+  reifiedError.onFail = () => {}
+
+  reifiedError.stack = $stackUtils.replacedStack(reifiedError, userInvocationStack)
+
+  return reifiedError
+}
diff --git a/packages/driver/src/util/serialization/log.ts b/packages/driver/src/util/serialization/log.ts
new file mode 100644
index 000000000000..d8a19f0823c7
--- /dev/null
+++ b/packages/driver/src/util/serialization/log.ts
@@ -0,0 +1,425 @@
+import _ from 'lodash'
+import { isSerializableInCurrentBrowser, preprocessForSerialization } from './index'
+import $dom from '../../dom'
+
+interface PreprocessedHTMLElement {
+  tagName: string
+  attributes: { [key: string]: string }
+  innerHTML: string
+  serializationKey: 'dom'
+}
+
+interface PreprocessedFunction {
+  value: any
+  serializationKey: 'function'
+}
+
+/**
+ * Takes an HTMLElement that might be a <body> for a given snapshot or any other element, likely pertaining to log consoleProps,
+ * on the page that needs to be preprocessed for serialization. The method here is to do a very shallow serialization,
+ * by trying to make the HTML as stateful as possible before preprocessing.
+ *
+ * @param {HTMLElement} props - an HTMLElement
+ * @returns {PreprocessedHTMLElement} a preprocessed element that can be fed through postMessage() that can be reified in the primary.
+ */
+export const preprocessDomElement = (props: HTMLElement) => {
+  const inputPreprocessArray = Array.from(props.querySelectorAll('input, textarea, select'))
+
+  // Since we serialize on innerHTML, we also need to account for the props element itself in the case it is an input, select, or textarea.
+  inputPreprocessArray.push(props)
+
+  // Hydrate values in the HTML copy so when serialized they show up correctly in snapshot.
+  // We do this by mapping certain properties to attributes that are not already reflected in the attributes map.
+  // Things like id, class, type, and others are reflected in the attribute map and do not need to be explicitly added.
+  inputPreprocessArray.forEach((el: any) => {
+    switch (el.type) {
+      case 'checkbox':
+      case 'radio':
+        if (el.checked) {
+          el.setAttribute('checked', '')
+        }
+
+        break
+      case 'select-one':
+      case 'select-multiple': {
+        const options = el.type === 'select-one' ? el.options : el.selectedOptions
+
+        if (el.selectedIndex !== -1) {
+          for (let option of options) {
+            if (option.selected) {
+              option.setAttribute('selected', 'true')
+            } else {
+              option.removeAttribute('selected')
+            }
+          }
+        }
+      }
+        break
+      case 'textarea': {
+        el.innerHTML = el.value
+      }
+        break
+      default:
+        if (el.value !== undefined) {
+          el.setAttribute('value', el.value)
+        }
+    }
+  })
+
+  const el: PreprocessedHTMLElement = {
+    tagName: props.tagName,
+    attributes: {},
+    innerHTML: props.innerHTML,
+    serializationKey: 'dom',
+  }
+
+  // get all attributes and classes off the element
+  props.getAttributeNames().forEach((attributeName) => {
+    el.attributes[attributeName] = props.getAttribute(attributeName) || ''
+  })
+
+  return el
+}
+
+/**
+ * Takes an PreprocessedHTMLElement that might represent a given snapshot or any other element that needs to be reified
+ * after postMessage() serialization. The method here is to do a very basic reification,
+ * attempting to create an element based off the PreprocessedHTMLElement tagName, and populating some basic state if applicable,
+ * such as element type, id, value, classes, attributes, etc.
+ *
+ * @param {PreprocessedHTMLElement} props - a preprocessed element that was fed through postMessage() that need to be reified in the primary.
+ * @returns {HTMLElement} a reified element, likely a log snapshot, $el, or consoleProp elements.
+ */
+export const reifyDomElement = (props: any) => {
+  const reifiedEl = document.createElement(props.tagName)
+
+  reifiedEl.innerHTML = props.innerHTML
+
+  Object.keys(props.attributes).forEach((attribute) => {
+    reifiedEl.setAttribute(attribute, props.attributes[attribute])
+  })
+
+  return reifiedEl
+}
+
+/**
+ * Attempts to preprocess an Object/Array by excluding unserializable values except for DOM elements and possible functions (if attemptToSerializeFunctions is true).
+ * DOM elements are processed to a serializable object via preprocessDomElement, and functions are serialized to an object with a value key containing their output contents.
+ *
+ * @param {any} props an Object/Array that needs to be preprocessed before being sent through postMessage().
+ * @param {boolean} [attemptToSerializeFunctions=false] - Whether or not the function should attempt to preprocess a function by invoking it.
+ * @returns
+ */
+export const preprocessObjectLikeForSerialization = (props, attemptToSerializeFunctions = false) => {
+  if (_.isArray(props)) {
+    return props.map((prop) => preprocessLogLikeForSerialization(prop, attemptToSerializeFunctions))
+  }
+
+  if (_.isPlainObject(props)) {
+    // only attempt to try and serialize dom elements and functions (if attemptToSerializeFunctions is set to true)
+    let objWithPossiblySerializableProps = _.pickBy(props, (value) => {
+      const isSerializable = isSerializableInCurrentBrowser(value)
+
+      if (!isSerializable && $dom.isDom(value) || _.isFunction(value) || _.isObject(value)) {
+        return true
+      }
+
+      return false
+    })
+
+    let objWithOnlySerializableProps = _.pickBy(props, (value) => isSerializableInCurrentBrowser(value))
+
+    // assign the properties we know we can serialize here
+    let preprocessed: any = preprocessForSerialization(objWithOnlySerializableProps)
+
+    // and attempt to serialize possibly unserializable props here and fail gracefully if unsuccessful
+    _.forIn(objWithPossiblySerializableProps, (value, key) => {
+      preprocessed[key] = preprocessLogLikeForSerialization(value, attemptToSerializeFunctions)
+    })
+
+    return preprocessed
+  }
+
+  return preprocessForSerialization(props)
+}
+
+/**
+ * Attempts to take an Object and reify it correctly. Most of this is handled by reifyLogLikeFromSerialization, with the exception here being DOM elements.
+ * DOM elements, if needed to match against the snapshot DOM, are defined as getters on the object to have their values calculated at request.
+ * This is important for certain log items, such as consoleProps, to be rendered correctly against the snapshot. Other DOM elements, such as snapshots, do not need to be matched
+ * against the current DOM and can be reified immediately. Since there is a potential need for object getters to exist within an array, arrays are wrapped in a proxy, with array indices
+ * proxied to the reified object or array, and other methods proxying to the preprocessed array (such as native array methods like map, foreach, etc...).
+ *
+ * @param {Object} props - a preprocessed Object/Array that was fed through postMessage() that need to be reified in the primary.
+ * @param {boolean} matchElementsAgainstSnapshotDOM - whether DOM elements within the Object/Array should be matched against
+ * @returns {Object|Proxy} - a reified version of the Object or Array (Proxy).
+ */
+export const reifyObjectLikeForSerialization = (props, matchElementsAgainstSnapshotDOM) => {
+  let reifiedObjectOrArray = {}
+
+  _.forIn(props, (value, key) => {
+    const val = reifyLogLikeFromSerialization(value, matchElementsAgainstSnapshotDOM)
+
+    if (val?.serializationKey === 'dom') {
+      if (matchElementsAgainstSnapshotDOM) {
+        // dynamically calculate the element (snapshot or otherwise).
+        // This is important for consoleProp/$el based properties on the log because it calculates the requested element AFTER the snapshot has been rendered into the AUT.
+        reifiedObjectOrArray = {
+          ...reifiedObjectOrArray,
+          get [key] () {
+            return val.reifyElement()
+          },
+        }
+      } else {
+        // The DOM element in question is something like a snapshot. It can be reified immediately
+        reifiedObjectOrArray[key] = val.reifyElement()
+      }
+    } else {
+      reifiedObjectOrArray[key] = reifyLogLikeFromSerialization(value, matchElementsAgainstSnapshotDOM)
+    }
+  })
+
+  // NOTE: transforms arrays into objects to have defined getters for DOM elements, and proxy back to that object via an ES6 Proxy.
+  if (_.isArray(props)) {
+    // if an array, map the array to our special getter object.
+    return new Proxy(reifiedObjectOrArray, {
+      get (target, name) {
+        return target[name] || props[name]
+      },
+    })
+  }
+
+  // otherwise, just returned the object with our special getter
+  return reifiedObjectOrArray
+}
+
+/**
+ * Attempts to take a generic data structure that is log-like and preprocess them for serialization. This generic may contain properties that are either
+ *  a) unserializable entirely
+ *  b) unserializable natively but can be processed to a serializable form (DOM elements or Functions)
+ *  c) serializable
+ *
+ * DOM elements are preprocessed via some key properties
+ * (attributes, classes, ids, tagName, value) including their innerHTML. Before the innerHTML is captured, inputs are traversed to set their stateful value
+ * inside the DOM element. This is crucial for body copy snapshots that are being sent to the primary domain to make the snapshot 'stateful'. Functions, if
+ * explicitly stated, will be preprocessed with whatever value they return (assuming that value is serializable). If a value cannot be preprocessed for whatever reason,
+ * null is returned.
+ *
+ *
+ * NOTE: this function recursively calls itself to preprocess a log
+ *
+ * @param {any} props a generic variable that represents a value that needs to be preprocessed before being sent through postMessage().
+ * @param {boolean} [attemptToSerializeFunctions=false] - Whether or not the function should attempt to preprocess a function by invoking it. USE WITH CAUTION!
+ * @returns {any} the serializable version of the generic.
+ */
+export const preprocessLogLikeForSerialization = (props, attemptToSerializeFunctions = false) => {
+  try {
+    if ($dom.isDom(props)) {
+      if (props.length !== undefined && $dom.isJquery(props)) {
+        const serializableArray: any[] = []
+
+        // in the case we are dealing with a jQuery array, preprocess to a native array to nuke any prevObject(s) or unserializable values
+        props.each((key) => serializableArray.push(preprocessLogLikeForSerialization(props[key], attemptToSerializeFunctions)))
+
+        return serializableArray
+      }
+
+      // otherwise, preprocess the element to an object with pertinent DOM properties
+      const serializedDom = preprocessDomElement(props)
+
+      return serializedDom
+    }
+
+    /**
+     * When preprocessing a log, there might be certain functions we want to attempt to serialize.
+     * One of these instances is the 'table' key in consoleProps, which has contents that CAN be serialized.
+     * If there are other functions that have serializable contents, the invoker/developer will need to be EXPLICIT
+     * in what needs serialization. Otherwise, functions should NOT be serialized.
+     */
+    if (_.isFunction(props)) {
+      if (attemptToSerializeFunctions) {
+        return {
+          value: preprocessLogLikeForSerialization(props(), attemptToSerializeFunctions),
+          serializationKey: 'function',
+        } as PreprocessedFunction
+      }
+
+      return null
+    }
+
+    if (_.isObject(props)) {
+      return preprocessObjectLikeForSerialization(props, attemptToSerializeFunctions)
+    }
+
+    return preprocessForSerialization(props)
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Attempts to take in a preprocessed/serialized log-like attributes and reify them. DOM elements are lazily calculated via
+ * getter properties on an object. If these DOM elements are in an array, the array is defined as an ES6 proxy that
+ * ultimately proxies to these getter objects. Functions, if serialized, are rewrapped. If a value cannot be reified for whatever reason,
+ * null is returned.
+ *
+ * This is logLike because there is a need outside of logs, such as in the iframe-model in the runner.
+ * to serialize DOM elements, such as the final snapshot upon request.
+ *
+ * NOTE: this function recursively calls itself to reify a log
+ *
+ * @param {any} props - a generic variable that represents a value that has been preprocessed and sent through postMessage() and needs to be reified.
+ * @param {boolean} matchElementsAgainstSnapshotDOM - Whether or not the element should be reconstructed lazily
+ * against the currently rendered DOM (usually against a rendered snapshot) or should be completely recreated from scratch (common with snapshots as they will replace the DOM)
+ * @returns {any} the reified version of the generic.
+ */
+export const reifyLogLikeFromSerialization = (props, matchElementsAgainstSnapshotDOM = true) => {
+  try {
+    if (props?.serializationKey === 'dom') {
+      props.reifyElement = function () {
+        let reifiedElement
+
+        // If the element needs to be matched against the currently rendered DOM. This is useful when analyzing consoleProps or $el in a log
+        // where elements need to be evaluated LAZILY after the snapshot is attached to the page.
+        // this option is set to false when reifying snapshots, since they will be replacing the current DOM when the user interacts with said snapshot.
+        if (matchElementsAgainstSnapshotDOM) {
+          const attributes = Object.keys(props.attributes).map((attribute) => {
+            return `[${attribute}="${props.attributes[attribute]}"]`
+          }).join('')
+
+          const selector = `${props.tagName}${attributes}`
+
+          reifiedElement = Cypress.$(selector)
+
+          if (reifiedElement.length) {
+            return reifiedElement.length > 1 ? reifiedElement : reifiedElement[0]
+          }
+        }
+
+        // if the element couldn't be found, return a synthetic copy that doesn't actually exist on the page
+        return reifyDomElement(props)
+      }
+
+      return props
+    }
+
+    if (props?.serializationKey === 'function') {
+      const reifiedFunctionData = reifyLogLikeFromSerialization(props.value, matchElementsAgainstSnapshotDOM)
+
+      return () => reifiedFunctionData
+    }
+
+    if (_.isObject(props)) {
+      return reifyObjectLikeForSerialization(props, matchElementsAgainstSnapshotDOM)
+    }
+
+    return props
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Preprocess a snapshot to a serializable form before piping them over through postMessage().
+ * This method is also used by a spec bridge on request if a 'final state' snapshot is requested outside that of the primary domain
+ *
+ * @param {any} snapshot - a snapshot matching the same structure that is returned from cy.createSnapshot.
+ * @returns a serializable form of a snapshot, including a serializable <body> with styles
+ */
+export const preprocessSnapshotForSerialization = (snapshot) => {
+  try {
+    const preprocessedSnapshot = preprocessLogLikeForSerialization(snapshot, true)
+
+    if (!preprocessedSnapshot.body.get) {
+      return null
+    }
+
+    preprocessedSnapshot.styles = cy.getStyles(snapshot)
+
+    return preprocessedSnapshot
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Reifies a snapshot from the serializable from to an actual HTML body snapshot that exists in the primary document.
+ * @param {any} snapshot - a snapshot that has been preprocessed and sent through post message and needs to be reified in the primary.
+ * @returns the reified snapshot that exists in the primary document
+ */
+export const reifySnapshotFromSerialization = (snapshot) => {
+  snapshot.body = reifyLogLikeFromSerialization(snapshot.body, false)
+
+  return cy.createSnapshot(snapshot.name, null, snapshot)
+}
+
+/**
+ * Sanitizes the log messages going to the primary domain before piping them to postMessage().
+ * This is designed to function as an extension of preprocessForSerialization, but also attempts to serialize DOM elements,
+ * as well as functions if explicitly stated.
+ *
+ * DOM elements are serialized with their outermost properties (attributes, classes, ids, tagName) including their innerHTML.
+ * DOM Traversal serialization is not possible with larger html bodies and will likely cause a stack overflow.
+ *
+ * Functions are serialized when explicitly state (ex: table in consoleProps).
+ * NOTE: If not explicitly handling function serialization for a given property, the property will be set to null
+ *
+ * @param logAttrs raw log attributes passed in from either a log:changed or log:added event
+ * @returns a serializable form of the log, including attempted serialization of DOM elements and Functions (if explicitly stated)
+ */
+export const preprocessLogForSerialization = (logAttrs) => {
+  let { snapshots, ...logAttrsRest } = logAttrs
+
+  const preprocessed = preprocessLogLikeForSerialization(logAttrsRest)
+
+  if (preprocessed) {
+    if (snapshots) {
+      preprocessed.snapshots = snapshots.map((snapshot) => preprocessSnapshotForSerialization(snapshot))
+    }
+
+    if (logAttrs?.consoleProps?.table) {
+      preprocessed.consoleProps.table = preprocessLogLikeForSerialization(logAttrs.consoleProps.table, true)
+    }
+  }
+
+  return preprocessed
+}
+
+/**
+ * Redefines log messages being received in the primary domain before sending them out through the event-manager.
+ *
+ * Efforts here include importing captured snapshots from the spec bridge into the primary snapshot document, importing inline
+ * snapshot styles into the snapshot css map, and reconstructing DOM elements and functions somewhat naively.
+ *
+ * To property render consoleProps/$el elements in snapshots or the console, DOM elements are lazily calculated via
+ * getter properties on an object. If these DOM elements are in an array, the array is defined as an ES6 proxy that
+ * ultimately proxies to these getter objects.
+ *
+ * The secret here is that consoleProp DOM elements needs to be reified at console printing runtime AFTER the serialized snapshot
+ * is attached to the DOM so the element can be located and displayed properly
+ *
+ * In most cases, the element can be queried by attributes that exist specifically on the element or by the `HIGHLIGHT_ATTR`. If that fails or does not locate an element,
+ * then a new element is created against the snapshot context. This element will NOT be found on the page, but will represent what the element
+ * looked like at the time of the snapshot.
+ *
+ * @param logAttrs serialized/preprocessed log attributes passed to the primary domain from a spec bridge
+ * @returns a reified version of what a log is supposed to look like in Cypress
+ */
+export const reifyLogFromSerialization = (logAttrs) => {
+  let { snapshots, ... logAttrsRest } = logAttrs
+
+  if (snapshots) {
+    snapshots = snapshots.filter((snapshot) => !!snapshot).map((snapshot) => reifySnapshotFromSerialization(snapshot))
+  }
+
+  const reified = reifyLogLikeFromSerialization(logAttrsRest)
+
+  if (reified.$el && reified.$el.length) {
+    // Make sure $els are jQuery Arrays to keep what is expected in the log.
+    reified.$el = Cypress.$(reified.$el.map((el) => el))
+  }
+
+  reified.snapshots = snapshots
+
+  return reified
+}
diff --git a/packages/driver/types/cy/logGroup.d.ts b/packages/driver/types/cy/logGroup.d.ts
index 1d2f1a73b7b9..9d496bbd2520 100644
--- a/packages/driver/types/cy/logGroup.d.ts
+++ b/packages/driver/types/cy/logGroup.d.ts
@@ -3,7 +3,7 @@ declare namespace Cypress {
   declare namespace LogGroup {
     type ApiCallback = (log: Cypress.Log) => Chainable<S>
     type LogGroup = (cypress: Cypress.Cypress, options: Partial<LogGroupConfig>, callback: LogGroupCallback) => Chainable<S>
-    
+
     interface Config {
       // the JQuery element for the command. This will highlight the command
       // in the main window when debugging
diff --git a/packages/driver/types/cypress/log.d.ts b/packages/driver/types/cypress/log.d.ts
index 366b915646a3..877f729a375c 100644
--- a/packages/driver/types/cypress/log.d.ts
+++ b/packages/driver/types/cypress/log.d.ts
@@ -10,53 +10,110 @@ declare namespace Cypress {
     groupEnd(): void
   }
 
-  interface InternalLogConfig {
-    // defaults to command
-    instrument?: 'agent' | 'command' | 'route'
-    // name of the log
+  type ReferenceAlias = {
+    cardinal: number,
+    name: string,
+    ordinal: string,
+  }
+
+  type Snapshot = {
+    body?: {get: () => any},
+    htmlAttrs?: {[key: string]: any},
     name?: string
-    // the name override for display purposes only
-    displayName?: string
-    // additional information to include in the log if not overridden
-    // the render props message
-    // defaults to command arguments for command instrument
-    message?: string | Array<string> | any[]
-    // whether or not the xhr route had a corresponding response stubbed out
-    isStubbed?: boolean
+  }
+
+  type ConsoleProps = {
+    Command?: string
+    Snapshot?: string
+    Elements?: number
+    Selector?: string
+    Yielded?: HTMLElement
+    Event?: string
+    Message?: string
+    actual?: any
+    expected?: any
+  }
+
+  type RenderProps = {
+    indicator?: 'aborted' | 'pending' | 'successful' | 'bad'
+    message?: string
+  }
+
+  interface InternalLogConfig {
+    // the JQuery element for the command. This will highlight the command
+    // in the main window when debugging
+    $el?: JQuery | string
     alias?: string
     aliasType?: 'agent' | 'route' | 'primitive' | 'dom' | undefined
+    browserPreRequest?: any
+    callCount?: number
+    chainerId?: string
     commandName?: string
-    // the JQuery element for the command. This will highlight the command
-    // in the main window when debugging
-    $el?: JQuery
+    // provide the content to display in the dev tool's console when a log is
+    // clicked from the Reporter's Command Log
+    consoleProps?: () => Command | Command
+    coords?: {
+      left: number
+      leftCenter: number
+      top: number
+      topCenter: number
+      x: number
+      y: number
+    }
+    count?: number
+    // the name override for display purposes only
+    displayName?: string
     // whether or not to show the log in the Reporter UI or only
     // store the log details on the command and log manager
     emitOnly?: boolean
-    // whether or not to start a new log group
-    groupStart?: boolean
-    // the type of log
-    //   system - log generated by Cypress
-    //   parent - log generated by Command
-    //   child  - log generated by Chained Command
-    type?: 'system' | 'parent' | 'child' | ((current: State['state']['current'], subject: State['state']['subject']) => 'parent' | 'child')
+    end?: boolean
+    ended?: boolean
+    err?: Error
+    error?: Error
     // whether or not the generated log was an event or command
     event?: boolean
+    expected?: string
+    functionName?: string
+    // whether or not to start a new log group
+    groupStart?: boolean
+    hookId?: number
+    id?: string
+    // defaults to command
+    instrument?: 'agent' | 'command' | 'route'
+    // whether or not the xhr route had a corresponding response stubbed out
+    isStubbed?: boolean
+    // additional information to include in the log if not overridden
+    // the render props message
+    // defaults to command arguments for command instrument
+    message?: string | Array<string> | any[]
     method?: string
-    url?: string
-    status?: number
+    // name of the log
+    name?: string
+    numElements?: number
     // the number of xhr responses that occurred. This is only applicable to
     // logs defined with instrument=route
     numResponses?: number
+    referencesAlias?: ReferenceAlias[]
+    renderProps?: () => RenderProps | RenderProps
     response?: string | object
-    // provide the content to display in the dev tool's console when a log is 
-    // clicked from the Reporter's Command Log
-    consoleProps?: () => ObjectLike
-    renderProps?: () => {
-      indicator?: 'aborted' | 'pending' | 'successful' | 'bad'
-      message?: string
-    }
-    browserPreRequest?: any
+    selector?: any
+    snapshot?: boolean
+    snapshots?: []
+    state?: "failed" | "passed" | "pending" // representative of Mocha.Runnable.constants (not publicly exposed by Mocha types)
+    status?: number
+    testCurrentRetry?: number
+    testId?: string
     // timeout of the group command - defaults to defaultCommandTimeout
     timeout?: number
+    // the type of log
+    //   system - log generated by Cypress
+    //   parent - log generated by Command
+    //   child  - log generated by Chained Command
+    type?: 'system' | 'parent' | 'child' | ((current: State['state']['current'], subject: State['state']['subject']) => 'parent' | 'child')
+    url?: string
+    viewportHeight?: number
+    viewportWidth?: number
+    visible?: boolean
+    wallClockStartedAt?: string
   }
 }
diff --git a/packages/driver/types/internal-types-lite.d.ts b/packages/driver/types/internal-types-lite.d.ts
new file mode 100644
index 000000000000..2668ce0dcd93
--- /dev/null
+++ b/packages/driver/types/internal-types-lite.d.ts
@@ -0,0 +1,46 @@
+/// <reference path="./cy/commands/session.d.ts" />
+/// <reference path="./cy/logGroup.d.ts" />
+/// <reference path="./cypress/log.d.ts" />
+
+// All of the types needed by packages/app, without any of the additional APIs used in the driver only
+
+declare namespace Cypress {
+  interface Actions {
+    (action: 'internal:window:load', fn: (details: InternalWindowLoadDetails) => void)
+    (action: 'net:stubbing:event', frame: any)
+    (action: 'request:event', data: any)
+    (action: 'backend:request', fn: (...any) => void)
+    (action: 'automation:request', fn: (...any) => void)
+    (action: 'viewport:changed', fn?: (viewport: { viewportWidth: string, viewportHeight: string }, callback: () => void) => void)
+    (action: 'before:screenshot', fn: (config: {}, fn: () => void) => void)
+    (action: 'after:screenshot', config: {})
+  }
+
+  interface Backend {
+    (task: 'cross:origin:release:html'): boolean
+    (task: 'cross:origin:bridge:ready', args: { originPolicy?: string }): boolean
+    (task: 'cross:origin:finished', originPolicy: string): boolean
+  }
+
+  interface cy {
+    /**
+     * If `as` is chained to the current command, return the alias name used.
+     */
+    getNextAlias: IAliases['getNextAlias']
+    noop: <T>(v: T) => Cypress.Chainable<T>
+    queue: CommandQueue
+    retry: IRetries['retry']
+    state: State
+    pauseTimers: ITimer['pauseTimers']
+    // TODO: this function refers to clearTimeout at cy/timeouts.ts, which doesn't have any argument.
+    // But in many cases like cy/commands/screenshot.ts, it's called with a timeout id string.
+    // We should decide whether calling with id is correct or not.
+    clearTimeout: ITimeouts['clearTimeout']
+    isStable: IStability['isStable']
+    isAnticipatingCrossOriginResponseFor: IStability['isAnticipatingCrossOriginResponseFor']
+    fail: (err: Error, options:{ async?: boolean }) => Error
+    getRemoteLocation: ILocation['getRemoteLocation']
+    createSnapshot:  ISnapshots['createSnapshot']
+    getStyles: ISnapshots['getStyles']
+  }
+}
\ No newline at end of file
diff --git a/packages/driver/types/internal-types.d.ts b/packages/driver/types/internal-types.d.ts
index 9dde8c54ffb8..a320df721068 100644
--- a/packages/driver/types/internal-types.d.ts
+++ b/packages/driver/types/internal-types.d.ts
@@ -1,31 +1,13 @@
 // NOTE: this is for internal Cypress types that we don't want exposed in the public API but want for development
 // TODO: find a better place for this
-/// <reference path="./cy/commands/session.d.ts" />
-/// <reference path="./cy/logGroup.d.ts" />
-/// <reference path="./cypress/log.d.ts" />
+/// <reference path="./internal-types-lite.d.ts" />
+interface InternalWindowLoadDetails {
+  type: 'same:origin' | 'cross:origin' | 'cross:origin:failure'
+  error?: Error
+  window?: AUTWindow
+}
 
 declare namespace Cypress {
-  interface Actions {
-    (action: 'net:stubbing:event', frame: any)
-    (action: 'request:event', data: any)
-  }
-
-  interface cy {
-    /**
-     * If `as` is chained to the current command, return the alias name used.
-     */
-    getNextAlias: () => string | undefined
-    noop: <T>(v: T) => Cypress.Chainable<T>
-    queue: any
-    retry: (fn: () => any, opts: any) => any
-    state: State
-    pauseTimers: <T>(shouldPause: boolean) => Cypress.Chainable<T>
-    // TODO: this function refers to clearTimeout at cy/timeouts.ts, which doesn't have any argument.
-    // But in many cases like cy/commands/screenshot.ts, it's called with a timeout id string.
-    // We should decide whether calling with id is correct or not.
-    clearTimeout: <T>(timeoutId?: string) => Cypress.Chainable<T>
-  }
-
   interface Cypress {
     backend: (eventName: string, ...args: any[]) => Promise<any>
     // TODO: how to pull this from proxy-logging.ts? can't import in a d.ts file...
@@ -39,7 +21,14 @@ declare namespace Cypress {
     sinon: sinon.SinonApi
     utils: CypressUtils
     state: State
-    originalConfig: Record<string, any>
+    events: Events
+    emit: (event: string, payload?: any) => void
+    primaryOriginCommunicator: import('../src/cross-origin/communicator').PrimaryOriginCommunicator
+    specBridgeCommunicator: import('../src/cross-origin/communicator').SpecBridgeCommunicator
+    mocha: $Mocha
+    configure: (config: Cypress.ObjectLike) => void
+    isCrossOriginSpecBridge: boolean
+    originalConfig: Cypress.ObjectLike
   }
 
   interface CypressUtils {
@@ -57,13 +46,25 @@ declare namespace Cypress {
     (k: 'document', v?: Document): Document
     (k: 'window', v?: Window): Window
     (k: 'logGroupIds', v?: Array<InternalLogConfig['id']>): Array<InternalLogConfig['id']>
+    (k: 'autOrigin', v?: string): string
+    (k: 'originCommandBaseUrl', v?: string): string
+    (k: 'currentActiveOriginPolicy', v?: string): string
+    (k: 'latestActiveOriginPolicy', v?: string): string
+    (k: 'duringUserTestExecution', v?: boolean): boolean
+    (k: 'onQueueEnd', v?: () => void): () => void
+    (k: 'onFail', v?: (err: Error) => void): (err: Error) => void
     (k: string, v?: any): any
     state: Cypress.state
   }
 
+  interface InternalConfig {
+    (k: keyof ResolvedConfigOptions, v?: any): any
+  }
+
   interface ResolvedConfigOptions {
     $autIframe: JQuery<HTMLIFrameElement>
     document: Document
+    projectRoot?: string
   }
 }
 
@@ -71,3 +72,6 @@ type AliasedRequest = {
   alias: string
   request: any
 }
+
+// utility types
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
diff --git a/packages/driver/types/remote-state.d.ts b/packages/driver/types/remote-state.d.ts
new file mode 100644
index 000000000000..443f83a66d85
--- /dev/null
+++ b/packages/driver/types/remote-state.d.ts
@@ -0,0 +1,14 @@
+declare namespace Cypress {
+  interface RemoteState {
+    auth?: Auth
+    domainName: string
+    strategy: 'file' | 'http'
+    origin: string
+    fileServer: string | null
+    props: Record<string, any>
+  }
+
+  interface RuntimeConfigOptions {
+    remote: RemoteState
+  }
+}
diff --git a/packages/driver/types/spec-types.d.ts b/packages/driver/types/spec-types.d.ts
new file mode 100644
index 000000000000..c0ebdbfc6d2a
--- /dev/null
+++ b/packages/driver/types/spec-types.d.ts
@@ -0,0 +1,8 @@
+// NOTE: This is for internal Cypress spec types that exist in support/utils.js for testing convenience and do not ship with Cypress
+
+declare namespace Cypress {
+  interface Chainable {
+    getAll(...aliases: string[]): Chainable
+    shouldWithTimeout(cb: (subj: {}) => void, timeout?: number): Chainable
+  }
+}
diff --git a/packages/errors/__snapshot-html__/EXPERIMENTAL_SESSION_SUPPORT_REMOVED.html b/packages/errors/__snapshot-html__/EXPERIMENTAL_SESSION_SUPPORT_REMOVED.html
new file mode 100644
index 000000000000..9b86f4dc903b
--- /dev/null
+++ b/packages/errors/__snapshot-html__/EXPERIMENTAL_SESSION_SUPPORT_REMOVED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalSessionSupport<span style="color:#e05561"> configuration option was removed in Cypress version 9.6.0 and replaced with <span style="color:#e5e510">experimentalSessionAndOrigin<span style="color:#e05561">. Please update your config to use <span style="color:#e5e510">experimentalSessionAndOrigin<span style="color:#e05561"> instead.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/session<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
\ No newline at end of file
diff --git a/packages/errors/package.json b/packages/errors/package.json
index cab38595f89b..4296ee1c1da1 100644
--- a/packages/errors/package.json
+++ b/packages/errors/package.json
@@ -27,7 +27,6 @@
     "@types/chai": "4.2.15",
     "@types/mocha": "8.2.2",
     "@types/node": "14.14.31",
-    "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
     "@types/strip-ansi": "^5.2.1",
     "ansi-styles": "^5",
diff --git a/packages/errors/src/errors.ts b/packages/errors/src/errors.ts
index 69bee1b176c4..812fe82285d8 100644
--- a/packages/errors/src/errors.ts
+++ b/packages/errors/src/errors.ts
@@ -1050,6 +1050,12 @@ export const AllCypressErrors = {
 
         https://on.cypress.io/migration-guide`
   },
+  EXPERIMENTAL_SESSION_SUPPORT_REMOVED: () => {
+    return errTemplate`\
+        The ${fmt.highlight(`experimentalSessionSupport`)} configuration option was removed in ${fmt.cypressVersion(`9.6.0`)} and replaced with ${fmt.highlight(`experimentalSessionAndOrigin`)}. Please update your config to use ${fmt.highlight(`experimentalSessionAndOrigin`)} instead.
+        
+        https://on.cypress.io/session`
+  },
   EXPERIMENTAL_SHADOW_DOM_REMOVED: () => {
     return errTemplate`\
         The ${fmt.highlight(`experimentalShadowDomSupport`)} configuration option was removed in ${fmt.cypressVersion(`5.2.0`)}. It is no longer necessary when utilizing the ${fmt.highlightSecondary(`includeShadowDom`)} option.
diff --git a/packages/errors/test/unit/visualSnapshotErrors_spec.ts b/packages/errors/test/unit/visualSnapshotErrors_spec.ts
index 55a3b5c66878..bca22a114c57 100644
--- a/packages/errors/test/unit/visualSnapshotErrors_spec.ts
+++ b/packages/errors/test/unit/visualSnapshotErrors_spec.ts
@@ -991,6 +991,11 @@ describe('visual error templates', () => {
         default: [{ configFile: '/path/to/cypress.config.js' }],
       }
     },
+    EXPERIMENTAL_SESSION_SUPPORT_REMOVED: () => {
+      return {
+        default: [],
+      }
+    },
     EXPERIMENTAL_SHADOW_DOM_REMOVED: () => {
       return {
         default: [],
diff --git a/packages/extension/app/background.js b/packages/extension/app/background.js
index 5b9e1ae8b988..2433d9729540 100644
--- a/packages/extension/app/background.js
+++ b/packages/extension/app/background.js
@@ -1,3 +1,4 @@
+const get = require('lodash/get')
 const map = require('lodash/map')
 const pick = require('lodash/pick')
 const once = require('lodash/once')
@@ -18,6 +19,16 @@ const firstOrNull = (cookies) => {
   return cookies[0] != null ? cookies[0] : null
 }
 
+const checkIfFirefox = async () => {
+  if (!browser || !get(browser, 'runtime.getBrowserInfo')) {
+    return false
+  }
+
+  const { name } = await browser.runtime.getBrowserInfo()
+
+  return name === 'Firefox'
+}
+
 const connect = function (host, path, extraOpts) {
   const listenToCookieChanges = once(() => {
     return browser.cookies.onChanged.addListener((info) => {
@@ -46,6 +57,32 @@ const connect = function (host, path, extraOpts) {
     })
   })
 
+  const listenToOnBeforeHeaders = once(() => {
+    // adds a header to the request to mark it as a request for the AUT frame
+    // itself, so the proxy can utilize that for injection purposes
+    browser.webRequest.onBeforeSendHeaders.addListener((details) => {
+      if (
+        // parentFrameId: 0 means the parent is the top-level, so if it isn't
+        // 0, it's nested inside the AUT and can't be the AUT itself
+        details.parentFrameId !== 0
+        // isn't an iframe
+        || details.type !== 'sub_frame'
+        // is the spec frame, not the AUT
+        || details.url.includes('__cypress')
+      ) return
+
+      return {
+        requestHeaders: [
+          ...details.requestHeaders,
+          {
+            name: 'X-Cypress-Is-AUT-Frame',
+            value: 'true',
+          },
+        ],
+      }
+    }, { urls: ['<all_urls>'] }, ['blocking', 'requestHeaders'])
+  })
+
   const fail = (id, err) => {
     return ws.emit('automation:response', id, {
       __error: err.message,
@@ -97,11 +134,22 @@ const connect = function (host, path, extraOpts) {
     }
   })
 
-  ws.on('connect', () => {
+  ws.on('automation:config', async (config) => {
+    const isFirefox = await checkIfFirefox()
+
     listenToCookieChanges()
-    listenToDownloads()
+    // Non-Firefox browsers use CDP for these instead
+    if (isFirefox) {
+      listenToDownloads()
 
-    return ws.emit('automation:client:connected')
+      if (config.experimentalSessionAndOrigin) {
+        listenToOnBeforeHeaders()
+      }
+    }
+  })
+
+  ws.on('connect', () => {
+    ws.emit('automation:client:connected')
   })
 
   return ws
diff --git a/packages/extension/app/manifest.json b/packages/extension/app/manifest.json
index 1a11fe99f953..c8200dd99c80 100644
--- a/packages/extension/app/manifest.json
+++ b/packages/extension/app/manifest.json
@@ -11,6 +11,8 @@
     "browsingData",
     "downloads",
     "tabs",
+    "webRequest",
+    "webRequestBlocking",
     "http://*/*",
     "https://*/*",
     "<all_urls>"
diff --git a/packages/extension/package.json b/packages/extension/package.json
index a2d8c2e2f721..4870363630bd 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -23,13 +23,10 @@
     "@packages/icons": "0.0.0-development",
     "@packages/socket": "0.0.0-development",
     "chai": "3.5.0",
-    "coffeescript": "1.12.7",
     "cross-env": "6.0.3",
     "eol": "0.9.1",
     "fs-extra": "9.1.0",
     "gulp": "4.0.2",
-    "gulp-clean": "0.4.0",
-    "gulp-rename": "1.4.0",
     "mocha": "3.5.3",
     "mock-require": "3.0.3",
     "rimraf": "3.0.2",
diff --git a/packages/extension/test/integration/background_spec.js b/packages/extension/test/integration/background_spec.js
index 0e0034123a1c..b3b60c181026 100644
--- a/packages/extension/test/integration/background_spec.js
+++ b/packages/extension/test/integration/background_spec.js
@@ -4,6 +4,7 @@ const http = require('http')
 const socket = require('@packages/socket')
 const Promise = require('bluebird')
 const mockRequire = require('mock-require')
+const client = require('../../app/client')
 
 const browser = {
   cookies: {
@@ -27,9 +28,7 @@ const browser = {
     getCurrent () {},
     update () {},
   },
-  runtime: {
-
-  },
+  runtime: {},
   tabs: {
     query () {},
     executeScript () {},
@@ -39,6 +38,11 @@ const browser = {
   browsingData: {
     remove () {},
   },
+  webRequest: {
+    onBeforeSendHeaders: {
+      addListener () {},
+    },
+  },
 }
 
 mockRequire('webextension-polyfill', browser)
@@ -112,21 +116,28 @@ const tab3 = {
 
 describe('app/background', () => {
   beforeEach(function (done) {
+    global.window = {}
+
     this.httpSrv = http.createServer()
     this.server = socket.server(this.httpSrv, { path: '/__socket' })
 
-    this.onConnect = (callback) => {
-      const client = background.connect(`http://localhost:${PORT}`, '/__socket')
-
-      client.on('connect', _.once(() => {
-        callback(client)
-      }))
+    const ws = {
+      on: sinon.stub(),
+      emit: sinon.stub(),
     }
 
-    this.stubEmit = (callback) => {
-      this.onConnect((client) => {
-        client.emit = _.once(callback)
-      })
+    sinon.stub(client, 'connect').returns(ws)
+
+    browser.runtime.getBrowserInfo = sinon.stub().resolves({ name: 'Firefox' }),
+
+    this.connect = async (options = {}) => {
+      const ws = background.connect(`http://localhost:${PORT}`, '/__socket.io')
+
+      // skip 'connect' and 'automation:client:connected' and trigger
+      // the handler that kicks everything off
+      await ws.on.withArgs('automation:config').args[0][1](options)
+
+      return ws
     }
 
     this.httpSrv.listen(PORT, done)
@@ -141,72 +152,47 @@ describe('app/background', () => {
   })
 
   context('.connect', () => {
-    it('can connect', function (done) {
-      this.server.on('connection', () => {
-        return done()
-      })
-
-      return background.connect(`http://localhost:${PORT}`, '/__socket')
-    })
-
-    it('emits \'automation:client:connected\'', (done) => {
-      const client = background.connect(`http://localhost:${PORT}`, '/__socket')
-
-      sinon.spy(client, 'emit')
+    it('emits \'automation:client:connected\'', async function () {
+      const ws = background.connect(`http://localhost:${PORT}`, '/__socket.io')
 
-      return client.on('connect', _.once(() => {
-        expect(client.emit).to.be.calledWith('automation:client:connected')
+      await ws.on.withArgs('connect').args[0][1]()
 
-        return done()
-      }))
+      expect(ws.emit).to.be.calledWith('automation:client:connected')
     })
 
-    it('listens to cookie changes', (done) => {
+    it('listens to cookie changes', async function () {
       const addListener = sinon.stub(browser.cookies.onChanged, 'addListener')
-      const client = background.connect(`http://localhost:${PORT}`, '/__socket')
 
-      return client.on('connect', _.once(() => {
-        expect(addListener).to.be.calledOnce
+      await this.connect()
 
-        return done()
-      }))
+      expect(addListener).to.be.calledOnce
     })
   })
 
   context('cookies', () => {
-    it('onChanged does not emit when cause is overwrite', function (done) {
+    it('onChanged does not emit when cause is overwrite', async function () {
       const addListener = sinon.stub(browser.cookies.onChanged, 'addListener')
+      const ws = await this.connect()
+      const fn = addListener.getCall(0).args[0]
 
-      this.onConnect((client) => {
-        sinon.spy(client, 'emit')
+      fn({ cause: 'overwrite' })
 
-        const fn = addListener.getCall(0).args[0]
-
-        fn({ cause: 'overwrite' })
-
-        expect(client.emit).not.to.be.calledWith('automation:push:request')
-
-        done()
-      })
+      expect(ws.emit).not.to.be.calledWith('automation:push:request')
     })
 
-    it('onChanged emits automation:push:request change:cookie', function (done) {
+    it('onChanged emits automation:push:request change:cookie', async function () {
       const info = { cause: 'explicit', cookie: { name: 'foo', value: 'bar' } }
 
-      sinon.stub(browser.cookies.onChanged, 'addListener').yieldsAsync(info)
+      sinon.stub(browser.cookies.onChanged, 'addListener').yields(info)
 
-      this.stubEmit((req, msg, data) => {
-        expect(req).to.eq('automation:push:request')
-        expect(msg).to.eq('change:cookie')
-        expect(data).to.deep.eq(info)
+      const ws = await this.connect()
 
-        done()
-      })
+      expect(ws.emit).to.be.calledWith('automation:push:request', 'change:cookie', info)
     })
   })
 
   context('downloads', () => {
-    it('onCreated emits automation:push:request create:download', function (done) {
+    it('onCreated emits automation:push:request create:download', async function () {
       const downloadItem = {
         id: '1',
         filename: '/path/to/download.csv',
@@ -214,23 +200,19 @@ describe('app/background', () => {
         url: 'http://localhost:1234/download.csv',
       }
 
-      sinon.stub(browser.downloads.onCreated, 'addListener').yieldsAsync(downloadItem)
+      sinon.stub(browser.downloads.onCreated, 'addListener').yields(downloadItem)
 
-      this.stubEmit((req, msg, data) => {
-        expect(req).to.eq('automation:push:request')
-        expect(msg).to.eq('create:download')
-        expect(data).to.deep.eq({
-          id: `${downloadItem.id}`,
-          filePath: downloadItem.filename,
-          mime: downloadItem.mime,
-          url: downloadItem.url,
-        })
+      const ws = await this.connect()
 
-        done()
+      expect(ws.emit).to.be.calledWith('automation:push:request', 'create:download', {
+        id: `${downloadItem.id}`,
+        filePath: downloadItem.filename,
+        mime: downloadItem.mime,
+        url: downloadItem.url,
       })
     })
 
-    it('onChanged emits automation:push:request complete:download', function (done) {
+    it('onChanged emits automation:push:request complete:download', async function () {
       const downloadDelta = {
         id: '1',
         state: {
@@ -238,34 +220,29 @@ describe('app/background', () => {
         },
       }
 
-      sinon.stub(browser.downloads.onChanged, 'addListener').yieldsAsync(downloadDelta)
+      sinon.stub(browser.downloads.onChanged, 'addListener').yields(downloadDelta)
 
-      this.stubEmit((req, msg, data) => {
-        expect(req).to.eq('automation:push:request')
-        expect(msg).to.eq('complete:download')
-        expect(data).to.deep.eq({ id: `${downloadDelta.id}` })
+      const ws = await this.connect()
 
-        done()
+      expect(ws.emit).to.be.calledWith('automation:push:request', 'complete:download', {
+        id: `${downloadDelta.id}`,
       })
     })
 
-    it('onChanged does not emit if state does not exist', function (done) {
+    it('onChanged does not emit if state does not exist', async function () {
       const downloadDelta = {
         id: '1',
       }
       const addListener = sinon.stub(browser.downloads.onChanged, 'addListener')
 
-      this.onConnect((client) => {
-        sinon.spy(client, 'emit')
-        addListener.getCall(0).args[0](downloadDelta)
+      const ws = await this.connect()
 
-        expect(client.emit).not.to.be.calledWith('automation:push:request')
+      addListener.getCall(0).args[0](downloadDelta)
 
-        done()
-      })
+      expect(ws.emit).not.to.be.calledWith('automation:push:request')
     })
 
-    it('onChanged does not emit if state.current is not "complete"', function (done) {
+    it('onChanged does not emit if state.current is not "complete"', async function () {
       const downloadDelta = {
         id: '1',
         state: {
@@ -274,16 +251,135 @@ describe('app/background', () => {
       }
       const addListener = sinon.stub(browser.downloads.onChanged, 'addListener')
 
-      this.onConnect((client) => {
-        sinon.spy(client, 'emit')
+      const ws = await this.connect()
+
+      addListener.getCall(0).args[0](downloadDelta)
+
+      expect(ws.emit).not.to.be.calledWith('automation:push:request')
+    })
+
+    it('does not add downloads listener if in non-Firefox browser', async function () {
+      browser.runtime.getBrowserInfo = undefined
+
+      const onCreated = sinon.stub(browser.downloads.onCreated, 'addListener')
+      const onChanged = sinon.stub(browser.downloads.onChanged, 'addListener')
+
+      await this.connect()
+
+      expect(onCreated).not.to.be.called
+      expect(onChanged).not.to.be.called
+    })
+  })
+
+  context('add header to aut iframe requests', () => {
+    const withExperimentalFlagOn = {
+      experimentalSessionAndOrigin: true,
+    }
+
+    it('does not listen to `onBeforeSendHeaders` if experimental flag is off', async function () {
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
 
-        addListener.getCall(0).args[0](downloadDelta)
+      await this.connect()
 
-        expect(client.emit).not.to.be.calledWith('automation:push:request')
+      expect(browser.webRequest.onBeforeSendHeaders.addListener).not.to.be.called
+    })
+
+    it('does not add header if it is the top frame', async function () {
+      const details = {
+        parentFrameId: -1,
+      }
+
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+
+      const result = browser.webRequest.onBeforeSendHeaders.addListener.lastCall.args[0](details)
+
+      expect(result).to.be.undefined
+    })
+
+    it('does not add header if it is a nested frame', async function () {
+      const details = {
+        parentFrameId: 12345,
+      }
+
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+
+      const result = browser.webRequest.onBeforeSendHeaders.addListener.lastCall.args[0](details)
+
+      expect(result).to.be.undefined
+    })
+
+    it('does not add header if it is not a sub frame request', async function () {
+      const details = {
+        parentFrameId: 0,
+        type: 'stylesheet',
+      }
+
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+
+      const result = browser.webRequest.onBeforeSendHeaders.addListener.lastCall.args[0](details)
 
-        done()
+      expect(result).to.be.undefined
+    })
+
+    it('does not add header if it is a spec frame request', async function () {
+      const details = {
+        parentFrameId: 0,
+        type: 'sub_frame',
+        url: '/__cypress/integration/spec.js',
+      }
+
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+      const result = browser.webRequest.onBeforeSendHeaders.addListener.lastCall.args[0](details)
+
+      expect(result).to.be.undefined
+    })
+
+    it('appends X-Cypress-Is-AUT-Frame header to AUT iframe request', async function () {
+      const details = {
+        parentFrameId: 0,
+        type: 'sub_frame',
+        url: 'http://localhost:3000/index.html',
+        requestHeaders: [
+          { name: 'X-Foo', value: 'Bar' },
+        ],
+      }
+
+      sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+      const result = browser.webRequest.onBeforeSendHeaders.addListener.lastCall.args[0](details)
+
+      expect(result).to.deep.equal({
+        requestHeaders: [
+          {
+            name: 'X-Foo',
+            value: 'Bar',
+          },
+          {
+            name: 'X-Cypress-Is-AUT-Frame',
+            value: 'true',
+          },
+        ],
       })
     })
+
+    it('does not add before-headers listener if in non-Firefox browser', async function () {
+      browser.runtime.getBrowserInfo = undefined
+
+      const onBeforeSendHeaders = sinon.stub(browser.webRequest.onBeforeSendHeaders, 'addListener')
+
+      await this.connect(withExperimentalFlagOn)
+
+      expect(onBeforeSendHeaders).not.to.be.called
+    })
   })
 
   context('.getAll', () => {
@@ -403,6 +499,9 @@ describe('app/background', () => {
   context('integration', () => {
     beforeEach(function (done) {
       done = _.once(done)
+
+      client.connect.restore()
+
       this.server.on('connection', (socket1) => {
         this.socket = socket1
 
diff --git a/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts b/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
index b255009c12c4..6bac191da062 100644
--- a/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
+++ b/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
@@ -302,7 +302,7 @@ function startAppServer (mode: 'component' | 'e2e' = 'e2e', options: { skipMocki
 
         return ctx.appServerPort
       }, { log: false, mode, url: win.top ? win.top.location.href : undefined, ...options }).then((serverPort) => {
-        log.set({ message: `port: ${serverPort}` })
+        log?.set({ message: `port: ${serverPort}` })
         Cypress.env('e2e_serverPort', serverPort)
       })
     })
@@ -370,8 +370,8 @@ function withCtx<T extends Partial<WithCtxOptions>, R> (fn: (ctx: DataContext, o
     fn: fn.toString(),
     options: rest,
   }, { timeout: timeout ?? Cypress.env('e2e_isDebugging') ? NO_TIMEOUT : SIXTY_SECONDS, log: Boolean(Cypress.env('e2e_isDebugging')) }).then((result) => {
-    _log.set('result', result)
-    _log.end()
+    _log?.set('result', result)
+    _log?.end()
 
     if (result.error) {
       const err = new Error(result.error.message)
@@ -452,13 +452,13 @@ function taskInternal<T extends keyof E2ETaskMap> (name: T, arg: Parameters<E2ET
   return cy.task<Resolved<ReturnType<E2ETaskMap[T]>>>(name, arg, { log: isDebugging, timeout: options.timeout ?? (isDebugging ? NO_TIMEOUT : TEN_SECONDS) })
 }
 
-function logInternal<T> (name: string | Partial<Cypress.LogConfig>, cb: (log: Cypress.Log) => Cypress.Chainable<T>, opts: Partial<Cypress.Loggable> = {}): Cypress.Chainable<T> {
+function logInternal<T> (name: string | Partial<Cypress.LogConfig>, cb: (log: Cypress.Log | undefined) => Cypress.Chainable<T>, opts: Partial<Cypress.Loggable> = {}): Cypress.Chainable<T> {
   const _log = typeof name === 'string'
     ? Cypress.log({ name, message: '' })
     : Cypress.log(name)
 
   return cb(_log).then<T>((val) => {
-    _log.end()
+    _log?.end()
 
     return val
   })
diff --git a/packages/frontend-shared/cypress/fixtures/config.json b/packages/frontend-shared/cypress/fixtures/config.json
index d69a712ad9be..19221291c299 100644
--- a/packages/frontend-shared/cypress/fixtures/config.json
+++ b/packages/frontend-shared/cypress/fixtures/config.json
@@ -101,7 +101,7 @@
   {
     "value": false,
     "from": "default",
-    "field": "experimentalSessionSupport"
+    "field": "experimentalSessionAndOrigin"
   },
   {
     "value": "",
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts b/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
index 1cc15214381e..9580706e9caf 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
@@ -43,7 +43,7 @@ export function testUrqlClient (context: ClientTestContext,
                 consoleProps () {
                   return result
                 },
-              }).end()
+              })?.end()
 
               if (mutationResolvers && result.operation.kind === 'mutation') {
                 const firstMutation = result.operation.query.definitions[0]
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
index befed8b4b1e0..53e3c6c02994 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
@@ -123,7 +123,7 @@ export const registerMountFn = ({ plugins }: MountFnOptions = {}) => {
                 source: print(source),
               }))
             },
-          }).end()
+          })?.end()
         }
 
         return props.gql ? options.render(props.gql) : h('div')
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 6105f45f0e80..6d144ebc61e0 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -394,9 +394,9 @@
         "name": "Interactive Run Events",
         "description": "Allows listening to the [`before:run`](https://on.cypress.io/before-run), [`after:run`](https://on.cypress.io/after-run), [`before:spec`](https://on.cypress.io/before-spec), and [`after:spec`](https://on.cypress.io/after-spec) events in plugins during interactive mode."
       },
-      "experimentalSessionSupport": {
-        "name": "Session",
-        "description": "Enable use of [`cy.session()`](https://on.cypress.io/session) and new behavior to handle caching and restoring cookies, localStorage, and sessionStorage."
+      "experimentalSessionAndOrigin": {
+        "name": "Cross-origin and Session",
+        "description": "Enables cross-origin and improved session support, including the [`cy.origin()`](https://on.cypress.io/origin) and [`cy.session()`](https://on.cypress.io/session) commands."
       },
       "experimentalSourceRewriting": {
         "name": "Source Rewriting",
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index c9d7ba94704a..7f70a671ab8c 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -557,6 +557,7 @@ enum ErrorTypeEnum {
   EXPERIMENTAL_NETWORK_STUBBING_REMOVED
   EXPERIMENTAL_RUN_EVENTS_REMOVED
   EXPERIMENTAL_SAMESITE_REMOVED
+  EXPERIMENTAL_SESSION_SUPPORT_REMOVED
   EXPERIMENTAL_SHADOW_DOM_REMOVED
   EXPERIMENTAL_STUDIO_REMOVED
   EXTENSION_NOT_LOADED
diff --git a/packages/launcher/package.json b/packages/launcher/package.json
index 2a10a6dc40dc..7ad3326366f9 100644
--- a/packages/launcher/package.json
+++ b/packages/launcher/package.json
@@ -26,7 +26,6 @@
     "@packages/types": "0.0.0-development",
     "chai": "3.5.0",
     "chai-as-promised": "7.1.1",
-    "cross-env": "6.0.3",
     "mocha": "3.5.3",
     "rimraf": "3.0.2",
     "sinon": "^10.0.0",
diff --git a/packages/net-stubbing/package.json b/packages/net-stubbing/package.json
index f3e3782fb8d9..a55ba38aa51e 100644
--- a/packages/net-stubbing/package.json
+++ b/packages/net-stubbing/package.json
@@ -18,7 +18,6 @@
     "throttle": "^1.0.3"
   },
   "devDependencies": {
-    "bin-up": "1.2.0",
     "chai": "4.2.0",
     "mocha": "7.1.2",
     "rimraf": "3.0.2"
diff --git a/packages/network/lib/cors.ts b/packages/network/lib/cors.ts
index a9b4cb876ef4..00adc5b15647 100644
--- a/packages/network/lib/cors.ts
+++ b/packages/network/lib/cors.ts
@@ -2,18 +2,13 @@ import _ from 'lodash'
 import * as uri from './uri'
 import debugModule from 'debug'
 import _parseDomain, { ParsedDomain } from '@cypress/parse-domain'
+import type { ParsedHost } from './types'
 
 const debug = debugModule('cypress:network:cors')
 
 // match IP addresses or anything following the last .
 const customTldsRe = /(^[\d\.]+$|\.[^\.]+$)/
 
-type ParsedHost = {
-  port?: string
-  tld?: string
-  domain?: string
-}
-
 export function getSuperDomain (url) {
   const parsed = parseUrlIntoDomainTldPort(url)
 
@@ -66,6 +61,16 @@ export function parseUrlIntoDomainTldPort (str) {
   return obj
 }
 
+export function getDomainNameFromUrl (url: string) {
+  const parsedHost = parseUrlIntoDomainTldPort(url)
+
+  return getDomainNameFromParsedHost(parsedHost)
+}
+
+export function getDomainNameFromParsedHost (parsedHost: ParsedHost) {
+  return _.compact([parsedHost.domain, parsedHost.tld]).join('.')
+}
+
 export function urlMatchesOriginPolicyProps (urlStr, props) {
   // take a shortcut here in the case
   // where remoteHostAndPort is null
@@ -79,9 +84,33 @@ export function urlMatchesOriginPolicyProps (urlStr, props) {
   return _.isEqual(parsedUrl, props)
 }
 
+export function urlOriginsMatch (url1, url2) {
+  if (!url1 || !url2) return false
+
+  const parsedUrl1 = parseUrlIntoDomainTldPort(url1)
+  const parsedUrl2 = parseUrlIntoDomainTldPort(url2)
+
+  return _.isEqual(parsedUrl1, parsedUrl2)
+}
+
+declare module 'url' {
+  interface UrlWithStringQuery {
+    format(): string
+  }
+}
+
 export function urlMatchesOriginProtectionSpace (urlStr, origin) {
   const normalizedUrl = uri.addDefaultPort(urlStr).format()
   const normalizedOrigin = uri.addDefaultPort(origin).format()
 
   return _.startsWith(normalizedUrl, normalizedOrigin)
 }
+
+export function getOriginPolicy (url: string) {
+  // @ts-ignore
+  const { port, protocol } = new URL(url)
+
+  // origin policy is comprised of:
+  // protocol + superdomain + port (subdomain is not factored in)
+  return _.compact([`${protocol}//${getSuperDomain(url)}`, port]).join(':')
+}
diff --git a/packages/network/lib/types.ts b/packages/network/lib/types.ts
new file mode 100644
index 000000000000..c3cf8a2736dc
--- /dev/null
+++ b/packages/network/lib/types.ts
@@ -0,0 +1,5 @@
+export type ParsedHost = {
+  port?: string
+  tld?: string
+  domain?: string
+}
diff --git a/packages/network/lib/uri.ts b/packages/network/lib/uri.ts
index 1d88cf47c138..e7e8d83f7b18 100644
--- a/packages/network/lib/uri.ts
+++ b/packages/network/lib/uri.ts
@@ -6,7 +6,7 @@
 // - https://nodejs.org/api/url.html#url_url_format_urlobject
 
 import _ from 'lodash'
-import url from 'url'
+import url, { URL } from 'url'
 
 // yup, protocol contains a: ':' colon
 // at the end of it (-______________-)
@@ -87,3 +87,19 @@ export function addDefaultPort (urlToCheck) {
 export function getPath (urlToCheck) {
   return url.parse(urlToCheck).path
 }
+
+const localhostIPRegex = /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+
+export function isLocalhost (url: URL) {
+  return (
+    // https://datatracker.ietf.org/doc/html/draft-west-let-localhost-be-localhost#section-2
+    url.hostname === 'localhost'
+    || url.hostname.endsWith('.localhost')
+    // [::1] is the IPv6 localhost address
+    // See https://datatracker.ietf.org/doc/html/rfc4291#section-2.5.3
+    || url.hostname === '[::1]'
+    // 127.0.0.0/8 are considered localhost for IPv4
+    // See https://datatracker.ietf.org/doc/html/rfc5735 (Page 3)
+    || localhostIPRegex.test(url.hostname)
+  )
+}
diff --git a/packages/network/test/unit/cors_spec.ts b/packages/network/test/unit/cors_spec.ts
index 5031badf4c9a..76870b113624 100644
--- a/packages/network/test/unit/cors_spec.ts
+++ b/packages/network/test/unit/cors_spec.ts
@@ -261,4 +261,16 @@ describe('lib/cors', () => {
       isNotMatch('http://foo.example.com/', 'http://foo.bar.example.com')
     })
   })
+
+  context('.getOriginPolicy', () => {
+    it('ports', () => {
+      expect(cors.getOriginPolicy('https://example.com')).to.equal('https://example.com')
+      expect(cors.getOriginPolicy('http://example.com:8080')).to.equal('http://example.com:8080')
+    })
+
+    it('subdomain', () => {
+      expect(cors.getOriginPolicy('http://www.example.com')).to.equal('http://example.com')
+      expect(cors.getOriginPolicy('http://www.app.herokuapp.com:8080')).to.equal('http://app.herokuapp.com:8080')
+    })
+  })
 })
diff --git a/packages/network/test/unit/uri_spec.ts b/packages/network/test/unit/uri_spec.ts
new file mode 100644
index 000000000000..3d8fe82c9568
--- /dev/null
+++ b/packages/network/test/unit/uri_spec.ts
@@ -0,0 +1,40 @@
+import { expect } from 'chai'
+import { URL } from 'url'
+
+import { uri } from '../../lib'
+
+describe('lib/uri', () => {
+  context('.isLocalhost', () => {
+    it('http://localhost is localhost', () => {
+      expect(uri.isLocalhost(new URL('http://localhost'))).to.be.true
+    })
+
+    it('https://localhost is localhost', () => {
+      expect(uri.isLocalhost(new URL('https://localhost'))).to.be.true
+    })
+
+    it('http://127.0.0.1 is localhost', () => {
+      expect(uri.isLocalhost(new URL('http://127.0.0.1'))).to.be.true
+    })
+
+    it('http://127.0.0.9 is localhost', () => {
+      expect(uri.isLocalhost(new URL('http://127.0.0.9'))).to.be.true
+    })
+
+    it('http://[::1] is localhost', () => {
+      expect(uri.isLocalhost(new URL('http://[::1]'))).to.be.true
+    })
+
+    it('http://128.0.0.1 is NOT localhost', () => {
+      expect(uri.isLocalhost(new URL('http://128.0.0.1'))).to.be.false
+    })
+
+    it('http:foobar.com is NOT localhost', () => {
+      expect(uri.isLocalhost(new URL('http:foobar.com'))).to.be.false
+    })
+
+    it('https:foobar.com is NOT localhost', () => {
+      expect(uri.isLocalhost(new URL('https:foobar.com'))).to.be.false
+    })
+  })
+})
diff --git a/packages/proxy/lib/http/index.ts b/packages/proxy/lib/http/index.ts
index f6c84930c34b..c2e81ed0288c 100644
--- a/packages/proxy/lib/http/index.ts
+++ b/packages/proxy/lib/http/index.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import type EventEmitter from 'events'
 import type CyServer from '@packages/server'
 import type {
   CypressIncomingRequest,
@@ -17,8 +18,10 @@ import type { Request, Response } from 'express'
 import RequestMiddleware from './request-middleware'
 import ResponseMiddleware from './response-middleware'
 import { DeferredSourceMapCache } from '@packages/rewriter'
+import type { Browser } from '@packages/server/lib/browsers/types'
+import type { RemoteStates } from '@packages/server/lib/remote_states'
 
-const debugRequests = Debug('cypress-verbose:proxy:http')
+export const debugVerbose = Debug('cypress-verbose:proxy:http')
 
 export enum HttpStages {
   IncomingRequest,
@@ -42,7 +45,10 @@ type HttpMiddlewareCtx<T> = {
   debug: Debug.Debugger
   middleware: HttpMiddlewareStacks
   deferSourceMapRewrite: (opts: { js: string, url: string }) => string
+  getCurrentBrowser: () => Browser | Partial<Browser> & Pick<Browser, 'family'> | null
   getPreRequest: (cb: GetPreRequestCb) => void
+  getPreviousAUTRequestUrl: Http['getPreviousAUTRequestUrl']
+  setPreviousAUTRequestUrl: Http['setPreviousAUTRequestUrl']
 } & T
 
 export const defaultMiddleware = {
@@ -52,22 +58,23 @@ export const defaultMiddleware = {
 }
 
 export type ServerCtx = Readonly<{
-  config: CyServer.Config
+  config: CyServer.Config & Cypress.Config
   shouldCorrelatePreRequests?: () => boolean
+  getCurrentBrowser: () => Browser | Partial<Browser> & Pick<Browser, 'family'> | null
   getFileServerToken: () => string
-  getRemoteState: CyServer.getRemoteState
+  remoteStates: RemoteStates
   getRenderedHTMLOrigins: Http['getRenderedHTMLOrigins']
   netStubbingState: NetStubbingState
   middleware: HttpMiddlewareStacks
   socket: CyServer.Socket
   request: any
+  serverBus: EventEmitter
 }>
 
 const READONLY_MIDDLEWARE_KEYS: (keyof HttpMiddlewareThis<{}>)[] = [
   'buffers',
   'config',
   'getFileServerToken',
-  'getRemoteState',
   'netStubbingState',
   'next',
   'end',
@@ -76,7 +83,7 @@ const READONLY_MIDDLEWARE_KEYS: (keyof HttpMiddlewareThis<{}>)[] = [
   'skipMiddleware',
 ]
 
-type HttpMiddlewareThis<T> = HttpMiddlewareCtx<T> & ServerCtx & Readonly<{
+export type HttpMiddlewareThis<T> = HttpMiddlewareCtx<T> & ServerCtx & Readonly<{
   buffers: HttpBuffers
 
   next: () => void
@@ -192,14 +199,17 @@ export class Http {
   config: CyServer.Config
   shouldCorrelatePreRequests: () => boolean
   deferredSourceMapCache: DeferredSourceMapCache
+  getCurrentBrowser: () => Browser | Partial<Browser> & Pick<Browser, 'family'> | null
   getFileServerToken: () => string
-  getRemoteState: () => any
+  remoteStates: RemoteStates
   middleware: HttpMiddlewareStacks
   netStubbingState: NetStubbingState
   preRequests: PreRequests = new PreRequests()
   request: any
   socket: CyServer.Socket
+  serverBus: EventEmitter
   renderedHTMLOrigins: {[key: string]: boolean} = {}
+  previousAUTRequestUrl?: string
 
   constructor (opts: ServerCtx & { middleware?: HttpMiddlewareStacks }) {
     this.buffers = new HttpBuffers()
@@ -207,12 +217,14 @@ export class Http {
 
     this.config = opts.config
     this.shouldCorrelatePreRequests = opts.shouldCorrelatePreRequests || (() => false)
+    this.getCurrentBrowser = opts.getCurrentBrowser
     this.getFileServerToken = opts.getFileServerToken
-    this.getRemoteState = opts.getRemoteState
+    this.remoteStates = opts.remoteStates
     this.middleware = opts.middleware
     this.netStubbingState = opts.netStubbingState
     this.socket = opts.socket
     this.request = opts.request
+    this.serverBus = opts.serverBus
 
     if (typeof opts.middleware === 'undefined') {
       this.middleware = defaultMiddleware
@@ -226,14 +238,16 @@ export class Http {
       buffers: this.buffers,
       config: this.config,
       shouldCorrelatePreRequests: this.shouldCorrelatePreRequests,
+      getCurrentBrowser: this.getCurrentBrowser,
       getFileServerToken: this.getFileServerToken,
-      getRemoteState: this.getRemoteState,
+      remoteStates: this.remoteStates,
       request: this.request,
       middleware: _.cloneDeep(this.middleware),
       netStubbingState: this.netStubbingState,
       socket: this.socket,
+      serverBus: this.serverBus,
       debug: (formatter, ...args) => {
-        debugRequests(`%s %s %s ${formatter}`, ctx.req.method, ctx.req.proxiedUrl, ctx.stage, ...args)
+        debugVerbose(`%s %s %s ${formatter}`, ctx.req.method, ctx.req.proxiedUrl, ctx.stage, ...args)
       },
       deferSourceMapRewrite: (opts) => {
         this.deferredSourceMapCache.defer({
@@ -242,6 +256,8 @@ export class Http {
         })
       },
       getRenderedHTMLOrigins: this.getRenderedHTMLOrigins,
+      getPreviousAUTRequestUrl: this.getPreviousAUTRequestUrl,
+      setPreviousAUTRequestUrl: this.setPreviousAUTRequestUrl,
       getPreRequest: (cb) => {
         this.preRequests.get(ctx.req, ctx.debug, cb)
       },
@@ -275,6 +291,14 @@ export class Http {
     return this.renderedHTMLOrigins
   }
 
+  getPreviousAUTRequestUrl = () => {
+    return this.previousAUTRequestUrl
+  }
+
+  setPreviousAUTRequestUrl = (url) => {
+    this.previousAUTRequestUrl = url
+  }
+
   async handleSourceMapRequest (req: Request, res: Response) {
     try {
       const sm = await this.deferredSourceMapCache.resolve(req.params.id, req.headers)
@@ -291,6 +315,7 @@ export class Http {
 
   reset () {
     this.buffers.reset()
+    this.setPreviousAUTRequestUrl(undefined)
   }
 
   setBuffer (buffer) {
diff --git a/packages/proxy/lib/http/request-middleware.ts b/packages/proxy/lib/http/request-middleware.ts
index 61756212c662..53043fd982f0 100644
--- a/packages/proxy/lib/http/request-middleware.ts
+++ b/packages/proxy/lib/http/request-middleware.ts
@@ -18,6 +18,16 @@ const LogRequest: RequestMiddleware = function () {
   this.next()
 }
 
+const ExtractIsAUTFrameHeader: RequestMiddleware = async function () {
+  this.req.isAUTFrame = !!this.req.headers['x-cypress-is-aut-frame']
+
+  if (this.req.headers['x-cypress-is-aut-frame']) {
+    delete this.req.headers['x-cypress-is-aut-frame']
+  }
+
+  this.next()
+}
+
 const CorrelateBrowserPreRequest: RequestMiddleware = async function () {
   if (!this.shouldCorrelatePreRequests()) {
     return this.next()
@@ -71,7 +81,7 @@ const MaybeEndRequestWithBufferedResponse: RequestMiddleware = function () {
 
   if (buffer) {
     this.debug('ending request with buffered response')
-    this.res.wantsInjection = 'full'
+    this.res.wantsInjection = buffer.isCrossOrigin ? 'fullCrossOrigin' : 'full'
 
     return this.onResponse(buffer.response, buffer.stream)
   }
@@ -131,9 +141,10 @@ function reqNeedsBasicAuthHeaders (req, { auth, origin }: Cypress.RemoteState) {
 }
 
 const MaybeSetBasicAuthHeaders: RequestMiddleware = function () {
-  const remoteState = this.getRemoteState()
+  // get the remote state for the proxied url
+  const remoteState = this.remoteStates.get(this.req.proxiedUrl)
 
-  if (remoteState.auth && reqNeedsBasicAuthHeaders(this.req, remoteState)) {
+  if (remoteState?.auth && reqNeedsBasicAuthHeaders(this.req, remoteState)) {
     const { auth } = remoteState
     const base64 = Buffer.from(`${auth.username}:${auth.password}`).toString('base64')
 
@@ -154,12 +165,12 @@ const SendRequestOutgoing: RequestMiddleware = function () {
 
   const requestBodyBuffered = !!this.req.body
 
-  const { strategy, origin, fileServer } = this.getRemoteState()
+  const { strategy, origin, fileServer } = this.remoteStates.current()
 
   if (strategy === 'file' && requestOptions.url.startsWith(origin)) {
     this.req.headers['x-cypress-authorization'] = this.getFileServerToken()
 
-    requestOptions.url = requestOptions.url.replace(origin, fileServer)
+    requestOptions.url = requestOptions.url.replace(origin, fileServer as string)
   }
 
   if (requestBodyBuffered) {
@@ -193,6 +204,7 @@ const SendRequestOutgoing: RequestMiddleware = function () {
 
 export default {
   LogRequest,
+  ExtractIsAUTFrameHeader,
   MaybeEndRequestWithBufferedResponse,
   CorrelateBrowserPreRequest,
   SendToDriver,
diff --git a/packages/proxy/lib/http/response-middleware.ts b/packages/proxy/lib/http/response-middleware.ts
index b936dcb078be..2455b4d0306c 100644
--- a/packages/proxy/lib/http/response-middleware.ts
+++ b/packages/proxy/lib/http/response-middleware.ts
@@ -1,10 +1,10 @@
 import _ from 'lodash'
 import charset from 'charset'
 import type { CookieOptions } from 'express'
-import { cors, concatStream, httpUtils } from '@packages/network'
+import { cors, concatStream, httpUtils, uri } from '@packages/network'
 import type { CypressIncomingRequest, CypressOutgoingResponse } from '@packages/proxy'
 import debugModule from 'debug'
-import type { HttpMiddleware } from '.'
+import type { HttpMiddleware, HttpMiddlewareThis } from '.'
 import iconv from 'iconv-lite'
 import type { IncomingMessage, IncomingHttpHeaders } from 'http'
 import { InterceptResponse } from '@packages/net-stubbing'
@@ -12,8 +12,9 @@ import { PassThrough, Readable } from 'stream'
 import * as rewriter from './util/rewriter'
 import zlib from 'zlib'
 import { URL } from 'url'
+import type { Browser } from '@packages/server/lib/browsers/types'
 
-export type ResponseMiddleware = HttpMiddleware<{
+interface ResponseMiddlewareProps {
   /**
    * Before using `res.incomingResStream`, `prepareResStream` can be used
    * to remove any encoding that prevents it from being returned as plain text.
@@ -24,7 +25,9 @@ export type ResponseMiddleware = HttpMiddleware<{
   isGunzipped: boolean
   incomingRes: IncomingMessage
   incomingResStream: Readable
-}>
+}
+
+export type ResponseMiddleware = HttpMiddleware<ResponseMiddlewareProps>
 
 const debug = debugModule('cypress:proxy:http:response-middleware')
 
@@ -226,6 +229,33 @@ const PatchExpressSetHeader: ResponseMiddleware = function () {
   this.next()
 }
 
+const MaybeDelayForCrossOrigin: ResponseMiddleware = function () {
+  const isCrossOrigin = !reqMatchesOriginPolicy(this.req, this.remoteStates.current())
+  const isPreviousOrigin = this.remoteStates.isInOriginStack(this.req.proxiedUrl)
+  const isHTML = resContentTypeIs(this.incomingRes, 'text/html')
+  const isRenderedHTML = reqWillRenderHtml(this.req)
+  const isAUTFrame = this.req.isAUTFrame
+
+  // delay the response if this is a cross-origin (and not returning to a previous origin) html request from the AUT iframe
+  if (this.config.experimentalSessionAndOrigin && isCrossOrigin && !isPreviousOrigin && isAUTFrame && (isHTML || isRenderedHTML)) {
+    this.debug('is cross-origin, delay until cross:origin:release:html event')
+
+    this.serverBus.once('cross:origin:release:html', () => {
+      this.debug(`received cross:origin:release:html, let the response proceed`)
+
+      this.next()
+    })
+
+    this.serverBus.emit('cross:origin:delaying:html', {
+      href: this.req.proxiedUrl,
+    })
+
+    return
+  }
+
+  this.next()
+}
+
 const SetInjectionLevel: ResponseMiddleware = function () {
   this.res.isInitial = this.req.cookies['__cypress.initial'] === 'true'
 
@@ -237,28 +267,54 @@ const SetInjectionLevel: ResponseMiddleware = function () {
     this.getRenderedHTMLOrigins()[origin] = true
   }
 
-  const isReqMatchOriginPolicy = reqMatchesOriginPolicy(this.req, this.getRemoteState())
+  this.debug('determine injection')
+
+  const isReqMatchOriginPolicy = reqMatchesOriginPolicy(this.req, this.remoteStates.current())
   const getInjectionLevel = () => {
     if (this.incomingRes.headers['x-cypress-file-server-error'] && !this.res.isInitial) {
+      this.debug('- partial injection (x-cypress-file-server-error)')
+
       return 'partial'
     }
 
-    if (!resContentTypeIs(this.incomingRes, 'text/html') || !isReqMatchOriginPolicy) {
+    const isSecondaryOrigin = this.remoteStates.isSecondaryOrigin(this.req.proxiedUrl)
+    const isHTML = resContentTypeIs(this.incomingRes, 'text/html')
+    const isAUTFrame = this.req.isAUTFrame
+
+    if (this.config.experimentalSessionAndOrigin && isSecondaryOrigin && isAUTFrame && (isHTML || isRenderedHTML)) {
+      this.debug('- cross origin injection')
+
+      return 'fullCrossOrigin'
+    }
+
+    if (!isHTML || (!isReqMatchOriginPolicy && !isAUTFrame)) {
+      this.debug('- no injection (not html)')
+
       return false
     }
 
     if (this.res.isInitial) {
+      this.debug('- full injection')
+
       return 'full'
     }
 
     if (!isRenderedHTML) {
+      this.debug('- no injection (not rendered html)')
+
       return false
     }
 
+    this.debug('- partial injection (default)')
+
     return 'partial'
   }
 
-  if (!this.res.wantsInjection) {
+  if (this.res.wantsInjection != null) {
+    this.debug('- already has injection: %s', this.res.wantsInjection)
+  }
+
+  if (this.res.wantsInjection == null) {
     this.res.wantsInjection = getInjectionLevel()
   }
 
@@ -332,11 +388,89 @@ const MaybePreventCaching: ResponseMiddleware = function () {
   this.next()
 }
 
+const determineIfNeedsCrossOriginHandling = (ctx: HttpMiddlewareThis<ResponseMiddlewareProps>) => {
+  const previousAUTRequestUrl = ctx.getPreviousAUTRequestUrl()
+
+  // A cookie needs cross origin handling if it's an AUT request and
+  // either the request itself is cross-origin or the origins between
+  // requests don't match, since the browser won't set them in that
+  // case and if it's secondary-origin -> primary-origin, we don't
+  // recognize the request as cross-origin
+  return (
+    !!ctx.req.isAUTFrame &&
+    (
+      (previousAUTRequestUrl && !cors.urlOriginsMatch(previousAUTRequestUrl, ctx.req.proxiedUrl))
+      || !ctx.remoteStates.isPrimaryOrigin(ctx.req.proxiedUrl)
+    )
+  )
+}
+
+interface EnsureSameSiteNoneProps {
+  cookie: string
+  browser: Browser | { family: string | null }
+  isLocalhost: boolean
+  url: URL
+}
+
+const cookieSameSiteRegex = /SameSite=(\w+)/i
+const cookieSecureRegex = /(^|\W)Secure(\W|$)/i
+const cookieSecureSemicolonRegex = /;\s*Secure/i
+
+const ensureSameSiteNone = ({ cookie, browser, isLocalhost, url }: EnsureSameSiteNoneProps) => {
+  debug('original cookie: %s', cookie)
+
+  if (cookieSameSiteRegex.test(cookie)) {
+    debug('change cookie to SameSite=None')
+    cookie = cookie.replace(cookieSameSiteRegex, 'SameSite=None')
+  } else {
+    debug('add SameSite=None to cookie')
+    cookie += '; SameSite=None'
+  }
+
+  const isFirefox = browser.family === 'firefox'
+
+  // Secure is required for SameSite=None cookies to be set in secure contexts
+  // (https://w3c.github.io/webappsec-secure-contexts/#is-origin-trustworthy),
+  // but will not allow the cookie to be set in an insecure context.
+  // Normally http://localhost is considered a secure context (see
+  // https://w3c.github.io/webappsec-secure-contexts/#localhost), but Firefox
+  // does not consider the Cypress-launched browser to be a secure context (see
+  // https://github.com/cypress-io/cypress/issues/18217). For that reason, we
+  // remove Secure from http://localhost cookies in Firefox.
+  if (cookieSecureRegex.test(cookie)) {
+    if (isFirefox && isLocalhost && url.protocol === 'http:') {
+      debug('remove Secure from cookie')
+      cookie = cookie.replace(cookieSecureSemicolonRegex, '')
+    }
+  } else if (!isFirefox || url.protocol === 'https:') {
+    debug('add Secure to cookie')
+    cookie += '; Secure'
+  }
+
+  debug('resulting cookie: %s', cookie)
+
+  return cookie
+}
+
 const CopyCookiesFromIncomingRes: ResponseMiddleware = function () {
   const cookies: string | string[] | undefined = this.incomingRes.headers['set-cookie']
 
   if (cookies) {
-    ([] as string[]).concat(cookies).forEach((cookie) => {
+    const needsCrossOriginHandling = (
+      this.config.experimentalSessionAndOrigin
+      && determineIfNeedsCrossOriginHandling(this)
+    )
+    const browser = this.getCurrentBrowser() || { family: null }
+    const url = new URL(this.req.proxiedUrl)
+    const isLocalhost = uri.isLocalhost(url)
+
+    debug('force SameSite=None?', needsCrossOriginHandling)
+
+    ;([] as string[]).concat(cookies).forEach((cookie) => {
+      if (needsCrossOriginHandling) {
+        cookie = ensureSameSiteNone({ cookie, browser, isLocalhost, url })
+      }
+
       try {
         this.res.append('Set-Cookie', cookie)
       } catch (err) {
@@ -359,7 +493,7 @@ const MaybeSendRedirectToClient: ResponseMiddleware = function () {
     return this.next()
   }
 
-  setInitialCookie(this.res, this.getRemoteState(), true)
+  setInitialCookie(this.res, this.remoteStates.current(), true)
 
   debug('redirecting to new url %o', { statusCode, newUrl })
   this.res.redirect(Number(statusCode), newUrl)
@@ -373,7 +507,7 @@ const CopyResponseStatusCode: ResponseMiddleware = function () {
 }
 
 const ClearCyInitialCookie: ResponseMiddleware = function () {
-  setInitialCookie(this.res, this.getRemoteState(), false)
+  setInitialCookie(this.res, this.remoteStates.current(), false)
   this.next()
 }
 
@@ -402,7 +536,7 @@ const MaybeInjectHtml: ResponseMiddleware = function () {
     const nodeCharset = getNodeCharsetFromResponse(this.incomingRes.headers, body)
     const decodedBody = iconv.decode(body, nodeCharset)
     const injectedBody = await rewriter.html(decodedBody, {
-      domainName: this.getRemoteState().domainName,
+      domainName: cors.getDomainNameFromUrl(this.req.proxiedUrl),
       wantsInjection: this.res.wantsInjection,
       wantsSecurityRemoved: this.res.wantsSecurityRemoved,
       isHtml: isHtml(this.incomingRes),
@@ -452,6 +586,12 @@ const GzipBody: ResponseMiddleware = function () {
 }
 
 const SendResponseBodyToClient: ResponseMiddleware = function () {
+  if (this.req.isAUTFrame) {
+    // track the previous AUT request URL so we know if the next requests
+    // is cross-origin
+    this.setPreviousAUTRequestUrl(this.req.proxiedUrl)
+  }
+
   this.incomingResStream.pipe(this.res).on('error', this.onError)
   this.res.on('end', () => this.end())
 }
@@ -461,6 +601,7 @@ export default {
   AttachPlainTextStreamFn,
   InterceptResponse,
   PatchExpressSetHeader,
+  MaybeDelayForCrossOrigin,
   SetInjectionLevel,
   OmitProblematicHeaders,
   MaybePreventCaching,
diff --git a/packages/proxy/lib/http/util/buffers.ts b/packages/proxy/lib/http/util/buffers.ts
index b1ad4b63a6ee..4c285143e727 100644
--- a/packages/proxy/lib/http/util/buffers.ts
+++ b/packages/proxy/lib/http/util/buffers.ts
@@ -12,6 +12,7 @@ export type HttpBuffer = {
   response: IncomingMessage
   stream: Readable
   url: string
+  isCrossOrigin: boolean
 }
 
 const stripPort = (url) => {
diff --git a/packages/proxy/lib/http/util/inject.ts b/packages/proxy/lib/http/util/inject.ts
index 72bb70361542..cb0872c3d965 100644
--- a/packages/proxy/lib/http/util/inject.ts
+++ b/packages/proxy/lib/http/util/inject.ts
@@ -1,5 +1,5 @@
 import { oneLine } from 'common-tags'
-import { getRunnerInjectionContents } from '@packages/resolve-dist'
+import { getRunnerInjectionContents, getRunnerCrossOriginInjectionContents } from '@packages/resolve-dist'
 
 export function partial (domain) {
   return oneLine`
@@ -20,3 +20,15 @@ export function full (domain) {
     `
   })
 }
+
+export function fullCrossOrigin (domain) {
+  return getRunnerCrossOriginInjectionContents().then((contents) => {
+    return oneLine`
+      <script type='text/javascript'>
+        document.domain = '${domain}';
+
+        ${contents}
+      </script>
+    `
+  })
+}
diff --git a/packages/proxy/lib/http/util/rewriter.ts b/packages/proxy/lib/http/util/rewriter.ts
index 8b101a151739..d6acef973aae 100644
--- a/packages/proxy/lib/http/util/rewriter.ts
+++ b/packages/proxy/lib/http/util/rewriter.ts
@@ -1,6 +1,7 @@
 import * as inject from './inject'
 import * as astRewriter from './ast-rewriter'
 import * as regexRewriter from './regex-rewriter'
+import type { CypressWantsInjection } from '../../types'
 
 export type SecurityOpts = {
   isHtml?: boolean
@@ -11,7 +12,7 @@ export type SecurityOpts = {
 
 export type InjectionOpts = {
   domainName: string
-  wantsInjection: WantsInjection
+  wantsInjection: CypressWantsInjection
   wantsSecurityRemoved: any
 }
 
@@ -20,8 +21,6 @@ const headRe = /(<head(?!er).*?>)/i
 const bodyRe = /(<body.*?>)/i
 const htmlRe = /(<html.*?>)/i
 
-type WantsInjection = 'full' | 'partial' | false
-
 function getRewriter (useAstSourceRewriting: boolean) {
   return useAstSourceRewriting ? astRewriter : regexRewriter
 }
@@ -30,6 +29,8 @@ function getHtmlToInject ({ domainName, wantsInjection }: InjectionOpts) {
   switch (wantsInjection) {
     case 'full':
       return inject.full(domainName)
+    case 'fullCrossOrigin':
+      return inject.fullCrossOrigin(domainName)
     case 'partial':
       return inject.partial(domainName)
     default:
diff --git a/packages/proxy/lib/types.ts b/packages/proxy/lib/types.ts
index 0c78c9e86a78..d6a8b2f1f54a 100644
--- a/packages/proxy/lib/types.ts
+++ b/packages/proxy/lib/types.ts
@@ -12,14 +12,17 @@ export type CypressIncomingRequest = Request & {
   body?: string
   responseTimeout?: number
   followRedirect?: boolean
+  isAUTFrame: boolean
 }
 
+export type CypressWantsInjection = 'full' | 'fullCrossOrigin' | 'partial' | false
+
 /**
  * An outgoing response to an incoming request to the Cypress web server.
  */
 export type CypressOutgoingResponse = Response & {
   isInitial: null | boolean
-  wantsInjection: 'full' | 'partial' | false
+  wantsInjection: CypressWantsInjection
   wantsSecurityRemoved: null | boolean
   body?: string | Readable
 }
diff --git a/packages/proxy/package.json b/packages/proxy/package.json
index 4a17cee443d5..d78701e4cfdd 100644
--- a/packages/proxy/package.json
+++ b/packages/proxy/package.json
@@ -29,6 +29,7 @@
     "@cypress/request-promise": "4.2.6",
     "@cypress/sinon-chai": "2.9.1",
     "@packages/resolve-dist": "0.0.0-development",
+    "@packages/server": "0.0.0-development",
     "@types/express": "4.17.2",
     "@types/supertest": "2.0.10",
     "express": "4.17.1",
diff --git a/packages/proxy/test/integration/net-stubbing.spec.ts b/packages/proxy/test/integration/net-stubbing.spec.ts
index eee1092c9b62..fd5bfe27957d 100644
--- a/packages/proxy/test/integration/net-stubbing.spec.ts
+++ b/packages/proxy/test/integration/net-stubbing.spec.ts
@@ -11,13 +11,14 @@ import { expect } from 'chai'
 import supertest from 'supertest'
 import { allowDestroy } from '@packages/network'
 import { EventEmitter } from 'events'
+import { RemoteStates } from '@packages/server/lib/remote_states'
 
 const Request = require('@packages/server/lib/request')
 const getFixture = async () => {}
 
 context('network stubbing', () => {
   let config
-  let remoteState
+  let remoteStates: RemoteStates
   let netStubbingState: NetStubbingState
   let app
   let destinationApp
@@ -27,7 +28,7 @@ context('network stubbing', () => {
 
   beforeEach((done) => {
     config = {}
-    remoteState = {}
+    remoteStates = new RemoteStates(() => {})
     socket = new EventEmitter()
     socket.toDriver = sinon.stub()
     app = express()
@@ -38,9 +39,12 @@ context('network stubbing', () => {
       netStubbingState,
       config,
       middleware: defaultMiddleware,
-      getRemoteState: () => remoteState,
+      getCurrentBrowser: () => ({ family: 'chromium' }),
+      remoteStates,
       getFileServerToken: () => 'fake-token',
       request: new Request(),
+      getRenderedHTMLOrigins: () => ({}),
+      serverBus: new EventEmitter(),
     })
 
     app.use((req, res, next) => {
@@ -59,6 +63,7 @@ context('network stubbing', () => {
 
     server = allowDestroy(destinationApp.listen(() => {
       destinationPort = server.address().port
+      remoteStates.set(`http://localhost:${destinationPort}`)
       done()
     }))
   })
@@ -92,6 +97,7 @@ context('network stubbing', () => {
         body: 'foo',
       },
       getFixture: async () => {},
+      matches: 1,
     })
 
     return supertest(app)
@@ -120,6 +126,7 @@ context('network stubbing', () => {
         },
       },
       getFixture: async () => {},
+      matches: 1,
     })
 
     return supertest(app)
@@ -142,6 +149,7 @@ context('network stubbing', () => {
         body: 'foo',
       },
       getFixture: async () => {},
+      matches: 1,
     })
 
     return supertest(app)
@@ -162,6 +170,7 @@ context('network stubbing', () => {
       },
       hasInterceptor: true,
       getFixture,
+      matches: 1,
     })
 
     socket.toDriver.callsFake((_, event, data) => {
@@ -179,6 +188,9 @@ context('network stubbing', () => {
           state: netStubbingState,
           getFixture,
           args: [],
+          socket: {
+            toDriver () {},
+          },
         })
       }
     })
@@ -229,6 +241,7 @@ context('network stubbing', () => {
       },
       hasInterceptor: true,
       getFixture,
+      matches: 1,
     })
 
     socket.toDriver.callsFake((_, event, data) => {
@@ -246,6 +259,9 @@ context('network stubbing', () => {
           state: netStubbingState,
           getFixture,
           args: [],
+          socket: {
+            toDriver () {},
+          },
         })
       }
     })
diff --git a/packages/proxy/test/unit/http/helpers.ts b/packages/proxy/test/unit/http/helpers.ts
index 70b1720fdbf5..654ffc710d30 100644
--- a/packages/proxy/test/unit/http/helpers.ts
+++ b/packages/proxy/test/unit/http/helpers.ts
@@ -1,11 +1,11 @@
-import { HttpMiddleware, _runStage } from '../../../lib/http'
+import { HttpMiddleware, HttpStages, _runStage } from '../../../lib/http'
 
 export function testMiddleware (middleware: HttpMiddleware<any>[], ctx = {}) {
   const fullCtx = {
+    debug: () => {},
     req: {},
     res: {},
     config: {},
-    getRemoteState: () => {},
 
     middleware: {
       0: middleware,
@@ -14,5 +14,9 @@ export function testMiddleware (middleware: HttpMiddleware<any>[], ctx = {}) {
     ...ctx,
   }
 
-  return _runStage(0, fullCtx)
+  const onError = (error) => {
+    throw error
+  }
+
+  return _runStage(HttpStages.IncomingRequest, fullCtx, onError)
 }
diff --git a/packages/proxy/test/unit/http/index.spec.ts b/packages/proxy/test/unit/http/index.spec.ts
index 4055144e398e..5b9a4c49515d 100644
--- a/packages/proxy/test/unit/http/index.spec.ts
+++ b/packages/proxy/test/unit/http/index.spec.ts
@@ -5,7 +5,6 @@ import sinon from 'sinon'
 describe('http', function () {
   context('Http.handle', function () {
     let config
-    let getRemoteState
     let middleware
     let incomingRequest
     let incomingResponse
@@ -14,8 +13,6 @@ describe('http', function () {
 
     beforeEach(function () {
       config = {}
-      getRemoteState = sinon.stub().returns({})
-
       incomingRequest = sinon.stub()
       incomingResponse = sinon.stub()
       error = sinon.stub()
@@ -26,7 +23,7 @@ describe('http', function () {
         [HttpStages.Error]: [error],
       }
 
-      httpOpts = { config, getRemoteState, middleware }
+      httpOpts = { config, middleware }
     })
 
     it('calls IncomingRequest stack, then IncomingResponse stack', function () {
@@ -99,7 +96,7 @@ describe('http', function () {
       const resAdded = {}
       const errorAdded = {}
 
-      let expectedKeys = ['req', 'res', 'config', 'getRemoteState', 'middleware']
+      let expectedKeys = ['req', 'res', 'config', 'middleware']
 
       incomingRequest.callsFake(function () {
         expect(this).to.include.keys(expectedKeys)
diff --git a/packages/proxy/test/unit/http/request-middleware.spec.ts b/packages/proxy/test/unit/http/request-middleware.spec.ts
index 1bde606e5caf..cdf7c1bbe649 100644
--- a/packages/proxy/test/unit/http/request-middleware.spec.ts
+++ b/packages/proxy/test/unit/http/request-middleware.spec.ts
@@ -1,11 +1,16 @@
 import _ from 'lodash'
 import RequestMiddleware from '../../../lib/http/request-middleware'
 import { expect } from 'chai'
+import { testMiddleware } from './helpers'
+import { CypressIncomingRequest, CypressOutgoingResponse } from '../../../lib'
+import { HttpBuffer, HttpBuffers } from '../../../lib/http/util/buffers'
+import { RemoteStates } from '@packages/server/lib/remote_states'
 
-describe('http/request-middleware', function () {
-  it('exports the members in the correct order', function () {
+describe('http/request-middleware', () => {
+  it('exports the members in the correct order', () => {
     expect(_.keys(RequestMiddleware)).to.have.ordered.members([
       'LogRequest',
+      'ExtractIsAUTFrameHeader',
       'MaybeEndRequestWithBufferedResponse',
       'CorrelateBrowserPreRequest',
       'SendToDriver',
@@ -17,4 +22,215 @@ describe('http/request-middleware', function () {
       'SendRequestOutgoing',
     ])
   })
+
+  describe('ExtractIsAUTFrameHeader', () => {
+    const { ExtractIsAUTFrameHeader } = RequestMiddleware
+
+    it('removes x-cypress-is-aut-frame header when it exists, sets in on the req', async () => {
+      const ctx = {
+        req: {
+          headers: {
+            'x-cypress-is-aut-frame': 'true',
+          },
+        } as Partial<CypressIncomingRequest>,
+      }
+
+      await testMiddleware([ExtractIsAUTFrameHeader], ctx)
+      .then(() => {
+        expect(ctx.req.headers['x-cypress-is-aut-frame']).not.to.exist
+        expect(ctx.req.isAUTFrame).to.be.true
+      })
+    })
+
+    it('removes x-cypress-is-aut-frame header when it does not exist, sets in on the req', async () => {
+      const ctx = {
+        req: {
+          headers: {},
+        } as Partial<CypressIncomingRequest>,
+      }
+
+      await testMiddleware([ExtractIsAUTFrameHeader], ctx)
+      .then(() => {
+        expect(ctx.req.headers['x-cypress-is-aut-frame']).not.to.exist
+        expect(ctx.req.isAUTFrame).to.be.false
+      })
+    })
+  })
+
+  describe('MaybeEndRequestWithBufferedResponse', () => {
+    const { MaybeEndRequestWithBufferedResponse } = RequestMiddleware
+
+    it('sets wantsInjection to full when a request is buffered', async () => {
+      const buffers = new HttpBuffers()
+      const buffer = { url: 'https://www.cypress.io/', isCrossOrigin: false } as HttpBuffer
+
+      buffers.set(buffer)
+
+      const ctx = {
+        buffers,
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+      }
+
+      await testMiddleware([MaybeEndRequestWithBufferedResponse], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('full')
+      })
+    })
+
+    it('sets wantsInjection to fullCrossOrigin when a cross origin request is buffered', async () => {
+      const buffers = new HttpBuffers()
+      const buffer = { url: 'https://www.cypress.io/', isCrossOrigin: true } as HttpBuffer
+
+      buffers.set(buffer)
+
+      const ctx = {
+        buffers,
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+      }
+
+      await testMiddleware([MaybeEndRequestWithBufferedResponse], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('fullCrossOrigin')
+      })
+    })
+
+    it('wantsInjection is not set when the request is not buffered', async () => {
+      const buffers = new HttpBuffers()
+      const buffer = { url: 'https://www.cypress.io/', isCrossOrigin: true } as HttpBuffer
+
+      buffers.set(buffer)
+
+      const ctx = {
+        buffers,
+        req: {
+          proxiedUrl: 'https://www.not-cypress.io/',
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+      }
+
+      await testMiddleware([MaybeEndRequestWithBufferedResponse], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.be.undefined
+      })
+    })
+  })
+
+  describe('MaybeSetBasicAuthHeaders', () => {
+    const { MaybeSetBasicAuthHeaders } = RequestMiddleware
+
+    it('adds auth header from remote state', async () => {
+      const headers = {}
+      const remoteStates = new RemoteStates(() => {})
+
+      remoteStates.set('https://www.cypress.io/', { auth: { username: 'u', password: 'p' } })
+
+      const ctx = {
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+          headers,
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+        remoteStates,
+      }
+
+      await testMiddleware([MaybeSetBasicAuthHeaders], ctx)
+      .then(() => {
+        const expectedAuthHeader = `Basic ${Buffer.from('u:p').toString('base64')}`
+
+        expect(ctx.req.headers['authorization']).to.equal(expectedAuthHeader)
+      })
+    })
+
+    it('does not add auth header if origins do not match', async () => {
+      const headers = {}
+      const remoteStates = new RemoteStates(() => {})
+
+      remoteStates.set('https://cypress.io/', { auth: { username: 'u', password: 'p' } }) // does not match due to subdomain
+
+      const ctx = {
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+          headers,
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+        remoteStates,
+      }
+
+      await testMiddleware([MaybeSetBasicAuthHeaders], ctx)
+      .then(() => {
+        expect(ctx.req.headers['authorization']).to.be.undefined
+      })
+    })
+
+    it('does not add auth header if remote does not have auth', async () => {
+      const headers = {}
+      const remoteStates = new RemoteStates(() => {})
+
+      remoteStates.set('https://www.cypress.io/')
+
+      const ctx = {
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+          headers,
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+        remoteStates,
+      }
+
+      await testMiddleware([MaybeSetBasicAuthHeaders], ctx)
+      .then(() => {
+        expect(ctx.req.headers['authorization']).to.be.undefined
+      })
+    })
+
+    it('does not add auth header if remote not found', async () => {
+      const headers = {}
+      const remoteStates = new RemoteStates(() => {})
+
+      remoteStates.set('http://localhost:3500', { auth: { username: 'u', password: 'p' } })
+
+      const ctx = {
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+          headers,
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+        remoteStates,
+      }
+
+      await testMiddleware([MaybeSetBasicAuthHeaders], ctx)
+      .then(() => {
+        expect(ctx.req.headers['authorization']).to.be.undefined
+      })
+    })
+
+    it('does not update auth header from remote if request already has auth', async () => {
+      const headers = {
+        authorization: 'token',
+      }
+      const remoteStates = new RemoteStates(() => {})
+
+      remoteStates.set('https://www.cypress.io/', { auth: { username: 'u', password: 'p' } })
+
+      const ctx = {
+        req: {
+          proxiedUrl: 'https://www.cypress.io/',
+          headers,
+        },
+        res: {} as Partial<CypressOutgoingResponse>,
+        remoteStates,
+      }
+
+      await testMiddleware([MaybeSetBasicAuthHeaders], ctx)
+      .then(() => {
+        expect(ctx.req.headers['authorization']).to.equal('token')
+      })
+    })
+  })
 })
diff --git a/packages/proxy/test/unit/http/response-middleware.spec.ts b/packages/proxy/test/unit/http/response-middleware.spec.ts
index b168d7db638d..172f63efe7a0 100644
--- a/packages/proxy/test/unit/http/response-middleware.spec.ts
+++ b/packages/proxy/test/unit/http/response-middleware.spec.ts
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import ResponseMiddleware from '../../../lib/http/response-middleware'
+import { debugVerbose } from '../../../lib/http'
 import { expect } from 'chai'
 import sinon from 'sinon'
-import {
-  testMiddleware,
-} from './helpers'
+import { testMiddleware } from './helpers'
+import { RemoteStates } from '@packages/server/lib/remote_states'
+import EventEmitter from 'events'
 
 describe('http/response-middleware', function () {
   it('exports the members in the correct order', function () {
@@ -13,6 +14,7 @@ describe('http/response-middleware', function () {
       'AttachPlainTextStreamFn',
       'InterceptResponse',
       'PatchExpressSetHeader',
+      'MaybeDelayForCrossOrigin',
       'SetInjectionLevel',
       'OmitProblematicHeaders',
       'MaybePreventCaching',
@@ -128,47 +130,409 @@ describe('http/response-middleware', function () {
     }
   })
 
+  describe('MaybeDelayForCrossOrigin', function () {
+    const { MaybeDelayForCrossOrigin } = ResponseMiddleware
+    let ctx
+
+    it('doesn\'t do anything when not html or rendered html', function () {
+      prepareContext({})
+
+      return testMiddleware([MaybeDelayForCrossOrigin], ctx)
+      .then(() => {
+        expect(ctx.serverBus.emit).not.to.be.called
+      })
+    })
+
+    it('doesn\'t do anything when not AUT frame', function () {
+      prepareContext({
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+      })
+
+      return testMiddleware([MaybeDelayForCrossOrigin], ctx)
+      .then(() => {
+        expect(ctx.serverBus.emit).not.to.be.called
+      })
+    })
+
+    it('doesn\'t do anything when "experimentalSessionAndOrigin" config flag is not set to true"', function () {
+      prepareContext({
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+      })
+
+      return testMiddleware([MaybeDelayForCrossOrigin], ctx)
+      .then(() => {
+        expect(ctx.serverBus.emit).not.to.be.called
+      })
+    })
+
+    it('doesn\'t do anything when request is for a previous origin in the stack', function () {
+      prepareContext({
+        req: {
+          isAUTFrame: true,
+          proxiedUrl: 'http://www.foobar.com/test',
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        secondaryOrigins: ['http://foobar.com', 'http://example.com'],
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      return testMiddleware([MaybeDelayForCrossOrigin], ctx)
+      .then(() => {
+        expect(ctx.serverBus.emit).not.to.be.called
+      })
+    })
+
+    it('waits for server signal if req is not of a previous origin, letting it continue after receiving cross:origin:release:html', function () {
+      prepareContext({
+        req: {
+          isAUTFrame: true,
+          proxiedUrl: 'http://www.idp.com/test',
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        secondaryOrigins: ['http://foobar.com', 'http://example.com'],
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      const promise = testMiddleware([MaybeDelayForCrossOrigin], ctx)
+
+      expect(ctx.serverBus.emit).to.be.calledWith('cross:origin:delaying:html', { href: 'http://www.idp.com/test' })
+
+      ctx.serverBus.once.withArgs('cross:origin:release:html').args[0][1]()
+
+      return promise
+    })
+
+    it('waits for server signal if res is html, letting it continue after receiving cross:origin:release:html', function () {
+      prepareContext({
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        req: {
+          isAUTFrame: true,
+          proxiedUrl: 'http://www.foobar.com/test',
+        },
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      const promise = testMiddleware([MaybeDelayForCrossOrigin], ctx)
+
+      expect(ctx.serverBus.emit).to.be.calledWith('cross:origin:delaying:html', { href: 'http://www.foobar.com/test' })
+
+      ctx.serverBus.once.withArgs('cross:origin:release:html').args[0][1]()
+
+      return promise
+    })
+
+    it('waits for server signal if incomingRes is rendered html, letting it continue after receiving cross:origin:release:html', function () {
+      prepareContext({
+        req: {
+          headers: {
+            'accept': [
+              'text/html',
+              'application/xhtml+xml',
+            ],
+          },
+          isAUTFrame: true,
+          proxiedUrl: 'http://www.foobar.com/test',
+        },
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      const promise = testMiddleware([MaybeDelayForCrossOrigin], ctx)
+
+      expect(ctx.serverBus.emit).to.be.calledWith('cross:origin:delaying:html', { href: 'http://www.foobar.com/test' })
+
+      ctx.serverBus.once.withArgs('cross:origin:release:html').args[0][1]()
+
+      return promise
+    })
+
+    function prepareContext (props) {
+      const remoteStates = new RemoteStates(() => {})
+      const eventEmitter = new EventEmitter()
+
+      // set the primary remote state
+      remoteStates.set('http://127.0.0.1:3501')
+
+      // set the secondary remote states
+      remoteStates.addEventListeners(eventEmitter)
+      props.secondaryOrigins?.forEach((originPolicy) => {
+        eventEmitter.emit('cross:origin:bridge:ready', { originPolicy })
+      })
+
+      ctx = {
+        incomingRes: {
+          headers: {},
+          ...props.incomingRes,
+        },
+        res: {
+          headers: {},
+          ...props.res,
+        },
+        req: {
+          proxiedUrl: 'http://127.0.0.1:3501/primary-origin.html',
+          headers: {},
+          ...props.req,
+        },
+        serverBus: {
+          emit: sinon.stub(),
+          once: sinon.stub(),
+        },
+        remoteStates,
+        debug () {},
+        onError (error) {
+          throw error
+        },
+        ..._.omit(props, 'incomingRes', 'res', 'req'),
+      }
+    }
+  })
+
   describe('SetInjectionLevel', function () {
     const { SetInjectionLevel } = ResponseMiddleware
-
     let ctx
 
-    beforeEach(function () {
-      ctx = {
+    it('doesn\'t inject anything when not html', function () {
+      prepareContext({
+        req: {
+          cookies: {},
+          headers: {},
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.be.false
+      })
+    })
+
+    it('doesn\'t inject anything when not rendered html', function () {
+      prepareContext({
+        renderedHTMLOrigins: {},
+        getRenderedHTMLOrigins () {
+          return this.renderedHTMLOrigins
+        },
         req: {
-          proxiedUrl: 'http://proxy.com',
+          cookies: {},
+          headers: {},
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.be.false
+      })
+    })
+
+    it('doesn\'t inject anything when not AUT frame', function () {
+      prepareContext({
+        req: {
+          cookies: {},
+          headers: {},
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.be.false
+      })
+    })
+
+    it('doesn\'t inject anything when html does not match origin policy and "experimentalSessionAndOrigin" config flag is NOT set to true', function () {
+      prepareContext({
+        req: {
+          proxiedUrl: 'http://foobar.com',
+          isAUTFrame: true,
+          cookies: {},
+          headers: {},
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.be.false
+      })
+    })
+
+    it('injects "fullCrossOrigin" when "experimentalSessionAndOrigin" config flag is set to true for cross-origin html"', function () {
+      prepareContext({
+        req: {
+          proxiedUrl: 'http://foobar.com',
+          isAUTFrame: true,
+          cookies: {},
+          headers: {},
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        secondaryOrigins: ['http://foobar.com'],
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('fullCrossOrigin')
+      })
+    })
+
+    it('injects "fullCrossOrigin" when request is in origin stack for cross-origin html"', function () {
+      prepareContext({
+        req: {
+          proxiedUrl: 'http://example.com',
+          isAUTFrame: true,
+          cookies: {},
+          headers: {},
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        secondaryOrigins: ['http://example.com', 'http://foobar.com'],
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('fullCrossOrigin')
+      })
+    })
+
+    it('performs full injection on initial AUT html origin', function () {
+      prepareContext({
+        req: {
+          isAUTFrame: true,
           cookies: {
-            '__cypress.initial': true,
+            '__cypress.initial': 'true',
           },
+          headers: {},
+        },
+        incomingRes: {
           headers: {
-            accept: ['text/html', 'application/xhtml+xml'],
+            'content-type': 'text/html',
           },
         },
-        res: {
-          setHeader: sinon.stub(),
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('full')
+      })
+    })
+
+    it('otherwise, partial injection is set', function () {
+      prepareContext({
+        renderedHTMLOrigins: {},
+        getRenderedHTMLOrigins () {
+          return this.renderedHTMLOrigins
         },
-        getRemoteState: () => {
-          return {
-            strategy: 'http',
-            props: {
-              domain: 'proxy',
-              port: '80',
-              tld: 'com',
-            },
-          }
+        req: {
+          proxiedUrl: 'http://foobar.com',
+          isAUTFrame: true,
+          cookies: {},
+          headers: {
+            'accept': [
+              'text/html',
+              'application/xhtml+xml',
+            ],
+          },
         },
-        getRenderedHTMLOrigins: () => {
-          return {}
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
         },
-      }
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('partial')
+      })
     })
 
-    it('does not set Origin-Agent-Cluster header to false when injection is not expected', function () {
-      ctx.incomingRes = {
-        headers: {
-          'content-type': 'foo/bar',
+    it('injects partial when request is for top-level origin', function () {
+      prepareContext({
+        renderedHTMLOrigins: {},
+        getRenderedHTMLOrigins () {
+          return this.renderedHTMLOrigins
         },
-      }
+        req: {
+          proxiedUrl: 'http://127.0.0.1:3501/',
+          isAUTFrame: true,
+          cookies: {},
+          headers: {
+            'accept': [
+              'text/html',
+              'application/xhtml+xml',
+            ],
+          },
+        },
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+          },
+        },
+        secondaryOrigins: ['http://foobar.com'],
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+      })
+
+      return testMiddleware([SetInjectionLevel], ctx)
+      .then(() => {
+        expect(ctx.res.wantsInjection).to.equal('partial')
+      })
+    })
+
+    it('does not set Origin-Agent-Cluster header to false when injection is not expected', function () {
+      prepareContext({})
 
       return testMiddleware([SetInjectionLevel], ctx)
       .then(() => {
@@ -177,16 +541,413 @@ describe('http/response-middleware', function () {
     })
 
     it('sets Origin-Agent-Cluster header to false when injection is expected', function () {
-      ctx.incomingRes = {
-        headers: {
-          'content-type': 'text/html',
+      prepareContext({
+        incomingRes: {
+          headers: {
+            // simplest way to make injection expected
+            'x-cypress-file-server-error': true,
+          },
         },
-      }
+      })
 
       return testMiddleware([SetInjectionLevel], ctx)
       .then(() => {
         expect(ctx.res.setHeader).to.be.calledWith('Origin-Agent-Cluster', '?0')
       })
     })
+
+    function prepareContext (props) {
+      const remoteStates = new RemoteStates(() => {})
+      const eventEmitter = new EventEmitter()
+
+      // set the primary remote state
+      remoteStates.set('http://127.0.0.1:3501')
+
+      // set the secondary remote states
+      remoteStates.addEventListeners(eventEmitter)
+      props.secondaryOrigins?.forEach((originPolicy) => {
+        eventEmitter.emit('cross:origin:bridge:ready', { originPolicy })
+      })
+
+      ctx = {
+        incomingRes: {
+          headers: {},
+          ...props.incomingRes,
+        },
+        res: {
+          headers: {},
+          setHeader: sinon.stub(),
+          ...props.res,
+        },
+        req: {
+          proxiedUrl: 'http://127.0.0.1:3501/primary-origin.html',
+          headers: {},
+          cookies: {
+            '__cypress.initial': true,
+          },
+          ...props.req,
+        },
+        remoteStates,
+        debug: (formatter, ...args) => {
+          debugVerbose(`%s %s %s ${formatter}`, ctx.req.method, ctx.req.proxiedUrl, ctx.stage, ...args)
+        },
+        onError (error) {
+          throw error
+        },
+        ..._.omit(props, 'incomingRes', 'res', 'req'),
+      }
+    }
+  })
+
+  describe('CopyCookiesFromIncomingRes', function () {
+    const { CopyCookiesFromIncomingRes } = ResponseMiddleware
+
+    it('appends cookies on the response when an array', async function () {
+      const appendStub = sinon.stub()
+      const ctx = prepareContext({
+        incomingRes: {
+          headers: {
+            'set-cookie': ['cookie1=value1', 'cookie2=value2'],
+          },
+        },
+        res: {
+          append: appendStub,
+        },
+      })
+
+      await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+      expect(appendStub).to.be.calledTwice
+      expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie1=value1')
+      expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie2=value2')
+    })
+
+    it('appends cookies on the response when a string', async function () {
+      const appendStub = sinon.stub()
+      const ctx = prepareContext({
+        incomingRes: {
+          headers: {
+            'set-cookie': 'cookie=value',
+          },
+        },
+        res: {
+          append: appendStub,
+        },
+      })
+
+      await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+      expect(appendStub).to.be.calledOnce
+      expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value')
+    })
+
+    it('is a noop when cookies are undefined', async function () {
+      const appendStub = sinon.stub()
+      const ctx = prepareContext({
+        res: {
+          append: appendStub,
+        },
+      })
+
+      await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+      expect(appendStub).not.to.be.called
+    })
+
+    describe('SameSite', function () {
+      it('forces SameSite=None when an AUT request and does not match origin policy', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          req: {
+            isAUTFrame: true,
+          },
+          res: {
+            append: appendStub,
+          },
+        })
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledOnce
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value; SameSite=None; Secure')
+      })
+
+      it('forces SameSite=None when an AUT request and last AUT request was a different origin', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          req: {
+            isAUTFrame: true,
+            proxiedUrl: 'https://site2.com',
+          },
+          res: {
+            append: appendStub,
+          },
+          getPreviousAUTRequestUrl () {
+            return 'https://different.site'
+          },
+        })
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledOnce
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value; SameSite=None; Secure')
+      })
+
+      it('does not force SameSite=None if not an AUT request', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          res: {
+            append: appendStub,
+          },
+        })
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value')
+      })
+
+      it('does not force SameSite=None if the first AUT request', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          req: {
+            isAUTFrame: true,
+            proxiedUrl: 'http://www.foobar.com/primary-origin.html',
+          },
+          res: {
+            append: appendStub,
+          },
+        })
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value')
+      })
+
+      it('does not force SameSite=None if an AUT request but not cross-origin', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          req: {
+            isAUTFrame: true,
+            proxiedUrl: 'http://www.foobar.com/primary-origin.html',
+          },
+          res: {
+            append: appendStub,
+          },
+        })
+
+        ctx.getPreviousAUTRequestUrl = () => ctx.req.proxiedUrl
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value')
+      })
+
+      it('does not force SameSite=None if experimental flag is off', async function () {
+        const appendStub = sinon.stub()
+        const ctx = prepareContext({
+          incomingRes: {
+            headers: {
+              'content-type': 'text/html',
+              'set-cookie': 'cookie=value',
+            },
+          },
+          req: {
+            isAUTFrame: true,
+          },
+          res: {
+            append: appendStub,
+          },
+          config: {
+            experimentalSessionAndOrigin: false,
+          },
+        })
+
+        await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+        expect(appendStub).to.be.calledWith('Set-Cookie', 'cookie=value')
+      })
+
+      describe('cookie modification scenarios', function () {
+        const makeScenarios = (output, flippedOutput?) => {
+          return [
+            ['SameSite=Strict; Secure', output],
+            ['SameSite=Strict', output],
+            ['SameSite=Lax; Secure', output],
+            ['SameSite=Lax', output],
+            ['SameSite=Invalid; Secure', output],
+            ['SameSite=Invalid', output],
+            ['SameSite=None', output],
+            ['', output],
+            // When Secure is first or there's no SameSite, it ends up as
+            // "Secure; SameSite=None" instead of "Secure" being second
+            ['Secure', flippedOutput || output],
+            ['Secure; SameSite=None', flippedOutput || output],
+          ]
+        }
+
+        const withFirefox = {
+          getCurrentBrowser: () => ({ family: 'firefox' }),
+        }
+
+        describe('not Firefox', function () {
+          makeScenarios('SameSite=None; Secure', 'Secure; SameSite=None').forEach(([input, output]) => {
+            it(`${input} -> ${output}`, async function () {
+              const { appendStub, ctx } = prepareContextWithCookie(`insecure=true; cookie=value${input ? '; ' : ''}${input}`)
+
+              await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+              expect(appendStub).to.be.calledOnce
+              expect(appendStub).to.be.calledWith('Set-Cookie', `insecure=true; cookie=value; ${output}`)
+            })
+          })
+        })
+
+        describe('Firefox + non-localhost', function () {
+          makeScenarios('SameSite=None; Secure', 'Secure; SameSite=None').forEach(([input, output]) => {
+            it(`${input} -> ${output}`, async function () {
+              const { appendStub, ctx } = prepareContextWithCookie(`insecure=true; cookie=value${input ? '; ' : ''}${input}`, {
+                req: { proxiedUrl: 'https://foobar.com' },
+                ...withFirefox,
+              })
+
+              await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+              expect(appendStub).to.be.calledOnce
+              expect(appendStub).to.be.calledWith('Set-Cookie', `insecure=true; cookie=value; ${output}`)
+            })
+          })
+        })
+
+        describe('Firefox + https://localhost', function () {
+          makeScenarios('SameSite=None; Secure', 'Secure; SameSite=None').forEach(([input, output]) => {
+            it(`${input} -> ${output}`, async function () {
+              const { appendStub, ctx } = prepareContextWithCookie(`insecure=true; cookie=value${input ? '; ' : ''}${input}`, {
+                req: { proxiedUrl: 'https://localhost:3500' },
+                ...withFirefox,
+              })
+
+              await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+              expect(appendStub).to.be.calledOnce
+              expect(appendStub).to.be.calledWith('Set-Cookie', `insecure=true; cookie=value; ${output}`)
+            })
+          })
+        })
+
+        describe('Firefox + http://localhost', function () {
+          makeScenarios('SameSite=None').forEach(([input, output]) => {
+            it(`${input} -> ${output}`, async function () {
+              const { appendStub, ctx } = prepareContextWithCookie(`insecure=true; cookie=value${input ? '; ' : ''}${input}`, withFirefox)
+
+              await testMiddleware([CopyCookiesFromIncomingRes], ctx)
+
+              expect(appendStub).to.be.calledOnce
+              expect(appendStub).to.be.calledWith('Set-Cookie', `insecure=true; cookie=value; ${output}`)
+            })
+          })
+        })
+      })
+    })
+
+    function prepareContext (props) {
+      const remoteStates = new RemoteStates(() => {})
+      const eventEmitter = new EventEmitter()
+
+      // set the primary remote state
+      remoteStates.set('http://foobar.com')
+
+      // set the secondary remote states
+      remoteStates.addEventListeners(eventEmitter)
+      props.secondaryOrigins?.forEach((originPolicy) => {
+        eventEmitter.emit('cross:origin:bridge:ready', { originPolicy })
+      })
+
+      return {
+        incomingRes: {
+          headers: {},
+          ...props.incomingRes,
+        },
+        res: {
+          headers: {},
+          on () {},
+          ...props.res,
+        },
+        req: {
+          proxiedUrl: 'http://127.0.0.1:3501/primary-origin.html',
+          headers: {},
+          ...props.req,
+        },
+        incomingResStream: {
+          pipe () {
+            return { on () {} }
+          },
+        },
+        config: {
+          experimentalSessionAndOrigin: true,
+        },
+        getCurrentBrowser () {
+          return { family: 'chromium' }
+        },
+        getPreviousAUTRequestUrl () {},
+        remoteStates,
+        debug () {},
+        onError (error) {
+          throw error
+        },
+        ..._.omit(props, 'incomingRes', 'res', 'req'),
+      }
+    }
+
+    function prepareContextWithCookie (cookie, props: any = {}) {
+      const appendStub = sinon.stub()
+      const ctx = prepareContext({
+        incomingRes: {
+          headers: {
+            'content-type': 'text/html',
+            'set-cookie': cookie,
+          },
+        },
+        req: {
+          isAUTFrame: true,
+          ...props.req,
+        },
+        res: {
+          append: appendStub,
+        },
+        ..._.omit(props, 'incomingRes', 'res', 'req'),
+      })
+
+      return { appendStub, ctx }
+    }
   })
 })
diff --git a/packages/reporter/package.json b/packages/reporter/package.json
index b1938055c4f8..c71721656797 100644
--- a/packages/reporter/package.json
+++ b/packages/reporter/package.json
@@ -16,11 +16,8 @@
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@packages/driver": "0.0.0-development",
-    "@packages/resolve-dist": "0.0.0-development",
-    "@packages/socket": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
     "@reach/dialog": "0.10.5",
-    "@reach/visually-hidden": "0.10.4",
     "classnames": "2.3.1",
     "css-element-queries": "1.2.3",
     "cypress-multi-reporters": "1.4.0",
diff --git a/packages/resolve-dist/lib/index.ts b/packages/resolve-dist/lib/index.ts
index b62a671923f0..dff058906d03 100644
--- a/packages/resolve-dist/lib/index.ts
+++ b/packages/resolve-dist/lib/index.ts
@@ -10,14 +10,22 @@ export const resolveFromPackages = (...args: string[]) => {
   return path.join(...[__dirname, '..', '..', ...args])
 }
 
+const getRunnerContents = (filename: string) => {
+  fs ??= require('fs-extra') as typeof import('fs-extra')
+
+  return fs.readFile(getPathToDist('runner', filename))
+}
+
 export const getPathToDist = (folder: FoldersWithDist, ...args: string[]) => {
   return path.join(...[__dirname, '..', '..', folder, 'dist', ...args])
 }
 
 export const getRunnerInjectionContents = () => {
-  fs ??= require('fs-extra') as typeof import('fs-extra')
+  return getRunnerContents('injection.js')
+}
 
-  return fs.readFile(getPathToDist('runner', 'injection.js'))
+export const getRunnerCrossOriginInjectionContents = () => {
+  return getRunnerContents('injection_cross_origin.js')
 }
 
 export const getPathToIndex = (pkg: RunnerPkg) => {
diff --git a/packages/runner-shared/package.json b/packages/runner-shared/package.json
index 122e3c574060..08b6bf328910 100644
--- a/packages/runner-shared/package.json
+++ b/packages/runner-shared/package.json
@@ -29,7 +29,6 @@
     "react-dom": "16.8.6",
     "react-popper": "2.2.5",
     "react-shadow-dom-retarget-events": "1.0.11",
-    "sinon": "7.5.0",
-    "sinon-chai": "3.3.0"
+    "sinon": "7.5.0"
   }
 }
diff --git a/packages/runner-shared/src/dimensions.js b/packages/runner-shared/src/dimensions.js
new file mode 100644
index 000000000000..13aa4ddd7698
--- /dev/null
+++ b/packages/runner-shared/src/dimensions.js
@@ -0,0 +1,89 @@
+import _ from 'lodash'
+
+const getElementDimensions = ($el) => {
+  const el = $el.get(0)
+
+  const { offsetHeight, offsetWidth } = el
+
+  const box = {
+    // offset disregards margin but takes into account border + padding
+    offset: $el.offset(),
+    // dont use jquery here for width/height because it uses getBoundingClientRect() which returns scaled values.
+    // TODO: switch back to using jquery when upgrading to jquery 3.4+
+    paddingTop: getPadding($el, 'top'),
+    paddingRight: getPadding($el, 'right'),
+    paddingBottom: getPadding($el, 'bottom'),
+    paddingLeft: getPadding($el, 'left'),
+    borderTop: getBorder($el, 'top'),
+    borderRight: getBorder($el, 'right'),
+    borderBottom: getBorder($el, 'bottom'),
+    borderLeft: getBorder($el, 'left'),
+    marginTop: getMargin($el, 'top'),
+    marginRight: getMargin($el, 'right'),
+    marginBottom: getMargin($el, 'bottom'),
+    marginLeft: getMargin($el, 'left'),
+  }
+
+  // NOTE: offsetWidth/height always give us content + padding + border, so subtract them
+  // to get the true "clientHeight" and "clientWidth".
+  // we CANNOT just use "clientHeight" and "clientWidth" because those always return 0
+  // for inline elements >_<
+  box.width = offsetWidth - (box.paddingLeft + box.paddingRight + box.borderLeft + box.borderRight)
+  box.height = offsetHeight - (box.paddingTop + box.paddingBottom + box.borderTop + box.borderBottom)
+
+  // innerHeight: Get the current computed height for the first
+  // element in the set of matched elements, including padding but not border.
+
+  // outerHeight: Get the current computed height for the first
+  // element in the set of matched elements, including padding, border,
+  // and optionally margin. Returns a number (without 'px') representation
+  // of the value or null if called on an empty set of elements.
+  box.heightWithPadding = box.height + box.paddingTop + box.paddingBottom
+
+  box.heightWithBorder = box.heightWithPadding + box.borderTop + box.borderBottom
+
+  box.heightWithMargin = box.heightWithBorder + box.marginTop + box.marginBottom
+
+  box.widthWithPadding = box.width + box.paddingLeft + box.paddingRight
+
+  box.widthWithBorder = box.widthWithPadding + box.borderLeft + box.borderRight
+
+  box.widthWithMargin = box.widthWithBorder + box.marginLeft + box.marginRight
+
+  return box
+}
+
+const getNumAttrValue = ($el, attr) => {
+  // nuke anything thats not a number or a negative symbol
+  const num = _.toNumber($el.css(attr).replace(/[^0-9\.-]+/, ''))
+
+  if (!_.isFinite(num)) {
+    throw new Error('Element attr did not return a valid number')
+  }
+
+  return num
+}
+
+const getPadding = ($el, dir) => {
+  return getNumAttrValue($el, `padding-${dir}`)
+}
+
+const getBorder = ($el, dir) => {
+  return getNumAttrValue($el, `border-${dir}-width`)
+}
+
+const getMargin = ($el, dir) => {
+  return getNumAttrValue($el, `margin-${dir}`)
+}
+
+const getOuterSize = ($el) => {
+  return {
+    width: $el.outerWidth(true),
+    height: $el.outerHeight(true),
+  }
+}
+
+export default {
+  getOuterSize,
+  getElementDimensions,
+}
diff --git a/packages/runner-shared/src/dom.js b/packages/runner-shared/src/dom.js
index 9ec11ab05d66..547ae45a93e5 100644
--- a/packages/runner-shared/src/dom.js
+++ b/packages/runner-shared/src/dom.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import retargetEvents from 'react-shadow-dom-retarget-events'
 
 import $Cypress from '@packages/driver'
+import $dimensions from './dimensions'
 import { selectorPlaygroundHighlight } from './selector-playground/highlight'
 import { studioAssertionsMenu } from './studio/assertions-menu'
 // The '!' tells webpack to disable normal loaders, and keep loaders with `enforce: 'pre'` and `enforce: 'post'`
@@ -72,7 +73,7 @@ function addHitBoxLayer (coords, $body) {
 function addElementBoxModelLayers ($el, $body) {
   $body = $body || $('body')
 
-  const dimensions = getElementDimensions($el)
+  const dimensions = $dimensions.getElementDimensions($el)
 
   const $container = $('<div class="__cypress-highlight">')
   .css({
@@ -306,89 +307,6 @@ function getZIndex (el) {
   return _.toNumber(el.css('zIndex'))
 }
 
-function getElementDimensions ($el) {
-  const el = $el.get(0)
-
-  const { offsetHeight, offsetWidth } = el
-
-  const box = {
-    offset: $el.offset(), // offset disregards margin but takes into account border + padding
-    // dont use jquery here for width/height because it uses getBoundingClientRect() which returns scaled values.
-    // TODO: switch back to using jquery when upgrading to jquery 3.4+
-    paddingTop: getPadding($el, 'top'),
-    paddingRight: getPadding($el, 'right'),
-    paddingBottom: getPadding($el, 'bottom'),
-    paddingLeft: getPadding($el, 'left'),
-    borderTop: getBorder($el, 'top'),
-    borderRight: getBorder($el, 'right'),
-    borderBottom: getBorder($el, 'bottom'),
-    borderLeft: getBorder($el, 'left'),
-    marginTop: getMargin($el, 'top'),
-    marginRight: getMargin($el, 'right'),
-    marginBottom: getMargin($el, 'bottom'),
-    marginLeft: getMargin($el, 'left'),
-  }
-
-  // NOTE: offsetWidth/height always give us content + padding + border, so subtract them
-  // to get the true "clientHeight" and "clientWidth".
-  // we CANNOT just use "clientHeight" and "clientWidth" because those always return 0
-  // for inline elements >_<
-  //
-  box.width = offsetWidth - (box.paddingLeft + box.paddingRight + box.borderLeft + box.borderRight)
-  box.height = offsetHeight - (box.paddingTop + box.paddingBottom + box.borderTop + box.borderBottom)
-
-  // innerHeight: Get the current computed height for the first
-  // element in the set of matched elements, including padding but not border.
-
-  // outerHeight: Get the current computed height for the first
-  // element in the set of matched elements, including padding, border,
-  // and optionally margin. Returns a number (without 'px') representation
-  // of the value or null if called on an empty set of elements.
-  box.heightWithPadding = box.height + box.paddingTop + box.paddingBottom
-
-  box.heightWithBorder = box.heightWithPadding + box.borderTop + box.borderBottom
-
-  box.heightWithMargin = box.heightWithBorder + box.marginTop + box.marginBottom
-
-  box.widthWithPadding = box.width + box.paddingLeft + box.paddingRight
-
-  box.widthWithBorder = box.widthWithPadding + box.borderLeft + box.borderRight
-
-  box.widthWithMargin = box.widthWithBorder + box.marginLeft + box.marginRight
-
-  return box
-}
-
-function getNumAttrValue ($el, attr) {
-  // nuke anything thats not a number or a negative symbol
-  const num = _.toNumber($el.css(attr).replace(/[^0-9\.-]+/, ''))
-
-  if (!_.isFinite(num)) {
-    throw new Error('Element attr did not return a valid number')
-  }
-
-  return num
-}
-
-function getPadding ($el, dir) {
-  return getNumAttrValue($el, `padding-${dir}`)
-}
-
-function getBorder ($el, dir) {
-  return getNumAttrValue($el, `border-${dir}-width`)
-}
-
-function getMargin ($el, dir) {
-  return getNumAttrValue($el, `margin-${dir}`)
-}
-
-function getOuterSize ($el) {
-  return {
-    width: $el.outerWidth(true),
-    height: $el.outerHeight(true),
-  }
-}
-
 function isInViewport (win, el) {
   let rect = el.getBoundingClientRect()
 
@@ -428,73 +346,13 @@ function getElementsForSelector ({ $root, selector, method, cypressDom }) {
   return $el
 }
 
-function addCssAnimationDisabler ($body) {
-  $(`
-    <style id="__cypress-animation-disabler">
-      *, *:before, *:after {
-        transition-property: none !important;
-        animation: none !important;
-      }
-    </style>
-  `).appendTo($body)
-}
-
-function removeCssAnimationDisabler ($body) {
-  $body.find('#__cypress-animation-disabler').remove()
-}
-
-function addBlackoutForElement ($body, $el) {
-  const dimensions = getElementDimensions($el)
-  const width = dimensions.widthWithBorder
-  const height = dimensions.heightWithBorder
-  const top = dimensions.offset.top
-  const left = dimensions.offset.left
-
-  const style = styles(`
-    ${resetStyles}
-    position: absolute;
-    top: ${top}px;
-    left: ${left}px;
-    width: ${width}px;
-    height: ${height}px;
-    background-color: black;
-    z-index: 2147483647;
-  `)
-
-  $(`<div class="__cypress-blackout" style="${style}">`).appendTo($body)
-}
-
-function addBlackout ($body, selector) {
-  let $el
-
-  try {
-    $el = $body.find(selector)
-    if (!$el.length) return
-  } catch (err) {
-    // if it's an invalid selector, just ignore it
-    return
-  }
-
-  $el.each(function () {
-    addBlackoutForElement($body, $(this))
-  })
-}
-
-function removeBlackouts ($body) {
-  $body.find('.__cypress-blackout').remove()
-}
-
 export const dom = {
-  addBlackout,
-  removeBlackouts,
   addElementBoxModelLayers,
   addHitBoxLayer,
   addOrUpdateSelectorPlaygroundHighlight,
   openStudioAssertionsMenu,
   closeStudioAssertionsMenu,
-  addCssAnimationDisabler,
-  removeCssAnimationDisabler,
   getElementsForSelector,
-  getOuterSize,
+  getOuterSize: $dimensions.getOuterSize,
   scrollIntoView,
 }
diff --git a/packages/runner/index.d.ts b/packages/runner/index.d.ts
index 918d244cd9e7..8e559dc28663 100644
--- a/packages/runner/index.d.ts
+++ b/packages/runner/index.d.ts
@@ -8,3 +8,4 @@
 
 /// <reference path="../ts/index.d.ts" />
 /// <reference path="../driver/types/internal-types.d.ts" />
+/// <reference path="../driver/types/spec-types.d.ts" />
diff --git a/packages/runner/injection/cross-origin.js b/packages/runner/injection/cross-origin.js
new file mode 100644
index 000000000000..316752571a2f
--- /dev/null
+++ b/packages/runner/injection/cross-origin.js
@@ -0,0 +1,54 @@
+/**
+ * This is the entry point for the script that gets injected into
+ * the AUT on a secondary origin. It gets bundled on its own and injected
+ * into the <head> of the AUT by `packages/proxy`.
+ *
+ * If adding to this bundle, try to keep it light and free of
+ * dependencies.
+ */
+
+import { createTimers } from './timers'
+
+const findCypress = () => {
+  for (let index = 0; index < window.parent.frames.length; index++) {
+    const frame = window.parent.frames[index]
+
+    try {
+      // If Cypress is defined and we haven't gotten a cross origin error we have found the correct bridge.
+      if (frame.Cypress) {
+        // If the ending $ is included in the template string, it breaks transpilation
+        // eslint-disable-next-line no-useless-concat
+        const frameHostRegex = new RegExp(`(^|\\.)${ frame.location.host.replaceAll('.', '\\.') }` + '$')
+
+        // Compare the locations origin policy without pulling in more dependencies.
+        // Compare host, protocol and test that the window's host ends with the frame's host.
+        // This works because the spec bridge's host is always created without a sub domain.
+        if (window.location.port === frame.location.port
+          && window.location.protocol === frame.location.protocol
+          && frameHostRegex.test(window.location.host)) {
+          return frame.Cypress
+        }
+      }
+    } catch (error) {
+      // Catch DOMException: Blocked a frame from accessing a cross-origin frame.
+      if (error.name !== 'SecurityError') {
+        throw error
+      }
+    }
+  }
+}
+
+const Cypress = findCypress()
+
+// the timers are wrapped in the injection code similar to the primary origin
+const timers = createTimers()
+
+Cypress.removeAllListeners('app:timers:reset')
+Cypress.removeAllListeners('app:timers:pause')
+
+Cypress.on('app:timers:reset', timers.reset)
+Cypress.on('app:timers:pause', timers.pause)
+
+timers.wrap()
+
+Cypress.action('app:window:before:load', window)
diff --git a/packages/runner/injection/index.js b/packages/runner/injection/main.js
similarity index 86%
rename from packages/runner/injection/index.js
rename to packages/runner/injection/main.js
index 134cda8fc352..ad3eb91de45a 100644
--- a/packages/runner/injection/index.js
+++ b/packages/runner/injection/main.js
@@ -12,7 +12,8 @@ import { createTimers } from './timers'
 const Cypress = window.Cypress = parent.Cypress
 
 if (!Cypress) {
-  throw new Error('Something went terribly wrong and we cannot proceed. We expected to find the global Cypress in the parent window but it is missing!. This should never happen and likely is a bug. Please open an issue!')
+  throw new Error('Something went terribly wrong and we cannot proceed. We expected to find the global \
+Cypress in the parent window but it is missing. This should never happen and likely is a bug. Please open an issue.')
 }
 
 // We wrap timers in the injection code because if we do it in the driver (like
diff --git a/packages/runner/package.json b/packages/runner/package.json
index 8bf68367b72e..22ea23da0740 100644
--- a/packages/runner/package.json
+++ b/packages/runner/package.json
@@ -16,22 +16,17 @@
     "test-watch": "yarn test-unit --watch",
     "watch": "webpack --watch --progress"
   },
-  "dependencies": {
-    "fs-extra": "9.1.0"
-  },
   "devDependencies": {
     "@cypress/react-tooltip": "0.5.3",
-    "@cypress/webpack-preprocessor": "0.0.0-development",
     "@fontsource/mulish": "4.3.0",
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@packages/driver": "0.0.0-development",
     "@packages/icons": "0.0.0-development",
+    "@packages/network": "0.0.0-development",
     "@packages/reporter": "0.0.0-development",
     "@packages/socket": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
-    "@reach/dialog": "0.10.5",
-    "@reach/visually-hidden": "0.10.4",
     "babel-plugin-prismjs": "1.0.2",
     "bluebird": "3.5.3",
     "chai": "4.2.0",
@@ -44,7 +39,6 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",
     "jquery": "3.1.1",
-    "jsdom": "14.1.0",
     "lodash": "^4.17.21",
     "mobx": "5.15.4",
     "mobx-react": "6.1.8",
@@ -55,7 +49,6 @@
     "react-dom": "16.8.6",
     "rimraf": "3.0.2",
     "sinon": "7.5.0",
-    "sinon-chai": "3.3.0",
     "snap-shot-core": "10.2.1",
     "webpack": "^4.44.2",
     "webpack-cli": "3.3.2"
diff --git a/packages/runner/src/cross-origin.js b/packages/runner/src/cross-origin.js
new file mode 100644
index 000000000000..957a29f64aff
--- /dev/null
+++ b/packages/runner/src/cross-origin.js
@@ -0,0 +1,2 @@
+// this is the entry point for the cross-origin version of the driver
+import '@packages/driver/src/cross-origin/cypress'
diff --git a/packages/runner/src/iframe/iframe.scss b/packages/runner/src/iframe/iframe.scss
index e766a261144b..b78847792590 100644
--- a/packages/runner/src/iframe/iframe.scss
+++ b/packages/runner/src/iframe/iframe.scss
@@ -95,3 +95,11 @@
     width: 100%;
   }
 }
+
+.spec-bridge-iframe {
+  border: none;
+  height: 100%;
+  position: fixed;
+  visibility: hidden;
+  width: 100%;
+}
diff --git a/packages/runner/webpack.config.ts b/packages/runner/webpack.config.ts
index b33e359564e4..c5bbc65f5032 100644
--- a/packages/runner/webpack.config.ts
+++ b/packages/runner/webpack.config.ts
@@ -69,11 +69,37 @@ mainConfig.resolve = {
 }
 
 // @ts-ignore
-const injectionConfig: webpack.Configuration = {
+const crossOriginConfig: webpack.Configuration = {
+  mode: 'production',
+  ...getSimpleConfig(),
+  entry: {
+    cypress_cross_origin_runner: [path.resolve(__dirname, 'src/cross-origin.js')],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+}
+
+// @ts-ignore
+const mainInjectionConfig: webpack.Configuration = {
+  ...getSimpleConfig(),
+  mode: 'production',
+  entry: {
+    injection: [path.resolve(__dirname, 'injection/main.js')],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+}
+
+// @ts-ignore
+const crossOriginInjectionConfig: webpack.Configuration = {
   ...getSimpleConfig(),
   mode: 'production',
   entry: {
-    injection: [path.resolve(__dirname, 'injection/index.js')],
+    injection_cross_origin: [path.resolve(__dirname, 'injection/cross-origin.js')],
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -81,4 +107,9 @@ const injectionConfig: webpack.Configuration = {
   },
 }
 
-export default [mainConfig, injectionConfig]
+export default [
+  mainConfig,
+  mainInjectionConfig,
+  crossOriginConfig,
+  crossOriginInjectionConfig,
+]
diff --git a/packages/server/index.d.ts b/packages/server/index.d.ts
index 5b3c15366d63..26b8a0ecc533 100644
--- a/packages/server/index.d.ts
+++ b/packages/server/index.d.ts
@@ -15,8 +15,6 @@
 
 // types for the `server` package
 export namespace CyServer {
-  export type getRemoteState = () => Cypress.RemoteState
-
   // TODO: pull this from main types
   export interface Config {
     blockHosts: string | string[]
diff --git a/packages/server/lib/browsers/browser-cri-client.ts b/packages/server/lib/browsers/browser-cri-client.ts
index 1fcb1e2c89c2..db9832394cae 100644
--- a/packages/server/lib/browsers/browser-cri-client.ts
+++ b/packages/server/lib/browsers/browser-cri-client.ts
@@ -79,12 +79,12 @@ export class BrowserCriClient {
    * @param onAsynchronousError callback for any cdp fatal errors
    * @returns a wrapper around the chrome remote interface that is connected to the browser target
    */
-  static async create (port: number, browserName: string, onAsynchronousError: Function): Promise<BrowserCriClient> {
+  static async create (port: number, browserName: string, onAsynchronousError: Function, onReconnect?: (client: CRIWrapper.Client) => void): Promise<BrowserCriClient> {
     await ensureLiveBrowser(port, browserName)
 
     return retryWithIncreasingDelay(async () => {
       const versionInfo = await CRI.Version({ host: HOST, port })
-      const browserClient = await create(versionInfo.webSocketDebuggerUrl, onAsynchronousError)
+      const browserClient = await create(versionInfo.webSocketDebuggerUrl, onAsynchronousError, undefined, undefined, onReconnect)
 
       return new BrowserCriClient(browserClient, versionInfo, port, browserName, onAsynchronousError)
     }, browserName, port)
diff --git a/packages/server/lib/browsers/cdp_automation.ts b/packages/server/lib/browsers/cdp_automation.ts
index a342ea53ed13..832684e103d6 100644
--- a/packages/server/lib/browsers/cdp_automation.ts
+++ b/packages/server/lib/browsers/cdp_automation.ts
@@ -3,8 +3,10 @@
 import _ from 'lodash'
 import Bluebird from 'bluebird'
 import type { Protocol } from 'devtools-protocol'
-import { cors } from '@packages/network'
+import { cors, uri } from '@packages/network'
 import debugModule from 'debug'
+import { URL } from 'url'
+
 import type { Automation } from '../automation'
 import type { ResourceType, BrowserPreRequest, BrowserResponseReceived } from '@packages/proxy'
 
@@ -176,13 +178,13 @@ const ffToStandardResourceTypeMap: { [ff: string]: ResourceType } = {
 }
 
 export class CdpAutomation {
-  private constructor (private sendDebuggerCommandFn: SendDebuggerCommand, private onFn: OnFn, private sendCloseCommandFn: SendCloseCommand, private automation: Automation) {
+  private constructor (private sendDebuggerCommandFn: SendDebuggerCommand, private onFn: OnFn, private sendCloseCommandFn: SendCloseCommand, private automation: Automation, private experimentalSessionAndOrigin: boolean) {
     onFn('Network.requestWillBeSent', this.onNetworkRequestWillBeSent)
     onFn('Network.responseReceived', this.onResponseReceived)
   }
 
-  static async create (sendDebuggerCommandFn: SendDebuggerCommand, onFn: OnFn, sendCloseCommandFn: SendCloseCommand, automation: Automation): Promise<CdpAutomation> {
-    const cdpAutomation = new CdpAutomation(sendDebuggerCommandFn, onFn, sendCloseCommandFn, automation)
+  static async create (sendDebuggerCommandFn: SendDebuggerCommand, onFn: OnFn, sendCloseCommandFn: SendCloseCommand, automation: Automation, experimentalSessionAndOrigin: boolean): Promise<CdpAutomation> {
+    const cdpAutomation = new CdpAutomation(sendDebuggerCommandFn, onFn, sendCloseCommandFn, automation, experimentalSessionAndOrigin)
 
     await sendDebuggerCommandFn('Network.enable', {
       maxTotalBufferSize: 0,
@@ -243,8 +245,23 @@ export class CdpAutomation {
       urls: [url],
     })
     .then((result: Protocol.Network.GetCookiesResponse) => {
+      const isLocalhost = uri.isLocalhost(new URL(url))
+
       return normalizeGetCookies(result.cookies)
       .filter((cookie) => {
+        // Chrome returns all cookies for a URL, even if they wouldn't normally
+        // be sent with a request. This standardizes it by filtering out ones
+        // that are secure but not on a secure context
+
+        if (this.experimentalSessionAndOrigin) {
+          // localhost is considered a secure context (even when http:)
+          // and it's required for cross origin support when visiting a secondary
+          // origin so that all its cookies are sent. This may be a
+          // breaking change, so put it behind the flag for now. Need to
+          // investigate further when we remove the experimental flag.
+          return !(cookie.secure && url.startsWith('http:') && !isLocalhost)
+        }
+
         return !(url.startsWith('http:') && cookie.secure)
       })
     })
diff --git a/packages/server/lib/browsers/chrome.ts b/packages/server/lib/browsers/chrome.ts
index bb4c6dc51de8..3752a5d31ea6 100644
--- a/packages/server/lib/browsers/chrome.ts
+++ b/packages/server/lib/browsers/chrome.ts
@@ -8,6 +8,7 @@ import path from 'path'
 import extension from '@packages/extension'
 import mime from 'mime'
 import { launch } from '@packages/launcher'
+import type { Protocol } from 'devtools-protocol'
 
 import appData from '../util/app_data'
 import { fs } from '../util/fs'
@@ -284,8 +285,6 @@ const _navigateUsingCRI = async function (client, url) {
 }
 
 const _handleDownloads = async function (client, dir, automation) {
-  await client.send('Page.enable')
-
   client.on('Page.downloadWillBegin', (data) => {
     const downloadItem = {
       id: data.guid,
@@ -318,8 +317,124 @@ const _handleDownloads = async function (client, dir, automation) {
   })
 }
 
-const _setAutomation = async (client: CRIWrapper.Client, automation: Automation, closeCurrentTarget: () => Promise<void>) => {
-  const cdpAutomation = await CdpAutomation.create(client.send, client.on, closeCurrentTarget, automation)
+let frameTree
+let gettingFrameTree
+
+const onReconnect = (client: CRIWrapper.Client) => {
+  // if the client disconnects (e.g. due to a computer sleeping), update
+  // the frame tree on reconnect in cases there were changes while
+  // the client was disconnected
+  return _updateFrameTree(client, 'onReconnect')()
+}
+
+// eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces
+const _updateFrameTree = (client: CRIWrapper.Client, eventName) => async () => {
+  debug(`update frame tree for ${eventName}`)
+
+  gettingFrameTree = new Promise<void>(async (resolve) => {
+    try {
+      frameTree = (await client.send('Page.getFrameTree')).frameTree
+      debug('frame tree updated')
+    } catch (err) {
+      debug('failed to update frame tree:', err.stack)
+    } finally {
+      gettingFrameTree = null
+
+      resolve()
+    }
+  })
+}
+
+// we can't get the frame tree during the Fetch.requestPaused event, because
+// the CDP is tied up during that event and can't be utilized. so we maintain
+// a reference to it that's updated when it's likely to have been changed
+const _listenForFrameTreeChanges = (client) => {
+  debug('listen for frame tree changes')
+
+  client.on('Page.frameAttached', _updateFrameTree(client, 'Page.frameAttached'))
+  client.on('Page.frameDetached', _updateFrameTree(client, 'Page.frameDetached'))
+}
+
+const _continueRequest = (client, params, header?) => {
+  const details: Protocol.Fetch.ContinueRequestRequest = {
+    requestId: params.requestId,
+  }
+
+  if (header) {
+    // headers are received as an object but need to be an array
+    // to modify them
+    const currentHeaders = _.map(params.request.headers, (value, name) => ({ name, value }))
+
+    details.headers = [
+      ...currentHeaders,
+      header,
+    ]
+  }
+
+  debug('continueRequest: %o', details)
+
+  client.send('Fetch.continueRequest', details).catch((err) => {
+    // swallow this error so it doesn't crash Cypress.
+    // an "Invalid InterceptionId" error can randomly happen in the driver tests
+    // when testing the redirection loop limit, when a redirect request happens
+    // to be sent after the test has moved on. this shouldn't crash Cypress, in
+    // any case, and likely wouldn't happen for standard user tests, since they
+    // will properly fail and not move on like the driver tests
+    debug('continueRequest failed, url: %s, error: %s', params.request.url, err?.stack || err)
+  })
+}
+
+interface HasFrame {
+  frame: Protocol.Page.Frame
+}
+
+const _isAUTFrame = async (frameId: string) => {
+  debug('need frame tree')
+
+  // the request could come in while in the middle of getting the frame tree,
+  // which is asynchronous, so wait for it to be fetched
+  if (gettingFrameTree) {
+    debug('awaiting frame tree')
+
+    await gettingFrameTree
+  }
+
+  const frame = _.find(frameTree?.childFrames || [], ({ frame }) => {
+    return frame?.name?.startsWith('Your App:')
+  }) as HasFrame | undefined
+
+  if (frame) {
+    return frame.frame.id === frameId
+  }
+
+  return false
+}
+
+const _handlePausedRequests = async (client) => {
+  await client.send('Fetch.enable')
+
+  // adds a header to the request to mark it as a request for the AUT frame
+  // itself, so the proxy can utilize that for injection purposes
+  client.on('Fetch.requestPaused', async (params: Protocol.Fetch.RequestPausedEvent) => {
+    if (
+      // is a script, stylesheet, image, etc
+      params.resourceType !== 'Document'
+      || !(await _isAUTFrame(params.frameId))
+    ) {
+      return _continueRequest(client, params)
+    }
+
+    debug('add X-Cypress-Is-AUT-Frame header to: %s', params.request.url)
+
+    _continueRequest(client, params, {
+      name: 'X-Cypress-Is-AUT-Frame',
+      value: 'true',
+    })
+  })
+}
+
+const _setAutomation = async (client: CRIWrapper.Client, automation: Automation, closeCurrentTarget: () => Promise<void>, options: CypressConfiguration = {}) => {
+  const cdpAutomation = await CdpAutomation.create(client.send, client.on, closeCurrentTarget, automation, options.experimentalSessionAndOrigin)
 
   return automation.use(cdpAutomation)
 }
@@ -341,6 +456,8 @@ export = {
 
   _handleDownloads,
 
+  _handlePausedRequests,
+
   _setAutomation,
 
   _getChromePreferences,
@@ -440,7 +557,10 @@ export = {
     const browserCriClient = this._getBrowserCriClient()
     const pageCriClient = await browserCriClient.attachToNewUrl('about:blank')
 
-    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget)
+    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget, options)
+
+    // make sure page events are re enabled or else frame tree updates will NOT work as well as other items listening for page events
+    await pageCriClient.send('Page.enable')
 
     await options.onInitializeNewBrowserTab()
 
@@ -450,16 +570,21 @@ export = {
     ])
 
     await this._navigateUsingCRI(pageCriClient, options.url)
+
+    if (options.experimentalSessionAndOrigin) {
+      await this._handlePausedRequests(pageCriClient)
+      _listenForFrameTreeChanges(pageCriClient)
+    }
   },
 
   async connectToExisting (browser: Browser, options: CypressConfiguration = {}, automation) {
     const port = await protocol.getRemoteDebuggingPort()
 
     debug('connecting to existing chrome instance with url and debugging port', { url: options.url, port })
-    const browserCriClient = await BrowserCriClient.create(port, browser.displayName, options.onError)
+    const browserCriClient = await BrowserCriClient.create(port, browser.displayName, options.onError, onReconnect)
     const pageCriClient = await browserCriClient.attachToTargetUrl(options.url)
 
-    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget)
+    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget, options)
   },
 
   async open (browser: Browser, url, options: CypressConfiguration = {}, automation: Automation): Promise<LaunchedBrowser> {
@@ -521,7 +646,7 @@ export = {
     // SECOND connect to the Chrome remote interface
     // and when the connection is ready
     // navigate to the actual url
-    browserCriClient = await BrowserCriClient.create(port, browser.displayName, options.onError)
+    browserCriClient = await BrowserCriClient.create(port, browser.displayName, options.onError, onReconnect)
 
     la(browserCriClient, 'expected Chrome remote interface reference', browserCriClient)
 
@@ -554,7 +679,9 @@ export = {
 
     const pageCriClient = await browserCriClient.attachToTargetUrl('about:blank')
 
-    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget)
+    await this._setAutomation(pageCriClient, automation, browserCriClient.closeCurrentTarget, options)
+
+    await pageCriClient.send('Page.enable')
 
     await Promise.all([
       this._maybeRecordVideo(pageCriClient, options, browser.majorVersion),
@@ -563,6 +690,11 @@ export = {
 
     await this._navigateUsingCRI(pageCriClient, url)
 
+    if (options.experimentalSessionAndOrigin) {
+      await this._handlePausedRequests(pageCriClient)
+      _listenForFrameTreeChanges(pageCriClient)
+    }
+
     // return the launched browser process
     // with additional method to close the remote connection
     return launchedBrowser
diff --git a/packages/server/lib/browsers/cri-client.ts b/packages/server/lib/browsers/cri-client.ts
index 900ced25aa5f..44bcfdb3d626 100644
--- a/packages/server/lib/browsers/cri-client.ts
+++ b/packages/server/lib/browsers/cri-client.ts
@@ -104,7 +104,7 @@ const maybeDebugCdpMessages = (cri) => {
 
 type DeferredPromise = { resolve: Function, reject: Function }
 
-export const create = async (target: string, onAsynchronousError: Function, host?: string, port?: number): Promise<CRIWrapper.Client> => {
+export const create = async (target: string, onAsynchronousError: Function, host?: string, port?: number, onReconnect?: (client: CRIWrapper.Client) => void): Promise<CRIWrapper.Client> => {
   const subscriptions: {eventName: CRIWrapper.EventName, cb: Function}[] = []
   const enableCommands: CRIWrapper.Command[] = []
   let enqueuedCommands: {command: CRIWrapper.Command, params: any, p: DeferredPromise }[] = []
@@ -147,6 +147,10 @@ export const create = async (target: string, onAsynchronousError: Function, host
       })
 
       enqueuedCommands = []
+
+      if (onReconnect) {
+        onReconnect(client)
+      }
     } catch (err) {
       const cdpError = errors.get('CDP_COULD_NOT_RECONNECT', err)
 
@@ -228,9 +232,6 @@ export const create = async (target: string, onAsynchronousError: Function, host
 
       return cri.close()
     },
-
-    // @ts-ignore
-    reconnect,
   }
 
   return client
diff --git a/packages/server/lib/browsers/electron.js b/packages/server/lib/browsers/electron.js
index 74b6e4c6bb83..c3ae8e95297c 100644
--- a/packages/server/lib/browsers/electron.js
+++ b/packages/server/lib/browsers/electron.js
@@ -56,7 +56,7 @@ const _getAutomation = async function (win, options, parent) {
     win.destroy()
   }
 
-  const automation = await CdpAutomation.create(sendCommand, on, sendClose, parent)
+  const automation = await CdpAutomation.create(sendCommand, on, sendClose, parent, options.experimentalSessionAndOrigin)
 
   automation.onRequest = _.wrap(automation.onRequest, async (fn, message, data) => {
     switch (message) {
@@ -195,7 +195,9 @@ module.exports = {
       win.maximize()
     }
 
-    return this._launch(win, url, automation, preferences)
+    return this._launch(win, url, automation, preferences).tap(async () => {
+      automation.use(await _getAutomation(win, preferences, automation))
+    })
   },
 
   _launchChild (e, url, parent, projectRoot, state, options, automation) {
@@ -276,6 +278,11 @@ module.exports = {
     .then(() => {
       return win.loadURL(url)
     })
+    .then(() => {
+      if (options.experimentalSessionAndOrigin) {
+        this._listenToOnBeforeHeaders(win)
+      }
+    })
     .return(win)
   },
 
@@ -361,6 +368,35 @@ module.exports = {
     })
   },
 
+  _listenToOnBeforeHeaders (win) {
+    // true if the frame only has a single parent, false otherwise
+    const isFirstLevelIFrame = (frame) => (!!frame?.parent && !frame.parent.parent)
+
+    // adds a header to the request to mark it as a request for the AUT frame
+    // itself, so the proxy can utilize that for injection purposes
+    win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
+      if (
+        // isn't an iframe
+        details.resourceType !== 'subFrame'
+        // the top-level frame or a nested frame
+        || !isFirstLevelIFrame(details.frame)
+        // is the spec frame, not the AUT
+        || details.url.includes('__cypress')
+      ) {
+        cb({})
+
+        return
+      }
+
+      cb({
+        requestHeaders: {
+          ...details.requestHeaders,
+          'X-Cypress-Is-AUT-Frame': 'true',
+        },
+      })
+    })
+  },
+
   _getPartition (options) {
     if (options.isTextTerminal) {
       // create dynamic persisted run
diff --git a/packages/server/lib/browsers/firefox-util.ts b/packages/server/lib/browsers/firefox-util.ts
index 26cc1ce9d421..7cdffa7a0b8d 100644
--- a/packages/server/lib/browsers/firefox-util.ts
+++ b/packages/server/lib/browsers/firefox-util.ts
@@ -126,7 +126,7 @@ async function connectToNewSpec (options, automation: Automation, browserCriClie
 
   const pageCriClient = await browserCriClient.attachToTargetUrl('about:blank')
 
-  await CdpAutomation.create(pageCriClient.send, pageCriClient.on, browserCriClient.closeCurrentTarget, automation)
+  await CdpAutomation.create(pageCriClient.send, pageCriClient.on, browserCriClient.closeCurrentTarget, automation, options.experimentalSessionAndOrigin)
 
   await options.onInitializeNewBrowserTab()
 
@@ -134,11 +134,11 @@ async function connectToNewSpec (options, automation: Automation, browserCriClie
   await navigateToUrl(options.url)
 }
 
-async function setupRemote (remotePort, automation, onError): Promise<BrowserCriClient> {
+async function setupRemote (remotePort, automation, onError, options): Promise<BrowserCriClient> {
   const browserCriClient = await BrowserCriClient.create(remotePort, 'Firefox', onError)
   const pageCriClient = await browserCriClient.attachToTargetUrl('about:blank')
 
-  await CdpAutomation.create(pageCriClient.send, pageCriClient.on, browserCriClient.closeCurrentTarget, automation)
+  await CdpAutomation.create(pageCriClient.send, pageCriClient.on, browserCriClient.closeCurrentTarget, automation, options.experimentalSessionAndOrigin)
 
   return browserCriClient
 }
@@ -222,11 +222,12 @@ export default {
     marionettePort,
     foxdriverPort,
     remotePort,
+    options,
   }): Bluebird<BrowserCriClient> {
     return Bluebird.all([
       this.setupFoxdriver(foxdriverPort),
       this.setupMarionette(extensions, url, marionettePort),
-      remotePort && setupRemote(remotePort, automation, onError),
+      remotePort && setupRemote(remotePort, automation, onError, options),
     ]).then(([,, browserCriClient]) => navigateToUrl(url).then(() => browserCriClient))
   },
 
diff --git a/packages/server/lib/browsers/firefox.ts b/packages/server/lib/browsers/firefox.ts
index 31e686ea29ee..c2f060973146 100644
--- a/packages/server/lib/browsers/firefox.ts
+++ b/packages/server/lib/browsers/firefox.ts
@@ -527,7 +527,7 @@ export async function open (browser: Browser, url, options: any = {}, automation
   }) as LaunchedBrowser & { browserCriClient: BrowserCriClient}
 
   try {
-    browserCriClient = await firefoxUtil.setup({ automation, extensions: launchOptions.extensions, url, foxdriverPort, marionettePort, remotePort, onError: options.onError })
+    browserCriClient = await firefoxUtil.setup({ automation, extensions: launchOptions.extensions, url, foxdriverPort, marionettePort, remotePort, onError: options.onError, options })
 
     if (os.platform() === 'win32') {
       // override the .kill method for Windows so that the detached Firefox process closes between specs
diff --git a/packages/server/lib/controllers/files.js b/packages/server/lib/controllers/files.js
index 2b4e25159864..9ee676d0108a 100644
--- a/packages/server/lib/controllers/files.js
+++ b/packages/server/lib/controllers/files.js
@@ -8,7 +8,8 @@ const { escapeFilenameInUrl } = require('../util/escape_filename')
 const { getCtx } = require('@packages/data-context')
 
 module.exports = {
-  handleIframe (req, res, config, getRemoteState, extraOptions) {
+
+  handleIframe (req, res, config, remoteStates, extraOptions) {
     const test = req.params[0]
     const iframePath = cwd('lib', 'html', 'iframe.html')
     const specFilter = _.get(extraOptions, 'specFilter')
@@ -25,7 +26,7 @@ module.exports = {
 
         const iframeOptions = {
           title: this.getTitle(test),
-          domain: getRemoteState().domainName,
+          domain: remoteStates.getPrimary().domainName,
           scripts: JSON.stringify(allFilesToSend),
         }
 
@@ -36,6 +37,20 @@ module.exports = {
     })
   },
 
+  handleCrossOriginIframe (req, res) {
+    const iframePath = cwd('lib', 'html', 'spec-bridge-iframe.html')
+    const domain = req.hostname
+
+    const iframeOptions = {
+      domain,
+      title: `Cypress for ${domain}`,
+    }
+
+    debug('cross origin iframe with options %o', iframeOptions)
+
+    res.render(iframePath, iframeOptions)
+  },
+
   getSpecs (spec, config, extraOptions = {}) {
     // when asking for all specs: spec = "__all"
     // otherwise it is a relative spec filename like "integration/spec.js"
diff --git a/packages/server/lib/controllers/iframes.ts b/packages/server/lib/controllers/iframes.ts
index e2bae6d78552..64c8dbe3a9d0 100644
--- a/packages/server/lib/controllers/iframes.ts
+++ b/packages/server/lib/controllers/iframes.ts
@@ -4,6 +4,7 @@ import Debug from 'debug'
 import files from './files'
 import type { Cfg } from '../project-base'
 import type { FoundSpec } from '@packages/types'
+import type { RemoteStates } from '../remote_states'
 
 const debug = Debug('cypress:server:iframes')
 
@@ -12,7 +13,7 @@ interface IFramesController {
 }
 
 interface E2E extends IFramesController {
-  getRemoteState: () => any
+  remoteStates: RemoteStates
   getSpec: () => FoundSpec | null
 }
 
@@ -21,7 +22,7 @@ interface CT extends IFramesController {
 }
 
 export const iframesController = {
-  e2e: ({ getSpec, getRemoteState, config }: E2E, req: Request, res: Response) => {
+  e2e: ({ getSpec, remoteStates, config }: E2E, req: Request, res: Response) => {
     const extraOptions = {
       specType: 'integration',
     }
@@ -37,7 +38,7 @@ export const iframesController = {
     // https://github.com/cypress-io/cypress/issues/20147
     res.setHeader('Origin-Agent-Cluster', '?0')
 
-    files.handleIframe(req, res, config, getRemoteState, extraOptions)
+    files.handleIframe(req, res, config, remoteStates, extraOptions)
   },
 
   component: ({ config, nodeProxy }: CT, req: Request, res: Response) => {
diff --git a/packages/server/lib/controllers/runner.ts b/packages/server/lib/controllers/runner.ts
index 3fc397026aa4..43bf3a1758bd 100644
--- a/packages/server/lib/controllers/runner.ts
+++ b/packages/server/lib/controllers/runner.ts
@@ -22,7 +22,7 @@ const _serveNonProxiedError = (res: Response) => {
   })
 }
 
-export interface ServeOptions extends Pick<InitializeRoutes, 'getSpec' | 'config' | 'getCurrentBrowser' | 'getRemoteState' | 'exit'> {
+export interface ServeOptions extends Pick<InitializeRoutes, 'getSpec' | 'config' | 'getCurrentBrowser' | 'remoteStates' | 'exit'> {
   testingType: Cypress.TestingType
 }
 
@@ -54,7 +54,7 @@ export const runner = {
       return _serveNonProxiedError(res)
     }
 
-    let { config, getRemoteState, getCurrentBrowser, getSpec, exit } = options
+    let { config, remoteStates, getCurrentBrowser, getSpec, exit } = options
 
     config = _.clone(config)
     // at any given point, rather than just arbitrarily modifying it.
@@ -70,7 +70,7 @@ export const runner = {
     // }
     // TODO: Find out what the problem.
     if (options.testingType === 'e2e') {
-      config.remote = getRemoteState()
+      config.remote = remoteStates.getPrimary()
     }
 
     const spec = getSpec()
@@ -91,8 +91,9 @@ export const runner = {
     return serveRunner(runnerPkg, config, res)
   },
 
-  handle (req: Request, res: Response) {
-    const pathToFile = getPathToDist('runner-ct', req.params[0])
+  handle (testingType, req: Request, res: Response) {
+    // FIXME: Why is runner-ct being used for all injections? Can anyone comment here as to why this changed?
+    const pathToFile = getPathToDist(testingType === 'e2e' ? 'runner' : 'runner-ct', req.params[0])
 
     return send(req, pathToFile)
     .pipe(res)
diff --git a/packages/server/lib/experiments.ts b/packages/server/lib/experiments.ts
index 3aae51da2151..0a0e876c76f0 100644
--- a/packages/server/lib/experiments.ts
+++ b/packages/server/lib/experiments.ts
@@ -53,6 +53,7 @@ interface StringValues {
 const _summaries: StringValues = {
   experimentalFetchPolyfill: 'Polyfills `window.fetch` to enable Network spying and stubbing.',
   experimentalInteractiveRunEvents: 'Allows listening to the `before:run`, `after:run`, `before:spec`, and `after:spec` events in the plugins file during interactive mode.',
+  experimentalSessionAndOrigin: 'Enables cross-origin and improved session support, including the `cy.origin` and `cy.session` commands.',
   experimentalSourceRewriting: 'Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.',
   experimentalStudio: 'Generate and save commands directly to your test suite by interacting with your app as an end user would.',
 }
@@ -68,9 +69,10 @@ const _summaries: StringValues = {
   ```
 */
 const _names: StringValues = {
-  experimentalFetchPolyfill: 'Fetch polyfill',
+  experimentalFetchPolyfill: 'Fetch Polyfill',
   experimentalInteractiveRunEvents: 'Interactive Mode Run Events',
-  experimentalSourceRewriting: 'Improved source rewriting',
+  experimentalSessionAndOrigin: 'Cross-origin and Session',
+  experimentalSourceRewriting: 'Improved Source Rewriting',
   experimentalStudio: 'Studio',
 }
 
diff --git a/packages/server/lib/html/spec-bridge-iframe.html b/packages/server/lib/html/spec-bridge-iframe.html
new file mode 100644
index 000000000000..5c75ad416ef2
--- /dev/null
+++ b/packages/server/lib/html/spec-bridge-iframe.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <script type="text/javascript">
+      document.domain = '{{domain}}';
+    </script>
+    <script src="/__cypress/runner/cypress_cross_origin_runner.js"></script>
+  </body>
+</html>
diff --git a/packages/server/lib/makeDataContext.ts b/packages/server/lib/makeDataContext.ts
index 16ccdf3582a6..eb33f582f781 100644
--- a/packages/server/lib/makeDataContext.ts
+++ b/packages/server/lib/makeDataContext.ts
@@ -126,6 +126,9 @@ export function makeDataContext (options: MakeDataContextOptions): DataContext {
       getConfig () {
         return openProject.getConfig()
       },
+      getRemoteStates () {
+        return openProject.getRemoteStates()
+      },
       getCurrentProjectSavedState () {
         // TODO: See if this is the best way we should be getting this config,
         // shouldn't we have this already in the DataContext?
diff --git a/packages/server/lib/open_project.ts b/packages/server/lib/open_project.ts
index 2fafa176dbcf..c8bce88654a2 100644
--- a/packages/server/lib/open_project.ts
+++ b/packages/server/lib/open_project.ts
@@ -39,6 +39,10 @@ export class OpenProject {
     return this.projectBase?.getConfig()
   }
 
+  getRemoteStates () {
+    return this.projectBase?.remoteStates
+  }
+
   getProject () {
     return this.projectBase
   }
@@ -78,6 +82,7 @@ export class OpenProject {
       chromeWebSecurity: cfg.chromeWebSecurity,
       isTextTerminal: cfg.isTextTerminal,
       downloadsFolder: cfg.downloadsFolder,
+      experimentalSessionAndOrigin: cfg.experimentalSessionAndOrigin,
     })
 
     // if we don't have the isHeaded property
diff --git a/packages/server/lib/project-base.ts b/packages/server/lib/project-base.ts
index 0e67e0be7341..90874f7e5089 100644
--- a/packages/server/lib/project-base.ts
+++ b/packages/server/lib/project-base.ts
@@ -130,6 +130,10 @@ export class ProjectBase<TServer extends Server> extends EE {
     return this.cfg.state
   }
 
+  get remoteStates () {
+    return this._server?.remoteStates
+  }
+
   injectCtSpecificConfig (cfg) {
     cfg.resolved.testingType = { value: 'component' }
 
@@ -480,7 +484,7 @@ export class ProjectBase<TServer extends Server> extends EE {
 
     return {
       ...this._cfg,
-      remote: this._server?._getRemoteState() ?? {} as Cypress.RemoteState,
+      remote: this.remoteStates?.current() ?? {} as Cypress.RemoteState,
       browser: this.browser,
       testingType: this.ctx.coreData.currentTestingType ?? 'e2e',
       specs: [],
diff --git a/packages/server/lib/remote_states.ts b/packages/server/lib/remote_states.ts
new file mode 100644
index 000000000000..836f237e5e2d
--- /dev/null
+++ b/packages/server/lib/remote_states.ts
@@ -0,0 +1,196 @@
+import { cors } from '@packages/network'
+import origin from './util/origin'
+import Debug from 'debug'
+import _ from 'lodash'
+import type EventEmitter from 'events'
+
+const DEFAULT_DOMAIN_NAME = 'localhost'
+const fullyQualifiedRe = /^https?:\/\//
+
+const debug = Debug('cypress:server:remote-states')
+
+/**
+ * Class to maintain and manage the remote states of the server.
+ *
+ * Example file remote state:
+ * {
+ *   auth: {
+ *     username: 'name'
+ *     password: 'pass'
+ *   }
+ *   origin: "http://localhost:2020"
+ *   fileServer: "http://localhost:2021"
+ *   strategy: "file"
+ *   domainName: "localhost"
+ *   props: null
+ * }
+ *
+ * Example http remote state:
+ * {
+ *   auth: {
+ *     username: 'name'
+ *     password: 'pass'
+ *   }
+ *   origin: "https://foo.google.com"
+ *   fileServer: null
+ *   strategy: "http"
+ *   domainName: "google.com"
+ *   props: {
+ *     port: 443
+ *     tld: "com"
+ *     domain: "google"
+ *   }
+ * }
+ */
+export class RemoteStates {
+  private remoteStates: Map<string, Cypress.RemoteState> = new Map()
+  private originStack: string[] = []
+  private configure: () => { serverPort: number, fileServerPort: number }
+  private _config: { serverPort: number, fileServerPort: number } | undefined
+
+  constructor (configure) {
+    this.configure = configure
+  }
+
+  get (url: string) {
+    const state = this.remoteStates.get(cors.getOriginPolicy(url))
+
+    debug('getting remote state: %o for: %s', state, url)
+
+    return _.cloneDeep(state)
+  }
+
+  getPrimary () {
+    const state = Array.from(this.remoteStates.entries())[0][1]
+
+    debug('getting primary remote state: %o', state)
+
+    return state
+  }
+
+  isInOriginStack (url: string): boolean {
+    return this.originStack.includes(cors.getOriginPolicy(url))
+  }
+
+  isSecondaryOrigin (url: string): boolean {
+    // start at 1 to exclude the primary origin
+    return this.originStack.indexOf(cors.getOriginPolicy(url), 1) !== -1
+  }
+
+  isPrimaryOrigin (url: string): boolean {
+    return this.originStack[0] === cors.getOriginPolicy(url)
+  }
+
+  reset () {
+    debug('resetting remote state')
+
+    const stateArray = Array.from(this.remoteStates.entries())
+
+    // reset the remoteStates and originStack to the primary
+    this.remoteStates = new Map([stateArray[0]])
+    this.originStack = [stateArray[0][0]]
+  }
+
+  current (): Cypress.RemoteState {
+    return this.get(this.originStack[this.originStack.length - 1]) as Cypress.RemoteState
+  }
+
+  set (urlOrState: string | Cypress.RemoteState, options: { auth?: {}, isCrossOrigin?: boolean } = {}): Cypress.RemoteState {
+    let state
+
+    if (_.isString(urlOrState)) {
+      const remoteOrigin = origin(urlOrState)
+      const remoteProps = cors.parseUrlIntoDomainTldPort(remoteOrigin)
+
+      if ((urlOrState === '<root>') || !fullyQualifiedRe.test(urlOrState)) {
+        state = {
+          auth: options.auth,
+          origin: `http://${DEFAULT_DOMAIN_NAME}:${this.config.serverPort}`,
+          strategy: 'file',
+          fileServer: _.compact([`http://${DEFAULT_DOMAIN_NAME}`, this.config.fileServerPort]).join(':'),
+          domainName: DEFAULT_DOMAIN_NAME,
+          props: null,
+        }
+      } else {
+        state = {
+          auth: options.auth,
+          origin: remoteOrigin,
+          strategy: 'http',
+          fileServer: null,
+          domainName: cors.getDomainNameFromParsedHost(remoteProps),
+          props: remoteProps,
+        }
+      }
+    } else {
+      state = urlOrState
+    }
+
+    const remoteOriginPolicy = cors.getOriginPolicy(state.origin)
+
+    if (options.isCrossOrigin) {
+      this.remoteStates.set(remoteOriginPolicy, state)
+    } else {
+      // convert map to array
+      const stateArray = Array.from(this.remoteStates.entries())
+
+      // set the primary remote state and convert back to map
+      stateArray[0] = [remoteOriginPolicy, state]
+      this.remoteStates = new Map(stateArray)
+
+      // automatically update the primary origin stack
+      this.originStack[0] = remoteOriginPolicy
+    }
+
+    debug('setting remote state %o for %s', state, remoteOriginPolicy)
+
+    return this.get(remoteOriginPolicy) as Cypress.RemoteState
+  }
+
+  addEventListeners (eventEmitter: EventEmitter) {
+    eventEmitter.on('cross:origin:bridge:ready', ({ originPolicy }) => {
+      debug(`received cross:origin:bridge:ready, add origin ${originPolicy} to remote states`)
+
+      const existingOrigin = this.remoteStates.get(originPolicy)
+
+      // since this is just the cy.origin starting, we don't want to override
+      // the existing origin if it already exists
+      if (!existingOrigin) {
+        this.set(originPolicy, { isCrossOrigin: true })
+      }
+
+      this.addOrigin(originPolicy)
+    })
+
+    eventEmitter.on('cross:origin:finished', (originPolicy) => {
+      debug(`received cross:origin:finished, remove ${originPolicy} from origin stack`)
+
+      this.removeCurrentOrigin(originPolicy)
+    })
+  }
+
+  private get config () {
+    if (!this._config) {
+      this._config = this.configure()
+    }
+
+    return this._config
+  }
+
+  private addOrigin (originPolicy) {
+    this.originStack.push(originPolicy)
+
+    debug('added origin: ', originPolicy)
+  }
+
+  private removeCurrentOrigin (originPolicy) {
+    const currentOriginPolicy = this.originStack[this.originStack.length - 1]
+
+    if (originPolicy !== currentOriginPolicy) {
+      throw new Error(`Tried to remove origin ${originPolicy} but ${currentOriginPolicy} was found. This should never happen and likely is a bug. Please open an issue.`)
+    }
+
+    this.originStack.pop()
+
+    debug('removed current origin: ', originPolicy)
+  }
+}
diff --git a/packages/server/lib/routes-e2e.ts b/packages/server/lib/routes-e2e.ts
index bda70f6e5391..914f21d31cf3 100644
--- a/packages/server/lib/routes-e2e.ts
+++ b/packages/server/lib/routes-e2e.ts
@@ -7,6 +7,7 @@ import CacheBuster from './util/cache_buster'
 import specController from './controllers/spec'
 import reporter from './controllers/reporter'
 import client from './controllers/client'
+import files from './controllers/files'
 import type { InitializeRoutes } from './routes'
 
 const debug = Debug('cypress:server:routes-e2e')
@@ -123,5 +124,11 @@ export const createRoutesE2E = ({
     res.sendFile(file, { etag: false })
   })
 
+  routesE2E.get('/__cypress/spec-bridge-iframes', (req, res) => {
+    debug('handling cross-origin iframe for domain: %s', req.hostname)
+
+    files.handleCrossOriginIframe(req, res)
+  })
+
   return routesE2E
 }
diff --git a/packages/server/lib/routes.ts b/packages/server/lib/routes.ts
index 5dbbe6359aa6..dd436da6fd7f 100644
--- a/packages/server/lib/routes.ts
+++ b/packages/server/lib/routes.ts
@@ -13,6 +13,7 @@ import { iframesController } from './controllers/iframes'
 import type { FoundSpec } from '@packages/types'
 import { getCtx } from '@packages/data-context'
 import { graphQLHTTP } from '@packages/graphql/src/makeGraphQLServer'
+import type { RemoteStates } from './remote_states'
 
 const debug = Debug('cypress:server:routes')
 
@@ -22,7 +23,7 @@ export interface InitializeRoutes {
   getCurrentBrowser: () => Browser
   nodeProxy: httpProxy
   networkProxy: NetworkProxy
-  getRemoteState: () => Cypress.RemoteState
+  remoteStates: RemoteStates
   onError: (...args: unknown[]) => any
   testingType: Cypress.TestingType
   exit?: boolean
@@ -34,7 +35,7 @@ export const createCommonRoutes = ({
   testingType,
   getSpec,
   getCurrentBrowser,
-  getRemoteState,
+  remoteStates,
   nodeProxy,
   exit,
 }: InitializeRoutes) => {
@@ -60,7 +61,7 @@ export const createCommonRoutes = ({
   router.use(`/${namespace}/graphql/*`, graphQLHTTP)
 
   router.get(`/${namespace}/runner/*`, (req, res) => {
-    runner.handle(req, res)
+    runner.handle(testingType, req, res)
   })
 
   router.all(`/${namespace}/xhrs/*`, (req, res, next) => {
@@ -69,7 +70,7 @@ export const createCommonRoutes = ({
 
   router.get(`/${namespace}/iframes/*`, (req, res) => {
     if (testingType === 'e2e') {
-      iframesController.e2e({ config, getSpec, getRemoteState }, req, res)
+      iframesController.e2e({ config, getSpec, remoteStates }, req, res)
     }
 
     if (testingType === 'component') {
diff --git a/packages/server/lib/server-base.ts b/packages/server/lib/server-base.ts
index 88c66d32953a..7ee32206588d 100644
--- a/packages/server/lib/server-base.ts
+++ b/packages/server/lib/server-base.ts
@@ -2,6 +2,7 @@ import './cwd'
 import Bluebird from 'bluebird'
 import compression from 'compression'
 import Debug from 'debug'
+import EventEmitter from 'events'
 import evilDns from 'evil-dns'
 import express, { Express } from 'express'
 import http from 'http'
@@ -20,7 +21,6 @@ import Request from './request'
 import type { SocketE2E } from './socket-e2e'
 import templateEngine from './template_engine'
 import { ensureProp } from './util/class-helpers'
-import origin from './util/origin'
 import { allowDestroy, DestroyableHttpServer } from './util/server_destroy'
 import { SocketAllowed } from './util/socket_allowed'
 import { createInitialWorkers } from '@packages/rewriter'
@@ -31,9 +31,7 @@ import { createRoutesE2E } from './routes-e2e'
 import { createRoutesCT } from './routes-ct'
 import type { FoundSpec } from '@packages/types'
 import type { Server as WebSocketServer } from 'ws'
-
-const DEFAULT_DOMAIN_NAME = 'localhost'
-const fullyQualifiedRe = /^https?:\/\//
+import { RemoteStates } from './remote_states'
 
 const debug = Debug('cypress:server:server-base')
 
@@ -119,23 +117,25 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
   protected _netStubbingState?: NetStubbingState
   protected _httpsProxy?: httpsProxy
   protected _graphqlWS?: WebSocketServer
-
-  protected _remoteAuth: unknown
-  protected _remoteProps: unknown
-  protected _remoteOrigin: unknown
-  protected _remoteStrategy: unknown
-  protected _remoteVisitingUrl: unknown
-  protected _remoteDomainName: unknown
-  protected _remoteFileServer: unknown
+  protected _eventBus: EventEmitter
+  protected _remoteStates: RemoteStates
 
   constructor () {
     this.isListening = false
     // @ts-ignore
     this.request = Request()
     this.socketAllowed = new SocketAllowed()
+    this._eventBus = new EventEmitter()
     this._middleware = null
     this._baseUrl = null
     this._fileServer = null
+
+    this._remoteStates = new RemoteStates(() => {
+      return {
+        serverPort: this._port(),
+        fileServerPort: this._fileServer?.port(),
+      }
+    })
   }
 
   ensureProp = ensureProp
@@ -164,6 +164,20 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return this.ensureProp(this._httpsProxy, 'open')
   }
 
+  get remoteStates () {
+    return this._remoteStates
+  }
+
+  setupCrossOriginRequestHandling () {
+    this._eventBus.on('cross:origin:delaying:html', (request) => {
+      this.socket.localBus.once('cross:origin:release:html', () => {
+        this._eventBus.emit('cross:origin:release:html')
+      })
+
+      this.socket.toDriver('cross:origin:delaying:html', request)
+    })
+  }
+
   abstract createServer (
     app: Express,
     config: Cfg,
@@ -198,11 +212,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
 
     clientCertificates.loadClientCertificateConfig(config)
 
-    const getRemoteState = () => {
-      return this._getRemoteState()
-    }
-
-    this.createNetworkProxy(config, getRemoteState, shouldCorrelatePreRequests)
+    this.createNetworkProxy({ config, getCurrentBrowser, remoteStates: this._remoteStates, shouldCorrelatePreRequests })
 
     if (config.experimentalSourceRewriting) {
       createInitialWorkers()
@@ -212,7 +222,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
 
     const routeOptions: InitializeRoutes = {
       config,
-      getRemoteState,
+      remoteStates: this._remoteStates,
       nodeProxy: this.nodeProxy,
       networkProxy: this._networkProxy!,
       onError,
@@ -222,6 +232,9 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
       exit,
     }
 
+    this.setupCrossOriginRequestHandling()
+    this._remoteStates.addEventListeners(this.socket.localBus)
+
     const runnerSpecificRouter = testingType === 'e2e'
       ? createRoutesE2E(routeOptions)
       : createRoutesCT(routeOptions)
@@ -292,7 +305,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return e
   }
 
-  createNetworkProxy (config, getRemoteState, shouldCorrelatePreRequests) {
+  createNetworkProxy ({ config, getCurrentBrowser, remoteStates, shouldCorrelatePreRequests }) {
     const getFileServerToken = () => {
       return this._fileServer.token
     }
@@ -302,11 +315,13 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     this._networkProxy = new NetworkProxy({
       config,
       shouldCorrelatePreRequests,
-      getRemoteState,
+      getCurrentBrowser,
+      remoteStates,
       getFileServerToken,
       socket: this.socket,
       netStubbingState: this.netStubbingState,
       request: this.request,
+      serverBus: this._eventBus,
     })
   }
 
@@ -318,6 +333,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     options.onResetServerState = () => {
       this.networkProxy.reset()
       this.netStubbingState.reset()
+      this._remoteStates.reset()
     }
 
     const io = this.socket.startListening(this.server, automation, config, options)
@@ -350,7 +366,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return svr
   }
 
-  _port () {
+  _port = () => {
     return (this.server.address() as AddressInfo).port
   }
 
@@ -403,88 +419,6 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     })
   }
 
-  _getRemoteState (): Cypress.RemoteState {
-    // {
-    //   origin: "http://localhost:2020"
-    //   fileServer:
-    //   strategy: "file"
-    //   domainName: "localhost"
-    //   props: null
-    // }
-
-    // {
-    //   origin: "https://foo.google.com"
-    //   strategy: "http"
-    //   domainName: "google.com"
-    //   props: {
-    //     port: 443
-    //     tld: "com"
-    //     domain: "google"
-    //   }
-    // }
-
-    const props = _.extend({}, {
-      auth: this._remoteAuth,
-      props: this._remoteProps,
-      origin: this._remoteOrigin,
-      strategy: this._remoteStrategy,
-      visiting: this._remoteVisitingUrl,
-      domainName: this._remoteDomainName,
-      fileServer: this._remoteFileServer,
-    }) as Cypress.RemoteState
-
-    debug('Getting remote state: %o', props)
-
-    return props
-  }
-
-  _onDomainSet (fullyQualifiedUrl, options: Record<string, unknown> = {}) {
-    const l = (type, val) => {
-      return debug('Setting', type, val)
-    }
-
-    this._remoteAuth = options.auth
-
-    l('remoteAuth', this._remoteAuth)
-
-    // if this isn't a fully qualified url
-    // or if this came to us as <root> in our tests
-    // then we know to go back to our default domain
-    // which is the localhost server
-    if ((fullyQualifiedUrl === '<root>') || !fullyQualifiedRe.test(fullyQualifiedUrl)) {
-      this._remoteOrigin = `http://${DEFAULT_DOMAIN_NAME}:${this._port()}`
-      this._remoteStrategy = 'file'
-      this._remoteFileServer = `http://${DEFAULT_DOMAIN_NAME}:${(this._fileServer != null ? this._fileServer.port() : undefined)}`
-      this._remoteDomainName = DEFAULT_DOMAIN_NAME
-      this._remoteProps = null
-
-      l('remoteOrigin', this._remoteOrigin)
-      l('remoteStrategy', this._remoteStrategy)
-      l('remoteHostAndPort', this._remoteProps)
-      l('remoteDocDomain', this._remoteDomainName)
-      l('remoteFileServer', this._remoteFileServer)
-    } else {
-      this._remoteOrigin = origin(fullyQualifiedUrl)
-
-      this._remoteStrategy = 'http'
-
-      this._remoteFileServer = null
-
-      // set an object with port, tld, and domain properties
-      // as the remoteHostAndPort
-      this._remoteProps = cors.parseUrlIntoDomainTldPort(this._remoteOrigin)
-
-      // @ts-ignore
-      this._remoteDomainName = _.compact([this._remoteProps.domain, this._remoteProps.tld]).join('.')
-
-      l('remoteOrigin', this._remoteOrigin)
-      l('remoteHostAndPort', this._remoteProps)
-      l('remoteDocDomain', this._remoteDomainName)
-    }
-
-    return this._getRemoteState()
-  }
-
   proxyWebsockets (proxy, socketIoRoute, req, socket, head) {
     // bail if this is our own namespaced socket.io / graphql-ws request
 
@@ -537,7 +471,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
 
     const baseUrl = this._baseUrl ?? '<root>'
 
-    return this._onDomainSet(baseUrl)
+    return this._remoteStates.set(baseUrl)
   }
 
   _close () {
diff --git a/packages/server/lib/server-ct.ts b/packages/server/lib/server-ct.ts
index 05c09dca44fc..d5b6d7240ab1 100644
--- a/packages/server/lib/server-ct.ts
+++ b/packages/server/lib/server-ct.ts
@@ -38,11 +38,10 @@ export class ServerCt extends ServerBase<SocketCt> {
         .then((httpsProxy) => {
           this._httpsProxy = httpsProxy
 
-          // once we open set the domain
-          // to root by default
+          // once we open set the domain to root by default
           // which prevents a situation where navigating
           // to http sites redirects to /__/ cypress
-          this._onDomainSet(baseUrl)
+          this._remoteStates.set(baseUrl)
 
           return resolve([port])
         })
diff --git a/packages/server/lib/server-e2e.ts b/packages/server/lib/server-e2e.ts
index a867bc4958e0..9867dee8a34d 100644
--- a/packages/server/lib/server-e2e.ts
+++ b/packages/server/lib/server-e2e.ts
@@ -122,11 +122,10 @@ export class ServerE2E extends ServerBase<SocketE2E> {
             })
           }
         }).then((warning) => {
-          // once we open set the domain
-          // to root by default
+          // once we open set the domain to root by default
           // which prevents a situation where navigating
           // to http sites redirects to /__/ cypress
-          this._onDomainSet(baseUrl != null ? baseUrl : '<root>')
+          this._remoteStates.set(baseUrl != null ? baseUrl : '<root>')
 
           return resolve([port, warning])
         })
@@ -164,7 +163,8 @@ export class ServerE2E extends ServerBase<SocketE2E> {
     const request = this.request
 
     let handlingLocalFile = false
-    const previousState = _.clone(this._getRemoteState())
+    const previousRemoteState = this._remoteStates.current()
+    const previousRemoteStateIsPrimary = this._remoteStates.isPrimaryOrigin(previousRemoteState.origin)
 
     // nuke any hashes from our url since
     // those those are client only and do
@@ -213,22 +213,18 @@ export class ServerE2E extends ServerBase<SocketE2E> {
 
         options.headers['x-cypress-authorization'] = this._fileServer.token
 
-        this._remoteVisitingUrl = true
+        const state = this._remoteStates.set(urlStr, options)
 
-        this._onDomainSet(urlStr, options)
-
-        // TODO: instead of joining remoteOrigin here
-        // we can simply join our fileServer origin
-        // and bypass all the remoteState.visiting shit
-        urlFile = url.resolve(this._remoteFileServer as string, urlStr)
-        urlStr = url.resolve(this._remoteOrigin as string, urlStr)
+        // TODO: Update url.resolve signature to not use deprecated methods
+        urlFile = url.resolve(state.fileServer as string, urlStr)
+        urlStr = url.resolve(state.origin as string, urlStr)
       }
 
       const onReqError = (err) => {
         // only restore the previous state
         // if our promise is still pending
         if (p.isPending()) {
-          restorePreviousState()
+          restorePreviousRemoteState(previousRemoteState, previousRemoteStateIsPrimary)
         }
 
         return reject(err)
@@ -255,8 +251,6 @@ export class ServerE2E extends ServerBase<SocketE2E> {
               domain: cors.getSuperDomain(newUrl),
             })
             .then((cookies) => {
-              this._remoteVisitingUrl = false
-
               const statusIs2xxOrAllowedFailure = () => {
                 // is our status code in the 2xx range, or have we disabled failing
                 // on status code?
@@ -302,15 +296,15 @@ export class ServerE2E extends ServerBase<SocketE2E> {
 
                 details.totalTime = Date.now() - startTime
 
-                // TODO: think about moving this logic back into the
-                // frontend so that the driver can be in control of
-                // when the server should cache the request buffer
-                // and set the domain vs not
-                if (isOk && details.isHtml) {
-                  // reset the domain to the new url if we're not
-                  // handling a local file
+                // buffer the response and set the remote state if this is a successful html response that is for the same
+                // origin if the user has already visited an origin or if this is a request from within cy.origin
+                // TODO: think about moving this logic back into the frontend so that the driver can be in control
+                // of when to buffer and set the remote state
+                if (isOk && details.isHtml &&
+                  !((options.hasAlreadyVisitedUrl || options.isCrossOrigin) && !cors.urlOriginsMatch(previousRemoteState.origin, newUrl))) {
+                  // if we're not handling a local file set the remote state
                   if (!handlingLocalFile) {
-                    this._onDomainSet(newUrl, options)
+                    this._remoteStates.set(newUrl as string, options)
                   }
 
                   const responseBufferStream = new stream.PassThrough({
@@ -325,13 +319,16 @@ export class ServerE2E extends ServerBase<SocketE2E> {
                     details,
                     originalUrl,
                     response: incomingRes,
+                    isCrossOrigin: options.isCrossOrigin,
                   })
                 } else {
                   // TODO: move this logic to the driver too for
                   // the same reasons listed above
-                  restorePreviousState()
+                  restorePreviousRemoteState(previousRemoteState, previousRemoteStateIsPrimary)
                 }
 
+                details.isPrimaryOrigin = this._remoteStates.isPrimaryOrigin(newUrl!)
+
                 return resolve(details)
               })
 
@@ -341,14 +338,8 @@ export class ServerE2E extends ServerBase<SocketE2E> {
         })
       }
 
-      const restorePreviousState = () => {
-        this._remoteAuth = previousState.auth
-        this._remoteProps = previousState.props
-        this._remoteOrigin = previousState.origin
-        this._remoteStrategy = previousState.strategy
-        this._remoteFileServer = previousState.fileServer
-        this._remoteDomainName = previousState.domainName
-        this._remoteVisitingUrl = previousState.visiting
+      const restorePreviousRemoteState = (previousRemoteState: Cypress.RemoteState, previousRemoteStateIsPrimary: boolean) => {
+        this._remoteStates.set(previousRemoteState, { isCrossOrigin: !previousRemoteStateIsPrimary })
       }
 
       // if they're POSTing an object, querystringify their POST body
diff --git a/packages/server/lib/socket-base.ts b/packages/server/lib/socket-base.ts
index 743e60b913cc..e1b32322ca24 100644
--- a/packages/server/lib/socket-base.ts
+++ b/packages/server/lib/socket-base.ts
@@ -1,6 +1,7 @@
 import Bluebird from 'bluebird'
 import Debug from 'debug'
 import _ from 'lodash'
+import EventEmitter from 'events'
 import { onNetStubbingEvent } from '@packages/net-stubbing'
 import * as socketIo from '@packages/socket'
 import firefoxUtil from './browsers/firefox-util'
@@ -80,11 +81,15 @@ export class SocketBase {
   private _isRunnerSocketConnected
   private _sendFocusBrowserMessage
 
+  protected experimentalSessionAndOrigin: boolean
   protected ended: boolean
   protected _io?: socketIo.SocketIOServer
+  localBus: EventEmitter
 
-  constructor () {
+  constructor (config: Record<string, any>) {
+    this.experimentalSessionAndOrigin = config.experimentalSessionAndOrigin
     this.ended = false
+    this.localBus = new EventEmitter()
   }
 
   protected ensureProp = ensureProp
@@ -223,6 +228,11 @@ export class SocketBase {
 
         debug('automation:client connected')
 
+        // only send the necessary config
+        automationClient.emit('automation:config', {
+          experimentalSessionAndOrigin: this.experimentalSessionAndOrigin,
+        })
+
         // if our automation disconnects then we're
         // in trouble and should probably bomb everything
         automationClient.on('disconnect', () => {
@@ -458,6 +468,12 @@ export class SocketBase {
 
               return
             }
+            case 'cross:origin:bridge:ready':
+              return this.localBus.emit('cross:origin:bridge:ready', args[0])
+            case 'cross:origin:release:html':
+              return this.localBus.emit('cross:origin:release:html')
+            case 'cross:origin:finished':
+              return this.localBus.emit('cross:origin:finished', args[0])
             default:
               throw new Error(
                 `You requested a backend event we cannot handle: ${eventName}`,
diff --git a/packages/server/lib/socket-ct.ts b/packages/server/lib/socket-ct.ts
index 79dd85e95968..93dedadb854d 100644
--- a/packages/server/lib/socket-ct.ts
+++ b/packages/server/lib/socket-ct.ts
@@ -8,7 +8,7 @@ const debug = Debug('cypress:server:socket-ct')
 
 export class SocketCt extends SocketBase {
   constructor (config: Record<string, any>) {
-    super()
+    super(config)
 
     devServer.emitter.on('dev-server:compile:error', (error: string | undefined) => {
       this.toRunner('dev-server:hmr:error', error)
diff --git a/packages/server/lib/socket-e2e.ts b/packages/server/lib/socket-e2e.ts
index 7d5216ea187c..77241d018f15 100644
--- a/packages/server/lib/socket-e2e.ts
+++ b/packages/server/lib/socket-e2e.ts
@@ -16,7 +16,7 @@ export class SocketE2E extends SocketBase {
   private testFilePath: string | null
 
   constructor (config: Record<string, any>) {
-    super()
+    super(config)
 
     this.testFilePath = null
 
diff --git a/packages/server/package.json b/packages/server/package.json
index 61a4c41574e6..1e679a9fb545 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -17,8 +17,7 @@
     "test": "node ./test/scripts/run.js",
     "test-integration": "node ./test/scripts/run.js --glob-in-dir=test/integration",
     "test-performance": "node ./test/scripts/run.js --glob-in-dir=test/performance",
-    "test-unit": "node ./test/scripts/run.js --glob-in-dir=test/unit",
-    "test-watch": "./test/support/watch test"
+    "test-unit": "node ./test/scripts/run.js --glob-in-dir=test/unit"
   },
   "dependencies": {
     "@babel/parser": "7.13.0",
@@ -145,7 +144,6 @@
     "@packages/launcher": "0.0.0-development",
     "@packages/net-stubbing": "0.0.0-development",
     "@packages/network": "0.0.0-development",
-    "@packages/reporter": "0.0.0-development",
     "@packages/resolve-dist": "0.0.0-development",
     "@packages/root": "0.0.0-development",
     "@packages/socket": "0.0.0-development",
@@ -157,22 +155,16 @@
     "@types/chrome-remote-interface": "0.31.4",
     "@types/http-proxy": "1.17.4",
     "@types/node": "14.14.31",
-    "awesome-typescript-loader": "5.2.1",
     "babel-loader": "8.1.0",
-    "body-parser": "1.19.0",
     "chai-as-promised": "7.1.1",
     "chai-subset": "1.6.0",
     "chai-uuid": "1.0.6",
-    "chokidar-cli": "2.1.0",
     "chrome-har-capturer": "0.13.4",
     "cross-env": "6.0.3",
     "devtools-protocol": "0.0.839267",
     "eol": "0.9.1",
     "eventsource": "1.0.7",
-    "express-session": "1.16.1",
-    "express-useragent": "1.0.15",
     "https-proxy-agent": "3.0.1",
-    "istanbul": "0.4.5",
     "mocha": "7.1.0",
     "mocha-banner": "1.1.2",
     "mochawesome-1.5.2": "npm:mochawesome@1.5.2",
@@ -181,7 +173,6 @@
     "mock-fs": "5.1.1",
     "mocked-env": "1.2.4",
     "mockery": "2.1.0",
-    "multer": "1.4.2",
     "nock": "12.0.2",
     "proxyquire": "2.1.3",
     "react": "16.8.6",
diff --git a/packages/server/test/integration/cypress_spec.js b/packages/server/test/integration/cypress_spec.js
index e818f1fa268e..a470ef8e2e0f 100644
--- a/packages/server/test/integration/cypress_spec.js
+++ b/packages/server/test/integration/cypress_spec.js
@@ -971,6 +971,9 @@ describe('lib/cypress', () => {
             setUserAgent: sinon.stub(),
             on: sinon.stub(),
             removeListener: sinon.stub(),
+            webRequest: {
+              onBeforeSendHeaders () {},
+            },
           },
         }
 
diff --git a/packages/server/test/integration/http_requests_spec.js b/packages/server/test/integration/http_requests_spec.js
index f6aec5e1936f..384292f4b959 100644
--- a/packages/server/test/integration/http_requests_spec.js
+++ b/packages/server/test/integration/http_requests_spec.js
@@ -177,7 +177,7 @@ describe('Routes', () => {
                 await this.server.startWebsockets(automationStub, config, {})
 
                 if (initialUrl) {
-                  this.server._onDomainSet(initialUrl)
+                  this.server.remoteStates.set(initialUrl)
                 }
 
                 this.srv = this.server.getHttpServer()
@@ -230,7 +230,7 @@ describe('Routes', () => {
 
     // this tests a situation where we open our browser in another browser
     // without proxy mode set
-    it('redirects to config.clientRoute without a _remoteOrigin and without a proxy', function () {
+    it('redirects to config.clientRoute without a remote origin and without a proxy', function () {
       return this.rp({
         url: this.proxy,
         proxy: null,
@@ -242,10 +242,10 @@ describe('Routes', () => {
       })
     })
 
-    it('does not redirect with _remoteOrigin set', function () {
+    it('does not redirect with remote origin set', function () {
       return this.setup('http://www.github.com')
       .then(() => {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/')
         .reply(200, '<html></html>', {
           'Content-Type': 'text/html',
@@ -947,7 +947,7 @@ describe('Routes', () => {
       })
 
       it('basic 200 html response', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/')
         .reply(200, 'hello from bar!', {
           'Content-Type': 'text/html',
@@ -973,7 +973,7 @@ describe('Routes', () => {
       })
 
       it('unzips, injects, and then rezips initial content', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/gzip')
         .matchHeader('accept-encoding', 'gzip')
         .replyWithFile(200, Fixtures.path('server/gzip.html.gz'), {
@@ -1000,7 +1000,7 @@ describe('Routes', () => {
       })
 
       it('unzips, injects, and then rezips regular http content', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/gzip')
         .matchHeader('accept-encoding', 'gzip')
         .replyWithFile(200, Fixtures.path('server/gzip.html.gz'), {
@@ -1027,7 +1027,7 @@ describe('Routes', () => {
       })
 
       it('does not inject on regular gzip\'d content', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/gzip')
         .matchHeader('accept-encoding', 'gzip')
         .replyWithFile(200, Fixtures.path('server/gzip.html.gz'), {
@@ -1106,7 +1106,7 @@ describe('Routes', () => {
       })
 
       it('strips unsupported deflate and br encoding', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/accept')
         .matchHeader('accept-encoding', 'gzip')
         .reply(200, '<html>accept</html>')
@@ -1126,7 +1126,7 @@ describe('Routes', () => {
       })
 
       it('removes accept-encoding when nothing is supported', function () {
-        nock(this.server._remoteOrigin, {
+        nock(this.server.remoteStates.current().origin, {
           badheaders: ['accept-encoding'],
         })
         .get('/accept')
@@ -1153,7 +1153,7 @@ describe('Routes', () => {
       })
 
       it('sends back a 304', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/assets/app.js')
         .reply(304)
 
@@ -1175,7 +1175,7 @@ describe('Routes', () => {
       })
 
       it('passes the location header through', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo')
         .reply(302, undefined, {
           'Location': '/',
@@ -1202,7 +1202,7 @@ describe('Routes', () => {
       // this fixes improper url merge where we took query params
       // and added them needlessly
       it('doesnt redirect with query params or hashes which werent in location header', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo?bar=baz')
         .reply(302, undefined, {
           'Location': '/css',
@@ -1223,7 +1223,7 @@ describe('Routes', () => {
       })
 
       it('does redirect with query params if location header includes them', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo?bar=baz')
         .reply(302, undefined, {
           'Location': '/css?q=search',
@@ -1248,7 +1248,7 @@ describe('Routes', () => {
       })
 
       it('does redirect with query params to external domain if location header includes them', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo?bar=baz')
         .reply(302, undefined, {
           'Location': 'https://www.google.com/search?q=cypress',
@@ -1273,7 +1273,7 @@ describe('Routes', () => {
       })
 
       it('sets cookies and removes __cypress.initial when initial is originally false', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/css')
         .reply(302, undefined, {
           'Set-Cookie': 'foo=bar; Path=/',
@@ -1299,7 +1299,7 @@ describe('Routes', () => {
         it(`handles direct for status code: ${code}`, function () {
           return this.setup('http://auth.example.com')
           .then(() => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/login')
             .reply(code, undefined, {
               Location: 'http://app.example.com/users/1',
@@ -1327,7 +1327,7 @@ describe('Routes', () => {
       })
 
       it('passes through status code + content', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/index.html')
         .reply(500, 'server error', {
           'Content-Type': 'text/html',
@@ -1456,7 +1456,7 @@ describe('Routes', () => {
       })
 
       it('transparently proxies decoding gzip failures', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/index.html')
         .replyWithFile(200, Fixtures.path('server/gzip-bad.html.gz'), {
           'Content-Type': 'text/html',
@@ -1501,7 +1501,7 @@ describe('Routes', () => {
 
       describe('when initial is true', () => {
         it('sets back to false', function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/app.html')
           .reply(200, 'OK', {
             'Content-Type': 'text/html',
@@ -1523,7 +1523,7 @@ describe('Routes', () => {
 
       describe('when initial is false', () => {
         it('does not reset initial or remoteHost', function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/app.html')
           .reply(200, 'OK', {
             'Content-Type': 'text/html',
@@ -1545,7 +1545,7 @@ describe('Routes', () => {
       })
 
       it('sends with Transfer-Encoding: chunked without Content-Length', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/login')
         .reply(200, Buffer.from('foo'), {
           'Content-Type': 'text/html',
@@ -1567,7 +1567,7 @@ describe('Routes', () => {
       })
 
       it('does not have Content-Length', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/login')
         .reply(200, 'foo', {
           'Content-Type': 'text/html',
@@ -1590,7 +1590,7 @@ describe('Routes', () => {
       })
 
       it('forwards cookies from incoming responses', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/login')
         .reply(200, 'OK', {
           'set-cookie': 'userId=123',
@@ -1610,7 +1610,7 @@ describe('Routes', () => {
       })
 
       it('appends to previous cookies from incoming responses', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/login')
         .reply(200, '<html></html>', {
           'set-cookie': 'userId=123; Path=/',
@@ -1635,7 +1635,7 @@ describe('Routes', () => {
       })
 
       it('appends cookies on redirects', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/login')
         .reply(302, undefined, {
           'location': '/dashboard',
@@ -1661,7 +1661,7 @@ describe('Routes', () => {
       })
 
       it('passes invalid cookies', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/invalid')
         .reply(200, 'OK', {
           'set-cookie': [
@@ -1684,7 +1684,7 @@ describe('Routes', () => {
       })
 
       it('forwards other headers from incoming responses', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/auth')
         .reply(200, 'OK', {
           'x-token': 'abc-123',
@@ -1704,7 +1704,7 @@ describe('Routes', () => {
       })
 
       it('forwards headers to outgoing requests', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .matchHeader('x-custom', 'value')
         .reply(200, 'hello from bar!', {
@@ -1726,7 +1726,7 @@ describe('Routes', () => {
       })
 
       it('omits x-frame-options', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, 'OK', {
           'Content-Type': 'text/html',
@@ -1742,7 +1742,7 @@ describe('Routes', () => {
       })
 
       it('omits content-security-policy', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, 'OK', {
           'Content-Type': 'text/html',
@@ -1763,7 +1763,7 @@ describe('Routes', () => {
       })
 
       it('omits content-security-policy-report-only', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, 'OK', {
           'Content-Type': 'text/html',
@@ -1784,7 +1784,7 @@ describe('Routes', () => {
       })
 
       it('omits document-domain from Feature-Policy header', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, 'OK', {
           'Content-Type': 'text/html',
@@ -1809,7 +1809,7 @@ describe('Routes', () => {
       it('does not modify host origin header', function () {
         return this.setup('http://foobar.com')
         .then(() => {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/css')
           .matchHeader('host', 'foobar.com')
           .reply(200)
@@ -1827,7 +1827,7 @@ describe('Routes', () => {
       })
 
       it('does not cache when initial response', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/')
         .reply(200, 'hello from bar!', {
           'Content-Type': 'text/html',
@@ -1847,7 +1847,7 @@ describe('Routes', () => {
       })
 
       it('does cache requesting resource without injection', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/')
         .reply(200, 'hello from bar!', {
           'Content-Type': 'text/plain',
@@ -1863,7 +1863,7 @@ describe('Routes', () => {
       })
 
       it('forwards origin header', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo')
         .matchHeader('host', 'localhost:8080')
         .matchHeader('origin', 'http://localhost:8080')
@@ -1955,10 +1955,12 @@ describe('Routes', () => {
 
           const base64 = Buffer.from(`${username}:${password}`).toString('base64')
 
-          this.server._remoteAuth = {
-            username,
-            password,
-          }
+          this.server.remoteStates.set('http://localhost:8080', {
+            auth: {
+              username,
+              password,
+            },
+          })
 
           nock('http://localhost:8080')
           .get('/index')
@@ -1987,10 +1989,12 @@ describe('Routes', () => {
         it('does not modify existing auth headers when matching origin', function () {
           const existing = 'Basic asdf'
 
-          this.server._remoteAuth = {
-            username: 'u',
-            password: 'p',
-          }
+          this.server.remoteStates.set('http://localhost:8080', {
+            auth: {
+              username: 'u',
+              password: 'p',
+            },
+          })
 
           nock('http://localhost:8080')
           .get('/index')
@@ -2017,10 +2021,12 @@ describe('Routes', () => {
 
             const base64 = Buffer.from(`${username}:${password}`).toString('base64')
 
-            this.server._remoteAuth = {
-              username,
-              password,
-            }
+            this.server.remoteStates.set('http://beta.something.com', {
+              auth: {
+                username,
+                password,
+              },
+            })
 
             nock(/.*\.something.com/)
             .get('/index')
@@ -2057,7 +2063,7 @@ describe('Routes', () => {
           this.setup('http://localhost:8881'),
         ])
         .spread((size, bytes, setup) => {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/javascript-logo.png')
           .replyWithFile(200, image, {
             'Content-Type': 'image/png',
@@ -2089,7 +2095,7 @@ describe('Routes', () => {
           this.setup('http://localhost:8881'),
         ])
         .spread((size, bytes, setup) => {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/javascript-logo.png')
           .replyWithFile(200, zipped, {
             'Content-Type': 'image/png',
@@ -2128,7 +2134,7 @@ describe('Routes', () => {
           this.setup('http://localhost:8881'),
         ])
         .spread((size, bytes, setup) => {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/font.woff')
           .replyWithFile(200, font, {
             'Content-Type': 'application/font-woff; charset=utf-8',
@@ -2160,7 +2166,7 @@ describe('Routes', () => {
         // if this test finishes without timing out we know its all good
         const contents = removeWhitespace(Fixtures.get('server/err_response.html'))
 
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, contents, {
           'Content-Type': 'text/html; charset=utf-8',
@@ -2184,7 +2190,7 @@ describe('Routes', () => {
       })
 
       it('injects when head has attributes', async function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html> <head prefix="og: foo"> <meta name="foo" content="bar"> </head> <body>hello from bar!</body> </html>', {
           'Content-Type': 'text/html',
@@ -2205,7 +2211,7 @@ describe('Routes', () => {
       })
 
       it('injects even when head tag is missing', async function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html> <body>hello from bar!</body> </html>', {
           'Content-Type': 'text/html',
@@ -2227,7 +2233,7 @@ describe('Routes', () => {
       })
 
       it('injects when head is capitalized', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<HTML> <HEAD>hello from bar!</HEAD> </HTML>', {
           'Content-Type': 'text/html',
@@ -2247,7 +2253,7 @@ describe('Routes', () => {
       })
 
       it('injects when head missing but has <header>', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html> <body><nav>some nav</nav><header>header</header></body> </html>', {
           'Content-Type': 'text/html',
@@ -2269,7 +2275,7 @@ describe('Routes', () => {
       })
 
       it('injects when body is capitalized', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<HTML> <BODY>hello from bar!</BODY> </HTML>', {
           'Content-Type': 'text/html',
@@ -2289,7 +2295,7 @@ describe('Routes', () => {
       })
 
       it('injects when both head + body are missing', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<HTML>hello from bar!</HTML>', {
           'Content-Type': 'text/html',
@@ -2311,7 +2317,7 @@ describe('Routes', () => {
       })
 
       it('injects even when html + head + body are missing', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<div>hello from bar!</div>', {
           'Content-Type': 'text/html',
@@ -2333,7 +2339,7 @@ describe('Routes', () => {
       })
 
       it('injects after DOCTYPE declaration when no other content', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<!DOCTYPE>', {
           'Content-Type': 'text/html',
@@ -2353,7 +2359,7 @@ describe('Routes', () => {
       })
 
       it('injects superdomain even when head tag is missing', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html> <body>hello from bar!</body> </html>', {
           'Content-Type': 'text/html',
@@ -2374,14 +2380,14 @@ describe('Routes', () => {
       })
 
       it('injects content after following redirect', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(302, undefined, {
           // redirect us to google.com!
           'Location': 'http://www.google.com/foo',
         })
 
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/foo')
         .reply(200, '<html> <head prefix="og: foo"> <title>foo</title> </head> <body>hello from bar!</body> </html>', {
           'Content-Type': 'text/html',
@@ -2411,7 +2417,7 @@ describe('Routes', () => {
       it('injects performantly on a huge amount of elements over http', function () {
         Fixtures.scaffold()
 
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/elements.html')
         .replyWithFile(200, Fixtures.projectPath('e2e/elements.html'), {
           'Content-Type': 'text/html',
@@ -2453,7 +2459,7 @@ describe('Routes', () => {
       })
 
       it('does not inject when not initial and not html', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html><head></head></html>', {
           'Content-Type': 'text/plain',
@@ -2598,7 +2604,7 @@ describe('Routes', () => {
       })
 
       it('injects document.domain on other http requests', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/iframe')
         .reply(200, '<html><head></head></html>', {
           'Content-Type': 'text/html',
@@ -2643,8 +2649,36 @@ describe('Routes', () => {
         })
       })
 
+      it('injects document.domain on AUT iframe requests that do not match current superDomain', function () {
+        nock('http://www.foobar.com')
+        .get('/')
+        .reply(200, '<html><head></head><body>hi</body></html>', {
+          'Content-Type': 'text/html',
+        })
+
+        this.server._eventBus.on('cross:origin:delaying:html', () => {
+          this.server._eventBus.emit('cross:origin:release:html')
+        })
+
+        return this.rp({
+          url: 'http://www.foobar.com',
+          headers: {
+            'Cookie': '__cypress.initial=false',
+            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
+            'X-Cypress-Is-AUT-Frame': 'true',
+          },
+        })
+        .then((res) => {
+          expect(res.statusCode).to.eq(200)
+
+          const body = cleanResponseBody(res.body)
+
+          expect(body).to.include(`<html><head> <script type='text/javascript'> document.domain = 'foobar.com';`)
+        })
+      })
+
       it('does not inject document.domain on non http requests', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/json')
         .reply(200, {
           foo: '<html><head></head></html>',
@@ -2664,7 +2698,7 @@ describe('Routes', () => {
         })
       })
 
-      it('does not inject document.domain on http requests which do not match current superDomain', function () {
+      it('does not inject document.domain on http requests which do not match current superDomain and are not the AUT iframe', function () {
         nock('http://www.foobar.com')
         .get('/')
         .reply(200, '<html><head></head><body>hi</body></html>', {
@@ -2686,7 +2720,7 @@ describe('Routes', () => {
       })
 
       it('does not inject anything when not text/html response content-type even when __cypress.initial=true', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/json')
         .reply(200, { foo: 'bar' })
 
@@ -2707,7 +2741,7 @@ describe('Routes', () => {
       })
 
       it('does not inject into x-requested-with request headers', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/iframe')
         .reply(200, '<html><head></head></html>', {
           'Content-Type': 'text/html',
@@ -2732,7 +2766,7 @@ describe('Routes', () => {
 
       return ['text/html', 'application/xhtml+xml', 'text/plain, application/xhtml+xml', '', null].forEach((type) => {
         it(`does not inject unless both text/html and application/xhtml+xml is requested: tried to accept: ${type}`, function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/iframe')
           .reply(200, '<html><head></head></html>', {
             'Content-Type': 'text/html',
@@ -2768,7 +2802,7 @@ describe('Routes', () => {
         it('replaces obstructive code in HTML files', function () {
           const html = '<html><body><script>if (top !== self) { }</script></body></html>'
 
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/index.html')
           .reply(200, html, {
             'Content-Type': 'text/html',
@@ -2790,7 +2824,7 @@ describe('Routes', () => {
         })
 
         it('replaces obstructive code in JS files', function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/app.js')
           .reply(200, 'if (top !== self) { }', {
             'Content-Type': 'application/javascript',
@@ -2813,7 +2847,7 @@ describe('Routes', () => {
 
           return zlib.gzipAsync(response)
           .then((resp) => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/index.html')
             .reply(200, resp, {
               'Content-Type': 'text/html',
@@ -2841,7 +2875,7 @@ describe('Routes', () => {
 
           return zlib.gzipAsync(response)
           .then((resp) => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/index.js')
             .reply(200, resp, {
               'Content-Type': 'application/javascript',
@@ -2867,7 +2901,7 @@ describe('Routes', () => {
 
           return zlib.gzipAsync(response)
           .then((resp) => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/app.js')
             // remove the last 8 characters which
             // truncates the CRC checksum and size check
@@ -2894,7 +2928,7 @@ describe('Routes', () => {
 
           return zlib.gzipAsync(response)
           .then((resp) => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/index.html')
             // remove the last 8 characters which
             // truncates the CRC checksum and size check
@@ -2920,7 +2954,7 @@ describe('Routes', () => {
         })
 
         it('ECONNRESETs bad gzip responses when not injecting', function (done) {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/app.js')
           .delayBody(100)
           .replyWithFile(200, Fixtures.path('server/gzip-bad.html.gz'), {
@@ -2940,7 +2974,7 @@ describe('Routes', () => {
         })
 
         it('ECONNRESETs bad gzip responses when injecting', function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/index.html')
           .replyWithFile(200, Fixtures.path('server/gzip-bad.html.gz'), {
             'Content-Type': 'text/html',
@@ -2964,7 +2998,7 @@ describe('Routes', () => {
         it('does not die rewriting a huge JS file', function () {
           return getHugeJsFile()
           .then((hugeJsFile) => {
-            nock(this.server._remoteOrigin)
+            nock(this.server.remoteStates.current().origin)
             .get('/app.js')
             .reply(200, hugeJsFile, {
               'Content-Type': 'application/javascript',
@@ -2997,7 +3031,7 @@ describe('Routes', () => {
         it('can turn off security rewriting for HTML', function () {
           const html = '<html><body><script>if (top !== self) { }</script></body></html>'
 
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/index.html')
           .reply(200, html, {
             'Content-Type': 'text/html',
@@ -3019,7 +3053,7 @@ describe('Routes', () => {
         })
 
         it('does not replaces obstructive code in JS files', function () {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/app.js')
           .reply(200, 'if (top !== self) { }', {
             'Content-Type': 'application/javascript',
@@ -3043,7 +3077,7 @@ describe('Routes', () => {
       })
 
       it('does not rewrite html when initial', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html><body><a href=\'http://www.google.com\'>google</a></body></html>', {
           'Content-Type': 'text/html',
@@ -3068,7 +3102,7 @@ describe('Routes', () => {
       })
 
       it('does not rewrite html when not initial', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/bar')
         .reply(200, '<html><body><a href=\'http://www.google.com\'>google</a></body></html>', {
           'Content-Type': 'text/html',
@@ -3278,7 +3312,7 @@ describe('Routes', () => {
       beforeEach(function () {
         return this.setup('http://getbootstrap.com')
         .then(() => {
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/components')
           .reply(200, 'content page', {
             'Content-Type': 'text/html',
@@ -3292,7 +3326,7 @@ describe('Routes', () => {
       })
 
       it('proxies http requests', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/assets/css/application.css')
         .reply(200, 'html { color: #333 }', {
           'Content-Type': 'text/css',
@@ -3313,7 +3347,7 @@ describe('Routes', () => {
         .then(() => {
           // make an initial request to set the
           // session proxy!
-          nock(this.server._remoteOrigin)
+          nock(this.server.remoteStates.current().origin)
           .get('/css')
           .reply(200, 'css content page', {
             'Content-Type': 'text/html',
@@ -3327,7 +3361,7 @@ describe('Routes', () => {
       })
 
       it('proxies to the remote session', function () {
-        nock(this.server._remoteOrigin)
+        nock(this.server.remoteStates.current().origin)
         .get('/assets/css/application.css')
         .reply(200, 'html { color: #333 }', {
           'Content-Type': 'text/css',
@@ -3643,7 +3677,7 @@ describe('Routes', () => {
     })
 
     it('processes POST + redirect on remote proxy', function () {
-      nock(this.server._remoteOrigin)
+      nock(this.server.remoteStates.current().origin)
       .post('/login', {
         username: 'brian@cypress.io',
         password: 'foobar',
@@ -3673,7 +3707,7 @@ describe('Routes', () => {
     // this happens on a real form submit because beforeunload fires
     // and initial=true gets set
     it('processes POST + redirect on remote initial', function () {
-      nock(this.server._remoteOrigin)
+      nock(this.server.remoteStates.current().origin)
       .post('/login', {
         username: 'brian@cypress.io',
         password: 'foobar',
@@ -3702,7 +3736,7 @@ describe('Routes', () => {
     })
 
     it('does not alter request headers', function () {
-      nock(this.server._remoteOrigin)
+      nock(this.server.remoteStates.current().origin)
       .matchHeader('x-csrf-token', 'abc-123')
       .post('/login', {
         username: 'brian@cypress.io',
@@ -3729,7 +3763,7 @@ describe('Routes', () => {
     })
 
     it('does not fail on a big cookie', function () {
-      nock(this.server._remoteOrigin)
+      nock(this.server.remoteStates.current().origin)
       .post('/login')
       .reply(200)
 
@@ -3750,7 +3784,7 @@ describe('Routes', () => {
     })
 
     it('hands back 201 status codes', function () {
-      nock(this.server._remoteOrigin)
+      nock(this.server.remoteStates.current().origin)
       .post('/companies/validate', {
         payload: { name: 'Brian' },
       })
diff --git a/packages/server/test/integration/server_spec.js b/packages/server/test/integration/server_spec.js
index 2bc50372d416..10b29cefbeca 100644
--- a/packages/server/test/integration/server_spec.js
+++ b/packages/server/test/integration/server_spec.js
@@ -87,6 +87,7 @@ describe('Server', () => {
               SocketCtor: SocketE2E,
               createRoutes,
               testingType: 'e2e',
+              getCurrentBrowser: () => null,
             })
             .spread(async (port) => {
               const automationStub = {
@@ -95,7 +96,7 @@ describe('Server', () => {
 
               await this.server.startWebsockets(automationStub, config, {})
               if (initialUrl) {
-                this.server._onDomainSet(initialUrl)
+                this.server.remoteStates.set(initialUrl)
               }
 
               this.srv = this.server.getHttpServer()
@@ -143,6 +144,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/index.html',
@@ -174,6 +176,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: false,
             contentType: 'application/json',
             url: 'http://localhost:2000/assets/foo.json',
@@ -194,6 +197,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/index.html',
@@ -211,6 +215,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://localhost:2000/index.html',
@@ -242,6 +247,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/sub/',
@@ -257,11 +263,10 @@ describe('Server', () => {
           .then((res) => {
             expect(res.statusCode).to.eq(200)
 
-            expect(this.server._getRemoteState()).to.deep.eq({
+            expect(this.server.remoteStates.current()).to.deep.eq({
               auth: undefined,
               origin: 'http://localhost:2000',
               strategy: 'file',
-              visiting: false,
               domainName: 'localhost',
               fileServer: this.fileServer,
               props: null,
@@ -275,6 +280,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: false,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/does-not-exist',
@@ -302,6 +308,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/index.html',
@@ -384,6 +391,7 @@ describe('Server', () => {
             }).then((obj) => {
               expectToEqDetails(obj, {
                 isOkStatusCode: true,
+                isPrimaryOrigin: true,
                 isHtml: true,
                 contentType: 'text/html',
                 url: `http://localhost:${this.httpPort}/${path}/100`,
@@ -430,6 +438,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://getbootstrap.com/',
@@ -464,6 +473,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: false,
             isHtml: false,
             contentType: 'application/json',
             url: 'http://getbootstrap.com/user.json',
@@ -508,6 +518,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: undefined,
             url: 'http://example.com/',
@@ -529,6 +540,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: false,
             isHtml: false,
             contentType: undefined,
             url: 'http://example.com/',
@@ -562,6 +574,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://espn.go.com/',
@@ -583,11 +596,10 @@ describe('Server', () => {
             expect(res.body).to.include('.action("app:window:before:load",window)')
             expect(res.body).to.include('</head>content</html>')
 
-            expect(this.server._getRemoteState()).to.deep.eq({
+            expect(this.server.remoteStates.current()).to.deep.eq({
               auth: undefined,
               origin: 'http://espn.go.com',
               strategy: 'http',
-              visiting: false,
               domainName: 'go.com',
               fileServer: null,
               props: {
@@ -626,6 +638,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://espn.go.com/',
@@ -645,6 +658,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://espn.go.com/',
@@ -699,6 +713,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           expectToEqDetails(obj, {
             isOkStatusCode: false,
+            isPrimaryOrigin: false,
             isHtml: false,
             contentType: undefined,
             url: 'http://espn.com/',
@@ -713,6 +728,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://espn.go.com/',
@@ -748,6 +764,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: false,
+            isPrimaryOrigin: false,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://mlb.mlb.com/',
@@ -781,6 +798,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://getbootstrap.com/',
@@ -821,6 +839,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://google.com/foo',
@@ -877,6 +896,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://google.com/index',
@@ -892,11 +912,10 @@ describe('Server', () => {
             expect(res.statusCode).to.eq(200)
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth,
             origin: 'http://google.com',
             strategy: 'http',
-            visiting: false,
             domainName: 'google.com',
             fileServer: null,
             props: {
@@ -907,6 +926,244 @@ describe('Server', () => {
           })
         })
       })
+
+      context('cross-origin', () => {
+        it('adds a remote state and buffers the response when the request is from within cy.origin and the origins match', function () {
+          nock('http://www.cypress.io/')
+          .get('/')
+          .reply(200, '<html>content</html>', {
+            'Content-Type': 'text/html',
+          })
+
+          expect(this.server.remoteStates.current()).to.deep.eq({
+            auth: undefined,
+            props: null,
+            origin: 'http://localhost:2000',
+            strategy: 'file',
+            domainName: 'localhost',
+            fileServer: this.fileServer,
+          })
+
+          this.server.socket.localBus.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+          expect(this.server.remoteStates.current()).to.deep.eq({
+            auth: undefined,
+            props: {
+              domain: 'cypress',
+              port: '80',
+              tld: 'io',
+            },
+            origin: 'http://cypress.io',
+            strategy: 'http',
+            domainName: 'cypress.io',
+            fileServer: null,
+          })
+
+          expect(this.server.remoteStates.isSecondaryOrigin('http://cypress.io')).to.be.true
+
+          return this.server._onResolveUrl('http://www.cypress.io/', {}, this.automationRequest, { isCrossOrigin: true })
+          .then((obj = {}) => {
+            expectToEqDetails(obj, {
+              isOkStatusCode: true,
+              isPrimaryOrigin: false,
+              isHtml: true,
+              contentType: 'text/html',
+              url: 'http://www.cypress.io/',
+              originalUrl: 'http://www.cypress.io/',
+              status: 200,
+              statusText: 'OK',
+              cookies: [],
+              redirects: [],
+            })
+
+            // Verify the cross origin request was buffered
+            const buffer = this.buffers.take('http://www.cypress.io/')
+
+            expect(buffer).to.not.be.empty
+            expect(buffer.isCrossOrigin).to.be.true
+
+            // Verify the secondary remote state is returned
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: undefined,
+              props: {
+                domain: 'cypress',
+                port: '80',
+                tld: 'io',
+              },
+              origin: 'http://www.cypress.io',
+              strategy: 'http',
+              domainName: 'cypress.io',
+              fileServer: null,
+            })
+
+            this.server.socket.localBus.emit('cross:origin:finished', 'http://cypress.io')
+
+            expect(this.server.remoteStates.isSecondaryOrigin('http://cypress.io')).to.be.false
+
+            // Verify the primary remote state is now returned
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: undefined,
+              props: null,
+              origin: 'http://localhost:2000',
+              strategy: 'file',
+              domainName: 'localhost',
+              fileServer: this.fileServer,
+            })
+          })
+        })
+
+        it('adds a remote state and buffers the response when a url has already been visited and the origins match', function () {
+          nock('http://localhost:3500/')
+          .get('/')
+          .reply(200, '<html>content</html>', {
+            'Content-Type': 'text/html',
+          })
+
+          // this will be the current origin
+          this.server.remoteStates.set('http://localhost:3500/')
+
+          return this.server._onResolveUrl('http://localhost:3500/', {}, this.automationRequest, { hasAlreadyVisitedUrl: true })
+          .then((obj = {}) => {
+            // Verify the cross origin request was buffered
+            const buffer = this.buffers.take('http://localhost:3500/')
+
+            expect(buffer).to.not.be.empty
+
+            // Verify the secondary remote state is returned
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: undefined,
+              props: {
+                domain: '',
+                port: '3500',
+                tld: 'localhost',
+              },
+              origin: 'http://localhost:3500',
+              strategy: 'http',
+              domainName: 'localhost',
+              fileServer: null,
+            })
+          })
+        })
+
+        it('doesn\'t set a remote state or buffer the response when a url has already been visited and the origins don\'t match', function () {
+          nock('http://localhost:3500/')
+          .get('/')
+          .reply(200, '<html>content</html>', {
+            'Content-Type': 'text/html',
+          })
+
+          this.server.remoteStates.set('http://localhost:3500/')
+
+          // this will be the current origin
+          this.server.socket.localBus.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+          return this.server._onResolveUrl('http://localhost:3500/', {}, this.automationRequest, { hasAlreadyVisitedUrl: true })
+          .then(() => {
+            // Verify the remote state was not updated
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: undefined,
+              props: {
+                domain: 'cypress',
+                port: '80',
+                tld: 'io',
+              },
+              origin: 'http://cypress.io',
+              strategy: 'http',
+              domainName: 'cypress.io',
+              fileServer: null,
+            })
+
+            // Verify the cross origin request was not buffered
+            const buffer = this.buffers.take('http://localhost:3500/')
+
+            expect(buffer).to.be.empty
+          })
+        })
+
+        it('doesn\'t set a remote state or buffer the response when the request is from within cy.origin and the origins don\'t match', function () {
+          nock('http://localhost:3500/')
+          .get('/')
+          .reply(200, '<html>content</html>', {
+            'Content-Type': 'text/html',
+          })
+
+          this.server.remoteStates.set('http://localhost:3500/')
+
+          // this will be the current origin
+          this.server.socket.localBus.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+          return this.server._onResolveUrl('http://localhost:3500/', {}, this.automationRequest, { isCrossOrigin: true })
+          .then(() => {
+            // Verify the remote state was not updated
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: undefined,
+              props: {
+                domain: 'cypress',
+                port: '80',
+                tld: 'io',
+              },
+              origin: 'http://cypress.io',
+              strategy: 'http',
+              domainName: 'cypress.io',
+              fileServer: null,
+            })
+
+            // Verify the cross origin request was not buffered
+            const buffer = this.buffers.take('http://localhost:3500/')
+
+            expect(buffer).to.be.empty
+          })
+        })
+
+        it('doesn\'t override existing remote state on cross:origin:bridge:ready', function () {
+          nock('http://www.cypress.io/')
+          .get('/')
+          .reply(200, '<html>content</html>', {
+            'Content-Type': 'text/html',
+          })
+
+          this.server.socket.localBus.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+          return this.server._onResolveUrl('http://www.cypress.io/', {}, this.automationRequest, { isCrossOrigin: true, auth: { username: 'u', password: 'p' } })
+          .then(() => {
+            // Verify the secondary remote state is returned
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: {
+                username: 'u',
+                password: 'p',
+              },
+              props: {
+                domain: 'cypress',
+                port: '80',
+                tld: 'io',
+              },
+              origin: 'http://www.cypress.io',
+              strategy: 'http',
+              domainName: 'cypress.io',
+              fileServer: null,
+            })
+
+            this.server.socket.localBus.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+            // Verify the existing secondary remote state is not overridden
+            expect(this.server.remoteStates.current()).to.deep.eq({
+              auth: {
+                username: 'u',
+                password: 'p',
+              },
+              props: {
+                domain: 'cypress',
+                port: '80',
+                tld: 'io',
+              },
+              origin: 'http://www.cypress.io',
+              strategy: 'http',
+              domainName: 'cypress.io',
+              fileServer: null,
+            })
+          })
+        })
+      })
     })
 
     describe('both', () => {
@@ -934,6 +1191,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://localhost:2000/index.html',
@@ -954,6 +1212,7 @@ describe('Server', () => {
         }).then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://www.google.com/',
@@ -969,11 +1228,10 @@ describe('Server', () => {
             expect(res.statusCode).to.eq(200)
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://www.google.com',
             strategy: 'http',
-            visiting: false,
             domainName: 'google.com',
             fileServer: null,
             props: {
@@ -987,6 +1245,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://localhost:2000/index.html',
@@ -1004,11 +1263,10 @@ describe('Server', () => {
             expect(res.statusCode).to.eq(200)
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://localhost:2000',
             strategy: 'file',
-            visiting: false,
             domainName: 'localhost',
             fileServer: this.fileServer,
             props: null,
@@ -1031,6 +1289,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'http://www.google.com/',
@@ -1051,11 +1310,10 @@ describe('Server', () => {
             expect(res.body).to.include('</script></head><body>google</body></html>')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://www.google.com',
             strategy: 'http',
-            visiting: false,
             domainName: 'google.com',
             fileServer: null,
             props: {
@@ -1069,6 +1327,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://localhost:2000/index.html',
@@ -1090,11 +1349,10 @@ describe('Server', () => {
             expect(res.body).to.include('.action("app:window:before:load",window)')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://localhost:2000',
             strategy: 'file',
-            visiting: false,
             domainName: 'localhost',
             fileServer: this.fileServer,
             props: null,
@@ -1104,6 +1362,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://www.google.com/',
@@ -1124,11 +1383,10 @@ describe('Server', () => {
               expect(res.body).to.include('</script></head><body>google</body></html>')
             })
           }).then(() => {
-            expect(this.server._getRemoteState()).to.deep.eq({
+            expect(this.server.remoteStates.current()).to.deep.eq({
               auth: undefined,
               origin: 'http://www.google.com',
               strategy: 'http',
-              visiting: false,
               domainName: 'google.com',
               fileServer: null,
               props: {
@@ -1148,6 +1406,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: 'https://www.foobar.com:8443/',
@@ -1168,11 +1427,10 @@ describe('Server', () => {
             expect(res.body).to.include('</script></head><body>https server</body></html>')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'https://www.foobar.com:8443',
             strategy: 'http',
-            visiting: false,
             domainName: 'foobar.com',
             fileServer: null,
             props: {
@@ -1186,6 +1444,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://localhost:2000/index.html',
@@ -1207,11 +1466,10 @@ describe('Server', () => {
             expect(res.body).to.include('.action("app:window:before:load",window)')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://localhost:2000',
             strategy: 'file',
-            visiting: false,
             domainName: 'localhost',
             fileServer: this.fileServer,
             props: null,
@@ -1221,6 +1479,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'https://www.foobar.com:8443/',
@@ -1241,11 +1500,10 @@ describe('Server', () => {
               expect(res.body).to.include('</script></head><body>https server</body></html>')
             })
           }).then(() => {
-            expect(this.server._getRemoteState()).to.deep.eq({
+            expect(this.server.remoteStates.current()).to.deep.eq({
               auth: undefined,
               origin: 'https://www.foobar.com:8443',
               strategy: 'http',
-              visiting: false,
               fileServer: null,
               domainName: 'foobar.com',
               props: {
@@ -1265,6 +1523,7 @@ describe('Server', () => {
         .then((obj = {}) => {
           return expectToEqDetails(obj, {
             isOkStatusCode: true,
+            isPrimaryOrigin: true,
             isHtml: true,
             contentType: 'text/html',
             url: s3StaticHtmlUrl,
@@ -1293,11 +1552,10 @@ describe('Server', () => {
             expect(res.body).to.include('Cypress')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'https://s3.amazonaws.com',
             strategy: 'http',
-            visiting: false,
             domainName: 's3.amazonaws.com',
             fileServer: null,
             props: {
@@ -1311,6 +1569,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: 'http://localhost:2000/index.html',
@@ -1332,11 +1591,10 @@ describe('Server', () => {
             expect(res.body).to.include('.action("app:window:before:load",window)')
           })
         }).then(() => {
-          expect(this.server._getRemoteState()).to.deep.eq({
+          expect(this.server.remoteStates.current()).to.deep.eq({
             auth: undefined,
             origin: 'http://localhost:2000',
             strategy: 'file',
-            visiting: false,
             domainName: 'localhost',
             fileServer: this.fileServer,
             props: null,
@@ -1346,6 +1604,7 @@ describe('Server', () => {
           .then((obj = {}) => {
             return expectToEqDetails(obj, {
               isOkStatusCode: true,
+              isPrimaryOrigin: true,
               isHtml: true,
               contentType: 'text/html',
               url: s3StaticHtmlUrl,
@@ -1372,11 +1631,10 @@ describe('Server', () => {
               expect(res.body).to.include('Cypress')
             })
           }).then(() => {
-            expect(this.server._getRemoteState()).to.deep.eq({
+            expect(this.server.remoteStates.current()).to.deep.eq({
               auth: undefined,
               origin: 'https://s3.amazonaws.com',
               strategy: 'http',
-              visiting: false,
               fileServer: null,
               domainName: 's3.amazonaws.com',
               props: {
diff --git a/packages/server/test/integration/websockets_spec.js b/packages/server/test/integration/websockets_spec.js
index 61afcc092302..358b709677db 100644
--- a/packages/server/test/integration/websockets_spec.js
+++ b/packages/server/test/integration/websockets_spec.js
@@ -44,6 +44,7 @@ describe('Web Sockets', () => {
         SocketCtor: SocketE2E,
         createRoutes,
         testingType: 'e2e',
+        getCurrentBrowser: () => null,
       })
       .then(async () => {
         const automationStub = {
@@ -77,7 +78,7 @@ describe('Web Sockets', () => {
     it('sends back ECONNRESET when error upgrading', function (done) {
       const agent = new httpsProxyAgent(`http://localhost:${cyPort}`)
 
-      this.server._onDomainSet(`http://localhost:${otherPort}`)
+      this.server.remoteStates.set(`http://localhost:${otherPort}`)
 
       const client = new ws(`ws://localhost:${otherPort}`, {
         agent,
@@ -121,7 +122,7 @@ describe('Web Sockets', () => {
       // force node into legit proxy mode like a browser
       const agent = new httpsProxyAgent(`http://localhost:${cyPort}`)
 
-      this.server._onDomainSet(`http://localhost:${wsPort}`)
+      this.server.remoteStates.set(`http://localhost:${wsPort}`)
 
       this.ws.on('connection', (c) => {
         return c.on('message', (msg) => {
@@ -152,7 +153,7 @@ describe('Web Sockets', () => {
         rejectUnauthorized: false,
       })
 
-      this.server._onDomainSet(`https://localhost:${wssPort}`)
+      this.server.remoteStates.set(`https://localhost:${wssPort}`)
 
       this.wss.on('connection', (c) => {
         return c.on('message', (msg) => {
@@ -192,7 +193,7 @@ describe('Web Sockets', () => {
         rejectUnauthorized: false,
       })
 
-      this.server._onDomainSet(`https://foobar.com:${wssPort}`)
+      this.server.remoteStates.set(`https://foobar.com:${wssPort}`)
 
       this.wss.on('connection', (c) => {
         return c.on('message', (msg) => {
@@ -309,13 +310,13 @@ describe('Web Sockets', () => {
 
     context('when http superDomain has been set', () => {
       return testSocketIo(`http://localhost:${otherPort}`, function () {
-        return this.server._onDomainSet(`http://localhost:${otherPort}`)
+        return this.server.remoteStates.set(`http://localhost:${otherPort}`)
       })
     })
 
     context('when https superDomain has been set', () => {
       return testSocketIo(`http://localhost:${wssPort}`, function () {
-        return this.server._onDomainSet(`http://localhost:${wssPort}`)
+        return this.server.remoteStates.set(`http://localhost:${wssPort}`)
       })
     })
   })
diff --git a/packages/server/test/performance/proxy_performance_spec.js b/packages/server/test/performance/proxy_performance_spec.js
index ab9a65656853..9e9ba7b4671b 100644
--- a/packages/server/test/performance/proxy_performance_spec.js
+++ b/packages/server/test/performance/proxy_performance_spec.js
@@ -223,9 +223,9 @@ const runBrowserTest = (urlUnderTest, testCase) => {
   }
 
   if (testCase.cyIntercept) {
-    cyServer._onDomainSet(urlUnderTest)
+    cyServer.remoteStates.set(urlUnderTest)
   } else {
-    cyServer._onDomainSet('<root>')
+    cyServer.remoteStates.set('<root>')
   }
 
   let cmd = CHROME_PATH
@@ -363,6 +363,7 @@ describe('Proxy Performance', function () {
             SocketCtor: SocketE2E,
             createRoutes,
             testingType: 'e2e',
+            getCurrentBrowser: () => null,
           })
         }),
       )
diff --git a/packages/server/test/support/fixtures/server/absolute_url_expected.html b/packages/server/test/support/fixtures/server/absolute_url_expected.html
index 2a47de7764e0..7a99ca2f34b5 100644
--- a/packages/server/test/support/fixtures/server/absolute_url_expected.html
+++ b/packages/server/test/support/fixtures/server/absolute_url_expected.html
@@ -6,7 +6,7 @@
       var Cypress = window.Cypress = parent.Cypress;
 
       if (!Cypress) {
-        throw new Error('Something went terribly wrong and we cannot proceed. We expected to find the global Cypress in the parent window but it is missing!. This should never happen and likely is a bug. Please open an issue!');
+        throw new Error('Something went terribly wrong and we cannot proceed. We expected to find the global Cypress in the parent window but it is missing. This should never happen and likely is a bug. Please open an issue.');
       };
 
       window.onerror = function(){
diff --git a/packages/server/test/support/watch b/packages/server/test/support/watch
deleted file mode 100755
index f759dbc758f6..000000000000
--- a/packages/server/test/support/watch
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/usr/bin/env bash
-
-CMD="$1"
-ARGS="$2"
-
-npm run --silent $CMD $ARGS & \
-chokidar 'test/**/*' 'lib/**/*' \
--c "yarn --silent $CMD $ARGS" \
---polling \
---poll-interval=250
diff --git a/packages/server/test/unit/browsers/cdp_automation_spec.ts b/packages/server/test/unit/browsers/cdp_automation_spec.ts
index 8de87aa0bfc6..f175a4090887 100644
--- a/packages/server/test/unit/browsers/cdp_automation_spec.ts
+++ b/packages/server/test/unit/browsers/cdp_automation_spec.ts
@@ -72,7 +72,7 @@ context('lib/browsers/cdp_automation', () => {
       this.onFn = sinon.stub()
       this.sendCloseTargetCommand = sinon.stub()
 
-      this.automation = await CdpAutomation.create(this.sendDebuggerCommand, this.onFn, this.sendCloseTargetCommand, null)
+      this.automation = await CdpAutomation.create(this.sendDebuggerCommand, this.onFn, this.sendCloseTargetCommand, null, false)
 
       this.sendDebuggerCommand
       .throws(new Error('not stubbed'))
diff --git a/packages/server/test/unit/browsers/chrome_spec.js b/packages/server/test/unit/browsers/chrome_spec.js
index 8b19b56e8c64..7247a318dcb2 100644
--- a/packages/server/test/unit/browsers/chrome_spec.js
+++ b/packages/server/test/unit/browsers/chrome_spec.js
@@ -368,6 +368,127 @@ describe('lib/browsers/chrome', () => {
         })
       })
     })
+
+    describe('adding header to AUT iframe request', function () {
+      const withExperimentalFlagOn = {
+        experimentalSessionAndOrigin: true,
+      }
+
+      beforeEach(function () {
+        const frameTree = {
+          frameTree: {
+            childFrames: [
+              {
+                frame: {
+                  id: 'aut-frame-id',
+                  name: 'Your App: "FakeBlock"',
+                },
+              },
+              {
+                frame: {
+                  id: 'spec-frame-id',
+                  name: 'Your Spec: "spec.js"',
+                },
+              },
+            ],
+          },
+        }
+
+        this.pageCriClient.send.withArgs('Page.getFrameTree').resolves(frameTree)
+      })
+
+      it('does not listen to Fetch.requestPaused if experimental flag is off', async function () {
+        await chrome.open('chrome', 'http://', { experimentalSessionAndOrigin: false }, this.automation)
+
+        expect(this.pageCriClient.on).not.to.be.calledWith('Fetch.requestPaused')
+      })
+
+      it('sends Fetch.enable', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        expect(this.pageCriClient.send).to.have.been.calledWith('Fetch.enable')
+      })
+
+      it('does not add header when not a document', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        this.pageCriClient.on.withArgs('Fetch.requestPaused').yield({
+          requestId: '1234',
+          resourceType: 'Script',
+        })
+
+        expect(this.pageCriClient.send).to.be.calledWith('Fetch.continueRequest', {
+          requestId: '1234',
+        })
+      })
+
+      it('does not add header when it is a spec frame request', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        this.pageCriClient.on.withArgs('Page.frameAttached').yield()
+
+        await this.pageCriClient.on.withArgs('Fetch.requestPaused').args[0][1]({
+          frameId: 'spec-frame-id',
+          requestId: '1234',
+          resourceType: 'Document',
+          request: {
+            url: '/__cypress/integration/spec.js',
+          },
+        })
+
+        expect(this.pageCriClient.send).to.be.calledWith('Fetch.continueRequest', {
+          requestId: '1234',
+        })
+      })
+
+      it('appends X-Cypress-Is-AUT-Frame header to AUT iframe request', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        this.pageCriClient.on.withArgs('Page.frameAttached').yield()
+
+        await this.pageCriClient.on.withArgs('Fetch.requestPaused').args[0][1]({
+          frameId: 'aut-frame-id',
+          requestId: '1234',
+          resourceType: 'Document',
+          request: {
+            url: 'http://localhost:3000/index.html',
+            headers: {
+              'X-Foo': 'Bar',
+            },
+          },
+        })
+
+        expect(this.pageCriClient.send).to.be.calledWith('Fetch.continueRequest', {
+          requestId: '1234',
+          headers: [
+            {
+              name: 'X-Foo',
+              value: 'Bar',
+            },
+            {
+              name: 'X-Cypress-Is-AUT-Frame',
+              value: 'true',
+            },
+          ],
+        })
+      })
+
+      it('gets frame tree on Page.frameAttached', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        this.pageCriClient.on.withArgs('Page.frameAttached').yield()
+
+        expect(this.pageCriClient.send).to.be.calledWith('Page.getFrameTree')
+      })
+
+      it('gets frame tree on Page.frameDetached', async function () {
+        await chrome.open('chrome', 'http://', withExperimentalFlagOn, this.automation)
+
+        this.pageCriClient.on.withArgs('Page.frameDetached').yield()
+
+        expect(this.pageCriClient.send).to.be.calledWith('Page.getFrameTree')
+      })
+    })
   })
 
   context('#connectToNewSpec', () => {
diff --git a/packages/server/test/unit/browsers/cri-client_spec.ts b/packages/server/test/unit/browsers/cri-client_spec.ts
index 619015ed27db..1007ea2c6528 100644
--- a/packages/server/test/unit/browsers/cri-client_spec.ts
+++ b/packages/server/test/unit/browsers/cri-client_spec.ts
@@ -45,7 +45,12 @@ describe('lib/browsers/cri-client', function () {
       'chrome-remote-interface': criImport,
     })
 
-    getClient = () => criClient.create(DEBUGGER_URL, onError)
+    getClient = () => {
+      return criClient.create({
+        target: DEBUGGER_URL,
+        onError,
+      })
+    }
   })
 
   context('.create', function () {
diff --git a/packages/server/test/unit/browsers/electron_spec.js b/packages/server/test/unit/browsers/electron_spec.js
index b54937a37585..f7c8a38a38ad 100644
--- a/packages/server/test/unit/browsers/electron_spec.js
+++ b/packages/server/test/unit/browsers/electron_spec.js
@@ -45,6 +45,9 @@ describe('lib/browsers/electron', () => {
             remove: sinon.stub(),
           },
           on: sinon.stub(),
+          webRequest: {
+            onBeforeSendHeaders () {},
+          },
         },
         getOSProcessId: sinon.stub().returns(ELECTRON_PID),
         'debugger': {
@@ -320,6 +323,153 @@ describe('lib/browsers/electron', () => {
         expect(this.win.destroy).to.be.called
       })
     })
+
+    it('does not listen to `onBeforeSendHeaders` if experimental flag is off', function () {
+      this.options.experimentalSessionAndOrigin = false
+      sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+      return electron._launch(this.win, this.url, this.automation, this.options)
+      .then(() => {
+        expect(this.win.webContents.session.webRequest.onBeforeSendHeaders).not.to.be.called
+      })
+    })
+
+    describe('adding header aut iframe requests', function () {
+      beforeEach(function () {
+        this.options.experimentalSessionAndOrigin = true
+      })
+
+      it('does not add header if not a sub frame', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'stylesheet',
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledOnce
+          expect(cb).to.be.calledWith({})
+        })
+      })
+
+      it('does not add header if it is the top frame', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'subFrame',
+            frame: {
+              parent: null,
+            },
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledOnce
+          expect(cb).to.be.calledWith({})
+        })
+      })
+
+      it('does not add header if it is a nested frame', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'subFrame',
+            frame: {
+              parent: {
+                parent: {
+                  parent: null,
+                },
+              },
+            },
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledOnce
+          expect(cb).to.be.calledWith({})
+        })
+      })
+
+      it('does not add header if it is a spec frame request', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'subFrame',
+            frame: {
+              parent: {
+                parent: null,
+              },
+            },
+            url: '/__cypress/integration/spec.js',
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledWith({})
+        })
+      })
+
+      it('does not add header if frame is not available', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'subFrame',
+            url: 'http://localhost:3000/index.html',
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledWith({})
+        })
+      })
+
+      it('adds X-Cypress-Is-AUT-Frame header to AUT iframe request', function () {
+        sinon.stub(this.win.webContents.session.webRequest, 'onBeforeSendHeaders')
+
+        return electron._launch(this.win, this.url, this.automation, this.options)
+        .then(() => {
+          const details = {
+            resourceType: 'subFrame',
+            frame: {
+              parent: {
+                parent: null,
+              },
+            },
+            url: 'http://localhost:3000/index.html',
+            requestHeaders: {
+              'X-Foo': 'Bar',
+            },
+          }
+          const cb = sinon.stub()
+
+          this.win.webContents.session.webRequest.onBeforeSendHeaders.lastCall.args[0](details, cb)
+
+          expect(cb).to.be.calledOnce
+          expect(cb).to.be.calledWith({
+            requestHeaders: {
+              'X-Foo': 'Bar',
+              'X-Cypress-Is-AUT-Frame': 'true',
+            },
+          })
+        })
+      })
+    })
   })
 
   context('._render', () => {
diff --git a/packages/server/test/unit/config_spec.js b/packages/server/test/unit/config_spec.js
index 7b29afa48b8c..60b013fe54e3 100644
--- a/packages/server/test/unit/config_spec.js
+++ b/packages/server/test/unit/config_spec.js
@@ -1403,6 +1403,16 @@ describe('lib/config', () => {
       expect(warning).to.be.calledWith('EXPERIMENTAL_SAMESITE_REMOVED')
     })
 
+    it('warns if experimentalSessionSupport is passed', async function () {
+      const warning = sinon.spy(errors, 'warning')
+
+      await this.defaults('experimentalSessionSupport', true, {
+        experimentalSessionSupport: true,
+      })
+
+      expect(warning).to.be.calledWith('EXPERIMENTAL_SESSION_SUPPORT_REMOVED')
+    })
+
     it('warns if experimentalShadowDomSupport is passed', async function () {
       const warning = sinon.spy(errors, 'warning')
 
@@ -1484,8 +1494,8 @@ describe('lib/config', () => {
             execTimeout: { value: 60000, from: 'default' },
             experimentalFetchPolyfill: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
+            experimentalSessionAndOrigin: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
-            experimentalSessionSupport: { value: false, from: 'default' },
             experimentalStudio: { value: false, from: 'default' },
             fileServerFolder: { value: '', from: 'default' },
             fixturesFolder: { value: 'cypress/fixtures', from: 'default' },
@@ -1571,8 +1581,8 @@ describe('lib/config', () => {
             execTimeout: { value: 60000, from: 'default' },
             experimentalFetchPolyfill: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
+            experimentalSessionAndOrigin: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
-            experimentalSessionSupport: { value: false, from: 'default' },
             experimentalStudio: { value: false, from: 'default' },
             env: {
               foo: {
diff --git a/packages/server/test/unit/iframes_spec.js b/packages/server/test/unit/iframes_spec.js
index 4dc58e3e620f..5414e1079130 100644
--- a/packages/server/test/unit/iframes_spec.js
+++ b/packages/server/test/unit/iframes_spec.js
@@ -15,7 +15,7 @@ describe('controllers/iframes', () => {
 
       const controllerOptions = {
         getSpec: sinon.stub(),
-        getRemoteState: sinon.stub(),
+        remoteStates: sinon.stub(),
         config: {},
       }
 
@@ -23,7 +23,7 @@ describe('controllers/iframes', () => {
 
       expect(mockRes.setHeader).to.have.been.calledWith('Origin-Agent-Cluster', '?0')
       expect(files.handleIframe).to.have.been.calledWith(
-        mockReq, mockRes, controllerOptions.config, controllerOptions.getRemoteState, sinon.match({
+        mockReq, mockRes, controllerOptions.config, controllerOptions.remoteStates, sinon.match({
           specFilter: undefined, specType: 'integration',
         }),
       )
diff --git a/packages/server/test/unit/remote_states.spec.ts b/packages/server/test/unit/remote_states.spec.ts
new file mode 100644
index 000000000000..ae3ce77a0e89
--- /dev/null
+++ b/packages/server/test/unit/remote_states.spec.ts
@@ -0,0 +1,462 @@
+require('../spec_helper')
+
+import { RemoteStates } from '../../lib/remote_states'
+import EventEmitter from 'events'
+
+describe('remote states', () => {
+  beforeEach(function () {
+    this.remoteStates = new RemoteStates(() => {
+      return {
+        serverPort: 9999,
+        fileServerPort: 9998,
+      }
+    })
+
+    // set the initial state
+    this.remoteStates.set('http://localhost:3500')
+
+    this.eventEmitter = new EventEmitter()
+    this.remoteStates.addEventListeners(this.eventEmitter)
+  })
+
+  context('#get', () => {
+    it('returns the remote state by for requested origin policy', function () {
+      const state = this.remoteStates.get('http://localhost:3500/foobar')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:3500',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '3500',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+    })
+
+    it('returns undefined when the remote state is not found', function () {
+      const state = this.remoteStates.get('http://notfound.com')
+
+      expect(state).to.be.undefined
+    })
+
+    it('changing returned state does not mutate remote state', function () {
+      const originalState = this.remoteStates.get('http://localhost:3500/foobar')
+
+      expect(originalState).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:3500',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '3500',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+
+      originalState.auth = { username: 'u', password: 'p' }
+
+      const currentState = this.remoteStates.get('http://localhost:3500/foobar')
+
+      expect(currentState).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:3500',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '3500',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+    })
+  })
+
+  context('#getPrimary', () => {
+    it('returns the primary when there is only the primary in remote states', function () {
+      const state = this.remoteStates.getPrimary()
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:3500',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '3500',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+    })
+
+    it('returns the primary when there are multiple remote states', function () {
+      this.remoteStates.set('https://staging.google.com/foo/bar', { isCrossOrigin: true })
+
+      const state = this.remoteStates.getPrimary()
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:3500',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '3500',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+    })
+  })
+
+  context('#isInOriginStack', () => {
+    it('returns true when the requested url is in the origin stack', function () {
+      const isInOriginStack = this.remoteStates.isInOriginStack('http://localhost:3500')
+
+      expect(isInOriginStack).to.be.true
+    })
+
+    it('returns false when the requested url is not in the origin stack', function () {
+      const isInOriginStack = this.remoteStates.isInOriginStack('http://notfound.com')
+
+      expect(isInOriginStack).to.be.false
+    })
+  })
+
+  context('#isSecondaryOrigin', () => {
+    it('returns true when the requested url is a secondary origin', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      const isSecondaryOrigin = this.remoteStates.isSecondaryOrigin('https://staging.google.com')
+
+      expect(isSecondaryOrigin).to.be.true
+    })
+
+    it('returns false when the requested url is the primary origin', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      const isSecondaryOrigin = this.remoteStates.isSecondaryOrigin('http://localhost:3500')
+
+      expect(isSecondaryOrigin).to.be.false
+    })
+
+    it('returns false when the requested url is not in the origin stack', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      const isSecondaryOrigin = this.remoteStates.isSecondaryOrigin('https://foobar.com')
+
+      expect(isSecondaryOrigin).to.be.false
+    })
+  })
+
+  context('#isPrimaryOrigin', () => {
+    it('returns true when the requested url is the primary origin', function () {
+      const isPrimaryOrigin = this.remoteStates.isPrimaryOrigin('http://localhost:3500')
+
+      expect(isPrimaryOrigin).to.be.true
+    })
+
+    it('returns false when the requested url is not the primary origin', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      const isPrimaryOrigin = this.remoteStates.isPrimaryOrigin('http://google.com')
+
+      expect(isPrimaryOrigin).to.be.false
+    })
+  })
+
+  context('#removeCurrentOrigin', () => {
+    it('removes the current origin from the stack', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      expect(this.remoteStates.isInOriginStack('https://google.com')).to.be.true
+
+      this.remoteStates.removeCurrentOrigin('https://google.com')
+
+      expect(this.remoteStates.isInOriginStack('https://google.com')).to.be.false
+    })
+
+    it('throws an error when trying to remove the incorrect origin', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      expect(this.remoteStates.isInOriginStack('https://google.com')).to.be.true
+
+      expect(() => this.remoteStates.removeCurrentOrigin('http://notfound.com'))
+      .to.throw(Error, 'Tried to remove origin http://notfound.com but https://google.com was found. This should never happen and likely is a bug. Please open an issue.')
+    })
+  })
+
+  context('#reset', () => {
+    it('resets the origin stack and remote states to the primary', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+
+      expect(this.remoteStates.isInOriginStack('https://google.com')).to.be.true
+      expect(this.remoteStates.get('https://google.com')).to.not.be.undefined
+
+      this.remoteStates.reset()
+
+      expect(this.remoteStates.get('https://google.com')).to.be.undefined
+      expect(this.remoteStates.isInOriginStack('https://google.com')).to.be.false
+    })
+  })
+
+  context('#current', () => {
+    it('returns the remote state for the current origin in the stack', function () {
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'https://google.com' })
+      this.remoteStates.set('https://staging.google.com/foo/bar', { isCrossOrigin: true })
+
+      const state = this.remoteStates.current()
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+    })
+  })
+
+  context('#set', () => {
+    it('sets primary state and origin when isCrossOrigin is false', function () {
+      expect(this.remoteStates.isPrimaryOrigin('http://localhost:3500')).to.be.true
+
+      const state = this.remoteStates.set('https://staging.google.com/foo/bar', { isCrossOrigin: false })
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+
+      expect(this.remoteStates.get('https://staging.google.com')).to.deep.equal(state)
+
+      expect(this.remoteStates.isPrimaryOrigin('https://staging.google.com')).to.be.true
+    })
+
+    it('sets a secondary state when isCrossOrigin is true', function () {
+      expect(this.remoteStates.isPrimaryOrigin('http://localhost:3500')).to.be.true
+
+      const state = this.remoteStates.set('https://staging.google.com/foo/bar', { isCrossOrigin: true })
+
+      this.remoteStates.addOrigin('https://staging.google.com')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+
+      expect(this.remoteStates.get('https://staging.google.com')).to.deep.equal(state)
+
+      expect(this.remoteStates.isPrimaryOrigin('http://localhost:3500')).to.be.true
+      expect(this.remoteStates.isPrimaryOrigin('https://staging.google.com')).to.be.false
+    })
+
+    it('overrides the existing state', function () {
+      this.remoteStates.set('https://staging.google.com/foo/bar')
+
+      let state = this.remoteStates.get('https://google.com')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+
+      this.remoteStates.set('https://prod.google.com/foo/bar')
+
+      state = this.remoteStates.get('https://google.com')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://prod.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+    })
+
+    it('sets port to 443 when omitted and https:', function () {
+      const state = this.remoteStates.set('https://staging.google.com/foo/bar')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'https://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '443',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+    })
+
+    it('sets port to 80 when omitted and http:', function () {
+      const state = this.remoteStates.set('http://staging.google.com/foo/bar')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://staging.google.com',
+        strategy: 'http',
+        domainName: 'google.com',
+        fileServer: null,
+        props: {
+          port: '80',
+          domain: 'google',
+          tld: 'com',
+        },
+      })
+    })
+
+    it('sets host + port to localhost', function () {
+      const state = this.remoteStates.set('http://localhost:4200/a/b?q=1#asdf')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:4200',
+        strategy: 'http',
+        domainName: 'localhost',
+        fileServer: null,
+        props: {
+          port: '4200',
+          domain: '',
+          tld: 'localhost',
+        },
+      })
+    })
+
+    it('sets local file', function () {
+      const state = this.remoteStates.set('/index.html')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:9999',
+        strategy: 'file',
+        domainName: 'localhost',
+        fileServer: 'http://localhost:9998',
+        props: null,
+      })
+    })
+
+    it('sets <root>', function () {
+      const state = this.remoteStates.set('<root>')
+
+      expect(state).to.deep.equal({
+        auth: undefined,
+        origin: 'http://localhost:9999',
+        strategy: 'file',
+        domainName: 'localhost',
+        fileServer: 'http://localhost:9998',
+        props: null,
+      })
+    })
+
+    it('sets the remote state when passed a state object', function () {
+      const state = {
+        auth: undefined,
+        origin: 'http://www.foobar.com',
+        strategy: 'http',
+        domainName: 'foobar.com',
+        fileServer: null,
+        props: {
+          port: '80',
+          domain: 'foobar',
+          tld: 'com',
+        },
+      }
+
+      this.remoteStates.set(state)
+
+      const actualState = this.remoteStates.get('http://www.foobar.com')
+
+      expect(actualState).to.deep.equal(state)
+    })
+  })
+
+  context('events', () => {
+    it('can add a secondary remote state on cross:origin:bridge:ready', function () {
+      let currentState = this.remoteStates.current()
+
+      expect(currentState.origin).to.equal('http://localhost:3500')
+
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+      currentState = this.remoteStates.current()
+      expect(currentState.origin).to.equal('http://cypress.io')
+      expect(this.remoteStates.isSecondaryOrigin(currentState.origin)).to.be.true
+    })
+
+    it('removes the current origin when cross:origin:finished is received', function () {
+      let currentState = this.remoteStates.current()
+
+      expect(currentState.origin).to.equal('http://localhost:3500')
+
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+      currentState = this.remoteStates.current()
+      expect(currentState.origin).to.equal('http://cypress.io')
+
+      this.eventEmitter.emit('cross:origin:finished', 'http://cypress.io')
+
+      currentState = this.remoteStates.current()
+      expect(currentState.origin).to.equal('http://localhost:3500')
+    })
+
+    it('doesn\'t override an existing secondary remote state on cross:origin:bridge:ready', function () {
+      let currentState = this.remoteStates.current()
+
+      expect(currentState.origin).to.equal('http://localhost:3500')
+
+      // simulate a cy.origin by calling cross:origin:bridge:ready followed by setting
+      // the origin with specific auth options and finally calling cross:origin:finished
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+      this.remoteStates.set('http://cypress.io', { auth: { username: 'u', password: 'p' }, isCrossOrigin: true })
+      currentState = this.remoteStates.current()
+      expect(currentState.origin).to.equal('http://cypress.io')
+      expect(currentState.auth).to.deep.equal({ username: 'u', password: 'p' })
+      this.eventEmitter.emit('cross:origin:finished', 'http://cypress.io')
+
+      // verify calling cross:origin:bridge:ready doesn't reset the previous state
+      this.eventEmitter.emit('cross:origin:bridge:ready', { originPolicy: 'http://cypress.io' })
+
+      currentState = this.remoteStates.current()
+      expect(currentState.origin).to.equal('http://cypress.io')
+      expect(currentState.auth).to.deep.equal({ username: 'u', password: 'p' })
+    })
+  })
+})
diff --git a/packages/server/test/unit/server_spec.js b/packages/server/test/unit/server_spec.js
index d2014f130c7b..5dc8fe48eeb9 100644
--- a/packages/server/test/unit/server_spec.js
+++ b/packages/server/test/unit/server_spec.js
@@ -355,7 +355,7 @@ describe.skip('lib/server', () => {
     })
 
     it('calls proxy.ws with hostname + port', function () {
-      this.server._onDomainSet('https://www.google.com')
+      this.server.remoteStates.set('https://www.google.com')
 
       const req = {
         connection: {
@@ -396,90 +396,4 @@ describe.skip('lib/server', () => {
       expect(this.socket.end).to.be.called
     })
   })
-
-  context('#_onDomainSet', () => {
-    beforeEach(function () {
-      this.server = new ServerE2E()
-    })
-
-    it('sets port to 443 when omitted and https:', function () {
-      const ret = this.server._onDomainSet('https://staging.google.com/foo/bar')
-
-      expect(ret).to.deep.eq({
-        auth: undefined,
-        origin: 'https://staging.google.com',
-        strategy: 'http',
-        domainName: 'google.com',
-        visiting: undefined,
-        fileServer: null,
-        props: {
-          port: '443',
-          domain: 'google',
-          tld: 'com',
-        },
-      })
-    })
-
-    it('sets port to 80 when omitted and http:', function () {
-      const ret = this.server._onDomainSet('http://staging.google.com/foo/bar')
-
-      expect(ret).to.deep.eq({
-        auth: undefined,
-        origin: 'http://staging.google.com',
-        strategy: 'http',
-        domainName: 'google.com',
-        visiting: undefined,
-        fileServer: null,
-        props: {
-          port: '80',
-          domain: 'google',
-          tld: 'com',
-        },
-      })
-    })
-
-    it('sets host + port to localhost', function () {
-      const ret = this.server._onDomainSet('http://localhost:4200/a/b?q=1#asdf')
-
-      expect(ret).to.deep.eq({
-        auth: undefined,
-        origin: 'http://localhost:4200',
-        strategy: 'http',
-        domainName: 'localhost',
-        visiting: undefined,
-        fileServer: null,
-        props: {
-          port: '4200',
-          domain: '',
-          tld: 'localhost',
-        },
-      })
-    })
-
-    it('sets <root> when not http url', function () {
-      this.server._server = {
-        address () {
-          return { port: 9999 }
-        },
-      }
-
-      this.server._fileServer = {
-        port () {
-          return 9998
-        },
-      }
-
-      const ret = this.server._onDomainSet('/index.html')
-
-      expect(ret).to.deep.eq({
-        auth: undefined,
-        origin: 'http://localhost:9999',
-        strategy: 'file',
-        domainName: 'localhost',
-        fileServer: 'http://localhost:9998',
-        props: null,
-        visiting: undefined,
-      })
-    })
-  })
 })
diff --git a/packages/server/test/unit/socket_spec.js b/packages/server/test/unit/socket_spec.js
index 6b5bedcaf6fe..be34d821162a 100644
--- a/packages/server/test/unit/socket_spec.js
+++ b/packages/server/test/unit/socket_spec.js
@@ -60,6 +60,7 @@ describe('lib/socket', () => {
         SocketCtor: SocketE2E,
         createRoutes,
         testingType: 'e2e',
+        getCurrentBrowser: () => null,
       })
       .then(() => {
         this.options = {
@@ -122,6 +123,8 @@ describe('lib/socket', () => {
         let chrome
 
         before(() => {
+          global.window = {}
+
           chrome = global.chrome = {
             cookies: {
               set () {},
@@ -146,6 +149,11 @@ describe('lib/socket', () => {
               query () {},
               executeScript () {},
             },
+            webRequest: {
+              onBeforeSendHeaders: {
+                addListener () {},
+              },
+            },
           }
 
           extensionBackgroundPage = require('@packages/extension/app/background')
@@ -590,6 +598,43 @@ describe('lib/socket', () => {
         })
       })
     })
+
+    context('on(cross:origin:bridge:ready)', () => {
+      it('emits cross:origin:bridge:ready on local bus', function (done) {
+        this.server.socket.localBus.once('cross:origin:bridge:ready', ({ originPolicy }) => {
+          expect(originPolicy).to.equal('http://foobar.com')
+
+          done()
+        })
+
+        this.client.emit('backend:request', 'cross:origin:bridge:ready', { originPolicy: 'http://foobar.com' }, () => {})
+      })
+    })
+
+    context('on(cross:origin:release:html)', () => {
+      it('emits cross:origin:release:html on local bus', function (done) {
+        this.server.socket.localBus.once('cross:origin:release:html', () => {
+          done()
+        })
+
+        this.client.emit('backend:request', 'cross:origin:release:html', () => {})
+      })
+    })
+
+    context('on(cross:origin:finished)', () => {
+      it('emits cross:origin:finished on local bus', function (done) {
+        this.server.socket.localBus.once('cross:origin:finished', (originPolicy) => {
+          expect(originPolicy).to.equal('http://foobar.com')
+
+          done()
+        })
+
+        // add the origin before calling cross:origin:finished (otherwise we'll fail trying to remove the origin)
+        this.client.emit('backend:request', 'cross:origin:bridge:ready', { originPolicy: 'http://foobar.com' }, () => {})
+
+        this.client.emit('backend:request', 'cross:origin:finished', 'http://foobar.com', () => {})
+      })
+    })
   })
 
   context('unit', () => {
@@ -613,6 +658,7 @@ describe('lib/socket', () => {
         SocketCtor: SocketE2E,
         createRoutes,
         testingType: 'e2e',
+        getCurrentBrowser: () => null,
       })
       .then(() => {
         this.automation = new Automation(this.cfg.namespace, this.cfg.socketIoCookie, this.cfg.screenshotsFolder)
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index e1117188e3f5..9b2f585bd1da 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -30,7 +30,7 @@ export interface FullConfig extends Partial<Cypress.RuntimeConfigOptions & Cypre
 // and are required when creating a project.
 export type ReceivedCypressOptions =
   Pick<Cypress.RuntimeConfigOptions, 'hosts' | 'projectName' | 'clientRoute' | 'devServerPublicPathRoute' | 'namespace' | 'report' | 'socketIoCookie' | 'configFile' | 'isTextTerminal' | 'isNewProject' | 'proxyUrl' | 'browsers' | 'browserUrl' | 'socketIoRoute' | 'arch' | 'platform' | 'spec' | 'specs' | 'browser' | 'version' | 'remote'>
-  & Pick<Cypress.ResolvedConfigOptions, 'chromeWebSecurity' | 'supportFolder' | 'experimentalSourceRewriting' | 'fixturesFolder' | 'reporter' | 'reporterOptions' | 'screenshotsFolder' | 'supportFile' | 'baseUrl' | 'viewportHeight' | 'viewportWidth' | 'port' | 'experimentalInteractiveRunEvents' | 'userAgent' | 'downloadsFolder' | 'env' | 'excludeSpecPattern' | 'specPattern'> // TODO: Figure out how to type this better.
+  & Pick<Cypress.ResolvedConfigOptions, 'chromeWebSecurity' | 'supportFolder' | 'experimentalSourceRewriting' | 'fixturesFolder' | 'reporter' | 'reporterOptions' | 'screenshotsFolder' | 'supportFile' | 'baseUrl' | 'viewportHeight' | 'viewportWidth' | 'port' | 'experimentalInteractiveRunEvents' | 'userAgent' | 'downloadsFolder' | 'env' | 'excludeSpecPattern' | 'specPattern' | 'experimentalSessionAndOrigin'> // TODO: Figure out how to type this better.
 
 export interface SampleConfigFile{
   status: 'changes' | 'valid' | 'skipped' | 'error'
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 7b1ecd95a20b..e8a24c692f2b 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -30,7 +30,6 @@
     "browser-logos": "github:alrra/browser-logos",
     "chai-subset": "1.6.0",
     "classnames": "2.3.1",
-    "cypress-multi-reporters": "1.4.0",
     "file-loader": "4.3.0",
     "lodash": "^4.17.19",
     "mobx": "5.15.4",
diff --git a/packages/web-config/package.json b/packages/web-config/package.json
index 0952f9d28aa9..cdcaeb81b0fe 100644
--- a/packages/web-config/package.json
+++ b/packages/web-config/package.json
@@ -26,7 +26,6 @@
     "copy-webpack-plugin": "5.1.2",
     "css-loader": "2.1.1",
     "css-modules-typescript-loader": "4.0.1",
-    "execa": "^5.0.0",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "4.3.0",
     "html-webpack-plugin": "4.5.2",
diff --git a/packages/web-config/webpack.config.base.ts b/packages/web-config/webpack.config.base.ts
index c7ba866e881e..7fc32aa0c339 100644
--- a/packages/web-config/webpack.config.base.ts
+++ b/packages/web-config/webpack.config.base.ts
@@ -104,6 +104,12 @@ function makeSassLoaders ({ modules }: { modules: boolean }): RuleSetRule {
   }
 }
 
+// the chrome version should be synced with
+// npm/webpack-batteries-included-preprocessor/index.js and
+// packages/server/lib/browsers/chrome.ts
+const babelPresetEnvConfig = [require.resolve('@babel/preset-env'), { targets: { 'chrome': '64' } }]
+const babelPresetTypeScriptConfig = [require.resolve('@babel/preset-typescript'), { allowNamespaces: true }]
+
 export const getCommonConfig = () => {
   const commonConfig: Configuration = {
     mode: 'none',
@@ -135,12 +141,9 @@ export const getCommonConfig = () => {
                 [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
               ],
               presets: [
-                // the chrome version should be synced with
-                // npm/webpack-batteries-included-preprocessor/index.js and
-                // packages/server/lib/browsers/chrome.ts
-                [require.resolve('@babel/preset-env'), { targets: { 'chrome': '64' } }],
+                babelPresetEnvConfig,
                 require.resolve('@babel/preset-react'),
-                [require.resolve('@babel/preset-typescript'), { allowNamespaces: true }],
+                babelPresetTypeScriptConfig,
               ],
               babelrc: false,
             },
@@ -223,8 +226,15 @@ export const getCommonConfig = () => {
 
 // eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces
 export const getSimpleConfig = () => ({
+  node: {
+    fs: 'empty',
+    child_process: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    module: 'empty',
+  },
   resolve: {
-    extensions: ['.js'],
+    extensions: ['.js', '.ts', '.json'],
   },
 
   stats,
@@ -235,18 +245,38 @@ export const getSimpleConfig = () => ({
   module: {
     rules: [
       {
-        test: /\.(js)$/,
+        test: /\.(js|ts)$/,
         exclude: /node_modules/,
         use: {
           loader: require.resolve('babel-loader'),
           options: {
+            plugins: [
+              [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+            ],
             presets: [
-              [require.resolve('@babel/preset-env'), { targets: { 'chrome': 63 } }],
+              babelPresetEnvConfig,
+              babelPresetTypeScriptConfig,
             ],
             babelrc: false,
           },
         },
       },
+      // FIXME: we don't actually want or need wasm support in the
+      // cross origin bundle that uses this config, but we need to refactor
+      // the driver so that it doesn't load the wasm code in
+      // packages/driver/src/cypress/source_map_utils.js when creating
+      // the cross origin bundle. for now, this is necessary so the build
+      // doesn't fail
+      // https://github.com/cypress-io/cypress/issues/19888
+      {
+        test: /\.wasm$/,
+        type: 'javascript/auto',
+        use: [
+          {
+            loader: require.resolve('arraybuffer-loader'),
+          },
+        ],
+      },
     ],
   },
 
diff --git a/patches/@types+jquery.scrollto+1.4.29.dev.patch b/patches/@types+jquery.scrollto+1.4.29.dev.patch
new file mode 100644
index 000000000000..8c79239f7a1c
--- /dev/null
+++ b/patches/@types+jquery.scrollto+1.4.29.dev.patch
@@ -0,0 +1,58 @@
+diff --git a/node_modules/@types/jquery.scrollto/index.d.ts b/node_modules/@types/jquery.scrollto/index.d.ts
+index 0a00c69..126a3d0 100755
+--- a/node_modules/@types/jquery.scrollto/index.d.ts
++++ b/node_modules/@types/jquery.scrollto/index.d.ts
+@@ -6,7 +6,7 @@
+ 
+ /// <reference types="jquery"/>
+ 
+-interface ScrollToOptions {
++interface JQueryScrollToOptions<TElement> extends JQuery.EffectsOptions<TElement> {
+     /**
+     * Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
+     */
+@@ -48,7 +48,7 @@ interface ScrollToOptions {
+     onAfterFirst?: (() => void) | undefined;
+ }
+ 
+-interface JQuery {
++interface JQuery<TElement> {
+     /**
+     * Scroll the matched elements
+     */
+@@ -60,7 +60,7 @@ interface JQuery {
+         * @param duration The OVERALL length of the animation
+         * @param settings Set of settings.
+         */
+-        (target: any, duration?: number, settings?: ScrollToOptions): JQuery;
++        (target: any, duration?: number, settings?: JQueryScrollToOptions<TElement>): JQuery;
+         /**
+         * Scroll the matched elements
+         *
+@@ -76,7 +76,7 @@ interface JQuery {
+         * @param settings Set of settings.
+         * @param onAfter The onAfter callback.
+         */
+-        (target: any, settings: ScrollToOptions, onAfter?: Function): JQuery;
++        (target: any, settings: JQueryScrollToOptions<TElement>, onAfter?: Function): JQuery;
+ 
+     };
+ 
+@@ -94,7 +94,7 @@ interface JQueryStatic {
+         * @param duration The OVERALL length of the animation
+         * @param settings Set of settings.
+         */
+-        (target: any, duration?: number, settings?: ScrollToOptions): JQuery;
++        (target: any, duration?: number, settings?: JQueryScrollToOptions<any>): JQuery;
+         /**
+         * Scroll window
+         *
+@@ -110,7 +110,7 @@ interface JQueryStatic {
+         * @param settings Set of settings.
+         * @param onAfter The onAfter callback.
+         */
+-        (target: any, settings: ScrollToOptions, onAfter?: Function): JQuery;
++        (target: any, settings: JQueryScrollToOptions<any>, onAfter?: Function): JQuery;
+ 
+     };
+ 
diff --git a/scripts/add_newlines_to_snapshots.js b/scripts/add_newlines_to_snapshots.js
deleted file mode 100644
index b67822e11f9f..000000000000
--- a/scripts/add_newlines_to_snapshots.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const fs = require('fs-extra')
-const glob = require('glob')
-const Promise = require('bluebird')
-
-const globAsync = Promise.promisify(glob)
-
-const endingNewLines = /\s+$/g
-const contentBetweenBackticksRe = /\`([\s\S]+?)\`/g
-
-globAsync('packages/server/__snapshots__/*')
-.map((file) => {
-  return fs.readFile(file, 'utf8')
-  .then((str) => {
-    return str
-    .replace(
-      contentBetweenBackticksRe,
-      '`\n$1\n`',
-    )
-    .split('`\n\n\n').join('`\n\n')
-    .split('\n\n\n\n`').join('\n\n\n`')
-    .split(endingNewLines).join('\n')
-  })
-  .then((str) => {
-    return fs.writeFile(file, str)
-  })
-})
diff --git a/scripts/binary/s3-api-demo.ts b/scripts/binary/s3-api-demo.ts
deleted file mode 100644
index 5fb3d114ba6f..000000000000
--- a/scripts/binary/s3-api-demo.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// ignore TS errors - we are importing from CoffeeScript files
-// @ts-ignore
-import uploadUtils from './util/upload'
-import { s3helpers } from './s3-api'
-
-const aws = uploadUtils.getS3Credentials()
-const s3 = s3helpers.makeS3(aws)
-
-const bucket = aws.bucket
-const key = 'beta/binary/3.3.0/darwin-x64/circle-develop-455046b928c861d4457b2ec5426a51de1fda74fd-102212/cypress.zip'
-
-/*
-  a little demo showing how user metadata can be set and read on a S3 object.
-*/
-
-s3helpers.setUserMetadata(bucket, key, {
-  user: 'bar',
-}, s3)
-.then(() => {
-  return s3helpers.getUserMetadata(bucket, key, s3)
-}).then(console.log, console.error)
diff --git a/scripts/circle-env.js b/scripts/circle-env.js
new file mode 100644
index 000000000000..70e7005e64d7
--- /dev/null
+++ b/scripts/circle-env.js
@@ -0,0 +1,68 @@
+/* eslint-disable no-console */
+const fs = require('fs').promises
+
+async function loadInternalTaskData () {
+  const filename = process.env.CIRCLE_INTERNAL_CONFIG
+
+  if (!filename) throw new Error('Missing CIRCLE_INTERNAL_CONFIG environment variable, cannot load Circle task data.')
+
+  const taskDataJson = await fs.readFile(filename, 'utf8')
+
+  try {
+    return JSON.parse(taskDataJson)
+  } catch (err) {
+    throw new Error(`An error occurred while parsing the Circle task data: ${err}`)
+  }
+}
+
+// check if the project env canary and context canary are both present to verify that this script is reading the right env
+async function checkCanaries () {
+  if (!process.env.CI) console.warn('This script will not work outside of CI.')
+
+  const circleEnv = await readCircleEnv()
+
+  if (Object.keys(circleEnv).length === 0) {
+    return console.warn('CircleCI env empty, assuming this is a contributor PR. Not checking for canary variables.')
+  }
+
+  if (!circleEnv.MAIN_CANARY) throw new Error('Missing MAIN_CANARY.')
+
+  if (!circleEnv.CONTEXT_CANARY) throw new Error('Missing CONTEXT_CANARY. Does this job have the test-runner:env-canary context?')
+}
+
+// Returns a map of environment variables defined for this job. `readCircleEnv()` differs from `process.env` - it will
+// only return environment variables explicitly specified for this job by CircleCI project env and contexts
+// NOTE: this Circle API is not stable, and yet it is the only way to access this information.
+async function readCircleEnv () {
+  const taskData = await loadInternalTaskData()
+
+  try {
+    // if this starts failing, try SSHing into a CircleCI job and see what changed in the $CIRCLE_INTERNAL_CONFIG file's schema
+    const circleEnv = taskData['Dispatched']['TaskInfo']['Environment']
+
+    if (!circleEnv) throw new Error('No Environment object was found.')
+
+    // last-ditch effort to check that an empty circle env is accurately reflecting process.env (external PRs)
+    if (process.env.CACHE_VERSION && Object.keys(circleEnv).length === 0) {
+      throw new Error('CACHE_VERSION is set, but circleEnv is empty')
+    }
+
+    return circleEnv
+  } catch (err) {
+    throw new Error(`An error occurred when reading the environment from Circle task data: ${err}`)
+  }
+}
+
+module.exports = {
+  readCircleEnv,
+  _checkCanaries: checkCanaries,
+}
+
+if (require.main === module) {
+  if (process.argv.includes('--check-canaries')) {
+    checkCanaries()
+  } else {
+    console.error(`No options were passed, but ${__filename} was invoked as a script.`)
+    process.exit(1)
+  }
+}
diff --git a/scripts/mocha-snapshot-spec.js b/scripts/mocha-snapshot-spec.js
deleted file mode 100644
index 00a11eeeca09..000000000000
--- a/scripts/mocha-snapshot-spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const execa = require('execa-wrap')
-const snapshot = require('snap-shot-it')
-
-function normalize (s) {
-  // assuming the test command tests this spec file
-  // and the command is hardcoded in package.json
-  // using forward slashes
-  return s.replace(process.cwd(), '<folder path>')
-  .replace(/passing \(\d+ms\)/, 'passing (<time>ms)')
-  .replace(/cypress@(\d+\.\d+\.\d+)/, 'cypress@x.y.z')
-  .replace(/✓/g, 'Y') // Mocha check on Mac
-  .replace(/√/g, 'Y') // Mocha check on Windows
-}
-
-/* eslint-env mocha */
-describe('mocha snapshot', () => {
-  it('captures mocha output', () => {
-    return execa('npm', ['run', 'test-mocha'])
-    .then(normalize)
-    .then(snapshot)
-  })
-})
diff --git a/scripts/rename-workspace-packages.js b/scripts/rename-workspace-packages.js
deleted file mode 100644
index 785abebf5003..000000000000
--- a/scripts/rename-workspace-packages.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const fs = require('fs')
-const glob = require('glob')
-const minimist = require('minimist')
-const path = require('path')
-
-const args = minimist(process.argv.slice(2))
-
-const packages = glob.sync('*/', {
-  cwd: path.join(process.cwd(), 'packages'),
-})
-.map((str) => {
-  return str.replace('/', '\\/')
-})
-.join('|')
-
-const pattern = `(\'|")(.*\\.\\.\\/)(${packages})`
-
-const re = new RegExp(pattern, 'g')
-
-const text = fs.readFileSync(args.file, 'utf8')
-
-const replacedText = text.replace(re, '$1@packages/$3')
-
-fs.writeFileSync(args.file, replacedText)
diff --git a/scripts/spec.js b/scripts/spec.js
deleted file mode 100644
index 53c4a4466ffd..000000000000
--- a/scripts/spec.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-env mocha */
-describe('mocha sanity check', () => {
-  it('works', () => {})
-})
diff --git a/scripts/test-debug-package.js b/scripts/test-debug-package.js
deleted file mode 100644
index 9a2c551ddd50..000000000000
--- a/scripts/test-debug-package.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const cp = require('child_process')
-const path = require('path')
-const chalk = require('chalk')
-const finder = require('find-package-json')
-
-const DEFAULT_SCRIPT = 'yarn test --inspect-brk=5566'
-
-const file = process.argv[2]
-
-// walks up from the file until it finds the first
-// package.json in a parent folder
-const { value: pkg, filename } = finder(file).next()
-
-const script = pkg.scripts['test-debug'] || DEFAULT_SCRIPT
-
-const [cmd, ...args] = script.split(' ')
-
-const log = (k, v) => {
-  // eslint-disable-next-line
-  console.log(chalk.yellow(k), chalk.cyan(v))
-}
-
-log('Node version:', process.version)
-log('Debug script:', script)
-log('Debugging test file:', file)
-
-cp.spawn(cmd, args.concat(file), {
-  cwd: path.dirname(filename),
-  stdio: 'inherit',
-})
diff --git a/scripts/test-unique-npm-and-binary.js b/scripts/test-unique-npm-and-binary.js
deleted file mode 100644
index a0cec1ab2e02..000000000000
--- a/scripts/test-unique-npm-and-binary.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-disable no-console */
-const minimist = require('minimist')
-const os = require('os')
-const la = require('lazy-ass')
-const fs = require('fs-extra')
-const is = require('check-more-types')
-const execa = require('execa')
-const { getNameAndBinary } = require('./utils')
-
-const options = minimist(process.argv)
-
-const cwd = options.cwd || '/tmp/testing'
-
-fs.ensureDirSync(cwd)
-
-const spawnOpts = {
-  cwd,
-  shell: os.platform() === 'win32' ? 'bash.exe' : '/bin/bash',
-  stdio: 'inherit',
-}
-const { npm, binary } = getNameAndBinary(process.argv)
-
-la(is.unemptyString(npm), 'missing npm url')
-la(is.unemptyString(binary), 'missing binary url')
-
-console.log('Create Dummy Project')
-execa('npm init -y', spawnOpts)
-.then(console.log)
-.then(() => {
-  console.log('testing NPM from', npm)
-  console.log('and binary from', binary)
-  console.log('in', cwd)
-
-  return execa(`npm install ${npm}`, {
-    ...spawnOpts,
-    env: {
-      CYPRESS_INSTALL_BINARY: binary,
-    },
-  }).then(console.log)
-})
-.then(() => {
-  console.log('Verify Cypress binary')
-
-  return execa('$(yarn bin cypress) verify', spawnOpts)
-  .then(console.log)
-})
-.catch((e) => {
-  console.error(e)
-  process.exit(1)
-})
diff --git a/scripts/test-unit.js b/scripts/test-unit.js
deleted file mode 100644
index 0e50d94c2a7d..000000000000
--- a/scripts/test-unit.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// This file exists because mocha doesn't return non-zero value when there is a failed test.
-// When https://github.com/mochajs/mocha/issues/3893 is fixed, it will be removed.
-
-const { spawn } = require('child_process')
-const Promise = require('bluebird')
-
-// Test result on console.
-let log = ''
-const proc = spawn(`node`, ['./node_modules/.bin/mocha', 'src/**/*.spec.*'], {})
-
-proc.stdout.on('data', (data) => {
-  log += data
-})
-
-proc.stdout.on('end', async () => {
-  await Promise.delay(500)
-
-  const result = log.match(/\d+ passing.*\n\s*(\d+) failing/)
-  const numFailing = result && parseInt(result[1], 10)
-
-  if (!isNaN(numFailing)) {
-    process.exit(numFailing)
-  }
-
-  process.exit(0)
-})
-
-// Show result on console.
-spawn(`node`, ['./node_modules/.bin/mocha', '"src/*.spec.*" "src/**/*.spec.*"'], {
-  stdio: 'inherit',
-  shell: true,
-})
diff --git a/scripts/unit/circle-env-spec.js b/scripts/unit/circle-env-spec.js
new file mode 100644
index 000000000000..972067aeb6c6
--- /dev/null
+++ b/scripts/unit/circle-env-spec.js
@@ -0,0 +1,68 @@
+const fs = require('fs').promises
+const sinon = require('sinon')
+const { expect } = require('chai')
+const { _checkCanaries } = require('../circle-env')
+
+describe('circle-env', () => {
+  let cachedEnv = { ...process.env }
+
+  afterEach(() => {
+    sinon.restore()
+    Object.assign(process.env, cachedEnv)
+  })
+
+  beforeEach(() => {
+    delete process.env.CACHE_VERSION
+    process.env.CI = 'true'
+    process.env.CIRCLE_INTERNAL_CONFIG = '/foo.json'
+  })
+
+  context('with missing canaries', () => {
+    it('fails', async () => {
+      sinon.stub(fs, 'readFile')
+      .withArgs('/foo.json').resolves(JSON.stringify({
+        Dispatched: { TaskInfo: { Environment: { somekey: 'someval' } } },
+      }))
+
+      try {
+        await _checkCanaries()
+        throw new Error('should not reach')
+      } catch (err) {
+        expect(err.message).to.include('Missing MAIN_CANARY')
+      }
+    })
+
+    context('with no circleEnv', () => {
+      beforeEach(() => {
+        sinon.stub(fs, 'readFile')
+        .withArgs('/foo.json').resolves(JSON.stringify({
+          Dispatched: { TaskInfo: { Environment: {} } },
+        }))
+      })
+
+      it('passes', async () => {
+        await _checkCanaries()
+      })
+
+      it('fails if CACHE_VERSION does exist', async () => {
+        process.env.CACHE_VERSION = 'foo'
+
+        try {
+          await _checkCanaries()
+          throw new Error('should not reach')
+        } catch (err) {
+          expect(err.message).to.include('CACHE_VERSION is set, but circleEnv is empty')
+        }
+      })
+    })
+  })
+
+  it('passes with canaries', async () => {
+    sinon.stub(fs, 'readFile')
+    .withArgs('/foo.json').resolves(JSON.stringify({
+      Dispatched: { TaskInfo: { Environment: { MAIN_CANARY: 'true', CONTEXT_CANARY: 'true' } } },
+    }))
+
+    await _checkCanaries()
+  })
+})
diff --git a/scripts/unit/verify-mocha-results-spec.js b/scripts/unit/verify-mocha-results-spec.js
new file mode 100644
index 000000000000..225867546e16
--- /dev/null
+++ b/scripts/unit/verify-mocha-results-spec.js
@@ -0,0 +1,91 @@
+const fs = require('fs').promises
+const sinon = require('sinon')
+const { expect } = require('chai')
+const { verifyMochaResults } = require('../verify-mocha-results')
+
+describe('verify-mocha-results', () => {
+  let cachedEnv = { ...process.env }
+
+  if (process.platform === 'win32') {
+    // skip the rest of the tests
+    return it('fails on windows', async () => {
+      try {
+        await verifyMochaResults()
+        throw new Error('should not reach')
+      } catch (err) {
+        expect(err.message).to.equal('verifyMochaResults not supported on Windows')
+      }
+    })
+  }
+
+  afterEach(() => {
+    sinon.restore()
+    Object.assign(process.env, cachedEnv)
+  })
+
+  beforeEach(() => {
+    process.env.CIRCLE_INTERNAL_CONFIG = '/foo.json'
+    sinon.stub(fs, 'readFile')
+    .withArgs('/foo.json').resolves(JSON.stringify({
+      Dispatched: { TaskInfo: { Environment: { somekey: 'someval' } } },
+    }))
+
+    sinon.stub(fs, 'readdir').withArgs('/tmp/cypress/junit').resolves([
+      'report.xml',
+    ])
+  })
+
+  it('does not fail with normal report', async () => {
+    fs.readFile
+    .withArgs('/tmp/cypress/junit/report.xml')
+    .resolves('<testsuites name="foo" time="1" tests="10" failures="0">')
+
+    await verifyMochaResults()
+  })
+
+  context('env checking', () => {
+    it('checks for protected env and fails and removes results when found', async () => {
+      const spy = sinon.stub(fs, 'rm').withArgs('/tmp/cypress/junit', { recursive: true, force: true })
+
+      fs.readFile
+      .withArgs('/tmp/cypress/junit/report.xml')
+      .resolves('<testsuites name="foo" time="1" tests="10" failures="0">someval')
+
+      try {
+        await verifyMochaResults()
+        throw new Error('should not reach')
+      } catch (err) {
+        expect(err.message).to.include('somekey').and.not.include('someval')
+        expect(spy.getCalls().length).to.equal(1)
+      }
+    })
+  })
+
+  context('test result checking', () => {
+    it('checks for non-passing tests and fails when found', async () => {
+      fs.readFile
+      .withArgs('/tmp/cypress/junit/report.xml')
+      .resolves('<testsuites name="foo" time="1" tests="10" failures="3">')
+
+      try {
+        await verifyMochaResults()
+        throw new Error('should not reach')
+      } catch (err) {
+        expect(err.message).to.include('Expected the number of failures to be equal to 0')
+      }
+    })
+
+    it('checks for 0 tests run and fails when found', async () => {
+      fs.readFile
+      .withArgs('/tmp/cypress/junit/report.xml')
+      .resolves('<testsuites name="foo" time="1" tests="0" failures="0">')
+
+      try {
+        await verifyMochaResults()
+        throw new Error('should not reach')
+      } catch (err) {
+        expect(err.message).to.include('Expected the total number of tests to be >0')
+      }
+    })
+  })
+})
diff --git a/scripts/verify-mocha-results.js b/scripts/verify-mocha-results.js
new file mode 100644
index 000000000000..231f363e6684
--- /dev/null
+++ b/scripts/verify-mocha-results.js
@@ -0,0 +1,123 @@
+/* eslint-disable no-console */
+
+// this is a safety script to ensure that Mocha tests ran, by checking:
+// 1. that there are N test results in the reports dir (or at least 1, if N is not set)
+// 2. each of them contains 0 failures and >0 tests
+// additionally, it checks that no secrets are in the reports, since CI does not scrub
+// reports for environment variables
+// usage: yarn verify:mocha:results <N>
+
+const Bluebird = require('bluebird')
+const fs = require('fs').promises
+const la = require('lazy-ass')
+const path = require('path')
+const { readCircleEnv } = require('./circle-env')
+
+const RESULT_REGEX = /<testsuites name="([^"]+)" time="([^"]+)" tests="([^"]+)" failures="([^"]+)"(?: skipped="([^"]+)"|)>/
+const REPORTS_PATH = '/tmp/cypress/junit'
+
+const expectedResultCount = Number(process.argv[process.argv.length - 1])
+
+const parseResult = (xml) => {
+  const [name, time, tests, failures, skipped] = RESULT_REGEX.exec(xml).slice(1)
+
+  return {
+    name, time, tests: Number(tests), failures: Number(failures), skipped: Number(skipped || 0),
+  }
+}
+
+const total = { tests: 0, failures: 0, skipped: 0 }
+
+console.log(`Looking for reports in ${REPORTS_PATH}`)
+
+// some env is ok in reports. this is based off of what Circle doesn't mask in stdout:
+// https://circleci.com/blog/keep-environment-variables-private-with-secret-masking/
+function isWhitelistedEnv (key, value) {
+  return ['true', 'false', 'TRUE', 'FALSE'].includes(value)
+    || ['nodejs_version', 'CF_DOMAIN'].includes(key)
+    || value.length < 4
+}
+
+async function checkReportFile (filename, circleEnv) {
+  console.log(`Checking that ${filename} contains a valid report...`)
+
+  let xml; let result
+
+  try {
+    xml = await fs.readFile(path.join(REPORTS_PATH, filename))
+  } catch (err) {
+    throw new Error(`Unable to read the report in ${filename}: ${err.message}`)
+  }
+
+  try {
+    result = parseResult(xml)
+  } catch (err) {
+    throw new Error(`Error parsing result: ${err.message}. File contents:\n\n${xml}`)
+  }
+
+  const { name, time, tests, failures, skipped } = result
+
+  console.log(`Report parsed successfully. Name: ${name}\tTests ran: ${tests}\tFailing: ${failures}\tSkipped: ${skipped}\tTotal time: ${time}`)
+
+  la(tests > 0, 'Expected the total number of tests to be >0, but it was', tests, 'instead.')
+  la(failures === 0, 'Expected the number of failures to be equal to 0, but it was', failures, '. This stage should not have been reached. Check why the failed test stage did not cause this entire build to fail.')
+
+  for (const key in circleEnv) {
+    const value = circleEnv[key]
+
+    if (!isWhitelistedEnv(key, value) && xml.includes(value)) {
+      await fs.rm(REPORTS_PATH, { recursive: true, force: true })
+      throw new Error(`Report contained the value of ${key}, which is a CI environment variable. This means that a failing test is exposing environment variables. Test reports will not be persisted for this job.`)
+    }
+  }
+
+  total.tests += tests
+  total.failures += failures
+  total.skipped += skipped
+}
+
+async function checkReportFiles (filenames) {
+  let circleEnv
+
+  try {
+    circleEnv = await readCircleEnv()
+  } catch (err) {
+    // set SKIP_CIRCLE_ENV to bypass, for local development
+    if (!process.env.SKIP_CIRCLE_ENV) throw err
+
+    circleEnv = {}
+  }
+
+  await Bluebird.mapSeries(filenames, (f) => checkReportFile(f, circleEnv))
+
+  console.log('All reports are valid.')
+  console.log(`Total tests ran: ${total.tests}\tTotal failing: ${total.failures}\tTotal skipped: ${total.skipped}`)
+}
+
+async function verifyMochaResults () {
+  if (process.platform === 'win32') throw new Error('verifyMochaResults not supported on Windows')
+
+  try {
+    const filenames = await fs.readdir(REPORTS_PATH)
+
+    const resultCount = filenames.length
+
+    console.log(`Found ${resultCount} files in ${REPORTS_PATH}:`, filenames)
+
+    if (!expectedResultCount) {
+      console.log('Expecting at least 1 report...')
+      la(resultCount > 0, 'Expected at least 1 report, but found', resultCount, '. Verify that all tests ran as expected.')
+    } else {
+      console.log(`Expecting exactly ${expectedResultCount} reports...`)
+      la(expectedResultCount === resultCount, 'Expected', expectedResultCount, 'reports, but found', resultCount, '. Verify that all tests ran as expected.')
+    }
+
+    await checkReportFiles(filenames)
+  } catch (err) {
+    throw new Error(`Problem reading from ${REPORTS_PATH}: ${err.message}`)
+  }
+}
+
+if (require.main === module) verifyMochaResults()
+
+module.exports = { verifyMochaResults }
diff --git a/scripts/verify_mocha_results.js b/scripts/verify_mocha_results.js
deleted file mode 100644
index 625f60ef93dc..000000000000
--- a/scripts/verify_mocha_results.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/* eslint-disable no-console */
-
-// this is a safety script to ensure that Mocha tests ran, by checking:
-// 1. that there are N test results in the reports dir (or at least 1, if N is not set)
-// 2. each of them contains 0 failures and >0 tests
-// usage: yarn verify:mocha:results <N>
-
-const Bluebird = require('bluebird')
-const fse = Bluebird.promisifyAll(require('fs-extra'))
-const la = require('lazy-ass')
-const path = require('path')
-
-const RESULT_REGEX = /<testsuites name="([^"]+)" time="([^"]+)" tests="([^"]+)" failures="([^"]+)"(?: skipped="([^"]+)"|)>/
-const REPORTS_PATH = '/tmp/cypress/junit'
-
-const expectedResultCount = Number(process.argv[process.argv.length - 1])
-
-const parseResult = (xml) => {
-  const [name, time, tests, failures, skipped] = RESULT_REGEX.exec(xml).slice(1)
-
-  return {
-    name, time, tests: Number(tests), failures: Number(failures), skipped: Number(skipped || 0),
-  }
-}
-
-const total = { tests: 0, failures: 0, skipped: 0 }
-
-console.log(`Looking for reports in ${REPORTS_PATH}`)
-
-fse.readdir(REPORTS_PATH)
-.catch((err) => {
-  throw new Error(`Problem reading from ${REPORTS_PATH}: ${err.message}`)
-})
-.then((files) => {
-  const resultCount = files.length
-
-  console.log(`Found ${resultCount} files in ${REPORTS_PATH}:`, files)
-
-  if (!expectedResultCount) {
-    console.log('Expecting at least 1 report...')
-    la(resultCount > 0, 'Expected at least 1 report, but found', resultCount, '. Verify that all tests ran as expected.')
-  } else {
-    console.log(`Expecting exactly ${expectedResultCount} reports...`)
-    la(expectedResultCount === resultCount, 'Expected', expectedResultCount, 'reports, but found', resultCount, '. Verify that all tests ran as expected.')
-  }
-
-  return Bluebird.mapSeries(files, (file) => {
-    console.log(`Checking that ${file} contains a valid report...`)
-
-    return fse.readFile(path.join(REPORTS_PATH, file))
-    .catch((err) => {
-      throw new Error(`Unable to read the report in ${file}: ${err.message}`)
-    })
-    .then((xml) => {
-      try {
-        return parseResult(xml)
-      } catch (err) {
-        throw new Error(`Error parsing result: ${err.message}. File contents:\n\n${xml}`)
-      }
-    })
-    .then(({ name, time, tests, failures, skipped }) => {
-      console.log(`Report parsed successfully. Name: ${name}\tTests ran: ${tests}\tFailing: ${failures}\tSkipped: ${skipped}\tTotal time: ${time}`)
-
-      la(tests > 0, 'Expected the total number of tests to be >0, but it was', tests, 'instead.')
-      la(failures === 0, 'Expected the number of failures to be equal to 0, but it was', failures, '. This stage should not have been reached. Check why the failed test stage did not cause this entire build to fail.')
-
-      total.tests += tests
-      total.failures += failures
-      total.skipped += skipped
-    })
-  })
-})
-.then(() => {
-  console.log('All reports are valid.')
-  console.log(`Total tests ran: ${total.tests}\tTotal failing: ${total.failures}\tTotal skipped: ${total.skipped}`)
-})
-.catch((err) => {
-  console.error(err)
-  process.exit(1)
-})
diff --git a/system-tests/README.md b/system-tests/README.md
index 1caee087f7b9..e2af257276b6 100644
--- a/system-tests/README.md
+++ b/system-tests/README.md
@@ -25,7 +25,7 @@ yarn test test/go_spec.js --browser chrome --no-exit
 To debug the Cypress process under test, you can pass `--cypress-inspect-brk`:
 
 ```sh
-yarn test test/go_spec.js --browser chrome --no-exit
+yarn test test/go_spec.js --browser chrome --no-exit --cypress-inspect-brk
 ```
 
 ## Developing Tests
diff --git a/system-tests/__snapshots__/cy_origin_error_spec.ts.js b/system-tests/__snapshots__/cy_origin_error_spec.ts.js
new file mode 100644
index 000000000000..db957e5e5a90
--- /dev/null
+++ b/system-tests/__snapshots__/cy_origin_error_spec.ts.js
@@ -0,0 +1,75 @@
+exports['e2e cy.origin errors / captures the stack trace correctly for errors in cross origins to point users to their "cy.origin" callback'] = `
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        1 found (cy_origin_error.cy.ts)                                                  │
+  │ Searched:     cypress/e2e/cy_origin_error.cy.ts                                                │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+                                                                                                    
+  Running:  cy_origin_error.cy.ts                                                           (1 of 1)
+
+
+  cy.origin
+    1) tries to find an element that doesn't exist and fails
+
+
+  0 passing
+  1 failing
+
+  1) cy.origin
+       tries to find an element that doesn't exist and fails:
+     AssertionError: Timed out retrying after 1000ms: Expected to find element: \`#doesnotexist\`, but never found it.
+      [stack trace lines]
+
+
+
+
+  (Results)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Tests:        1                                                                                │
+  │ Passing:      0                                                                                │
+  │ Failing:      1                                                                                │
+  │ Pending:      0                                                                                │
+  │ Skipped:      0                                                                                │
+  │ Screenshots:  1                                                                                │
+  │ Video:        true                                                                             │
+  │ Duration:     X seconds                                                                        │
+  │ Spec Ran:     cy_origin_error.cy.ts                                                            │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+  (Screenshots)
+
+  -  /XXX/XXX/XXX/cypress/screenshots/cy_origin_error.cy.ts/cy.origin -- tries to fin     (1280x720)
+     d an element that doesn't exist and fails (failed).png                                         
+
+
+  (Video)
+
+  -  Started processing:  Compressing to 32 CRF                                                     
+  -  Finished processing: /XXX/XXX/XXX/cypress/videos/cy_origin_error.cy.ts.mp4           (X second)
+
+
+====================================================================================================
+
+  (Run Finished)
+
+
+       Spec                                              Tests  Passing  Failing  Pending  Skipped  
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ ✖  cy_origin_error.cy.ts                    XX:XX        1        -        1        -        - │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+    ✖  1 of 1 failed (100%)                     XX:XX        1        -        1        -        -  
+
+
+`
diff --git a/system-tests/__snapshots__/cy_origin_retries_spec.ts.js b/system-tests/__snapshots__/cy_origin_retries_spec.ts.js
new file mode 100644
index 000000000000..2cde4d3ef495
--- /dev/null
+++ b/system-tests/__snapshots__/cy_origin_retries_spec.ts.js
@@ -0,0 +1,84 @@
+exports['e2e cy.origin retries / Appropriately displays test retry errors without other side effects'] = `
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        1 found (cy_origin_retries.cy.ts)                                                │
+  │ Searched:     cypress/e2e/cy_origin_retries.cy.ts                                              │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+                                                                                                    
+  Running:  cy_origin_retries.cy.ts                                                         (1 of 1)
+
+
+  cy.origin test retries
+    (Attempt 1 of 3) appropriately retries test within "cy.origin" without propagating other errors errors
+    (Attempt 2 of 3) appropriately retries test within "cy.origin" without propagating other errors errors
+    1) appropriately retries test within "cy.origin" without propagating other errors errors
+
+
+  0 passing
+  1 failing
+
+  1) cy.origin test retries
+       appropriately retries test within "cy.origin" without propagating other errors errors:
+     AssertionError: expected true to be false
+      [stack trace lines]
+
+
+
+
+  (Results)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Tests:        1                                                                                │
+  │ Passing:      0                                                                                │
+  │ Failing:      1                                                                                │
+  │ Pending:      0                                                                                │
+  │ Skipped:      0                                                                                │
+  │ Screenshots:  3                                                                                │
+  │ Video:        true                                                                             │
+  │ Duration:     X seconds                                                                        │
+  │ Spec Ran:     cy_origin_retries.cy.ts                                                          │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+  (Screenshots)
+
+  -  /XXX/XXX/XXX/cypress/screenshots/cy_origin_retries.cy.ts/cy.origin test retries      (1280x720)
+     -- appropriately retries test within cy.origin without propagating other errors                
+     errors (failed).png                                                                            
+  -  /XXX/XXX/XXX/cypress/screenshots/cy_origin_retries.cy.ts/cy.origin test retries      (1280x720)
+     -- appropriately retries test within cy.origin without propagating other errors                
+     errors (failed) (attempt 2).png                                                                
+  -  /XXX/XXX/XXX/cypress/screenshots/cy_origin_retries.cy.ts/cy.origin test retries      (1280x720)
+     -- appropriately retries test within cy.origin without propagating other errors                
+     errors (failed) (attempt 3).png                                                                
+
+
+  (Video)
+
+  -  Started processing:  Compressing to 32 CRF                                                     
+  -  Finished processing: /XXX/XXX/XXX/cypress/videos/cy_origin_retries.cy.ts.mp4         (X second)
+
+
+====================================================================================================
+
+  (Run Finished)
+
+
+       Spec                                              Tests  Passing  Failing  Pending  Skipped  
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ ✖  cy_origin_retries.cy.ts                  XX:XX        1        -        1        -        - │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+    ✖  1 of 1 failed (100%)                     XX:XX        1        -        1        -        -  
+
+
+`
diff --git a/system-tests/__snapshots__/runnable_execution_spec.ts.js b/system-tests/__snapshots__/runnable_execution_spec.ts.js
index 2ddb78566b7a..b58acfb0036e 100644
--- a/system-tests/__snapshots__/runnable_execution_spec.ts.js
+++ b/system-tests/__snapshots__/runnable_execution_spec.ts.js
@@ -35,6 +35,16 @@ exports['e2e runnable execution / cannot navigate in before hook and test'] = `
        causes domain navigation:
      CypressError: \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.
 
+In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:
+
+\`cy.visit('http://localhost:4545/')\`
+\`<commands targeting http://localhost:4545 go here>\`
+
+\`cy.origin('http://localhost:5656', () => {\`
+\`  cy.visit('http://localhost:5656/')\`
+\`  <commands targeting http://localhost:5656 go here>\`
+\`})\`
+
 The new URL is considered a different origin because the following parts of the URL are different:
 
   > port
@@ -49,8 +59,6 @@ You're attempting to visit this URL:
 
   > 'http://localhost:5656'
 
-You may need to restructure some of your test code to avoid this problem.
-
 https://on.cypress.io/cannot-visit-different-origin-domain
       [stack trace lines]
 
@@ -58,6 +66,16 @@ https://on.cypress.io/cannot-visit-different-origin-domain
        "before each" hook for "never gets here":
      CypressError: \`cy.visit()\` failed because you are attempting to visit a URL that is of a different origin.
 
+In order to visit a different origin, you can enable the \`experimentalSessionAndOrigin\` flag and use \`cy.origin()\`:
+
+\`cy.visit('http://localhost:4545/')\`
+\`<commands targeting http://localhost:4545 go here>\`
+
+\`cy.origin('http://localhost:5656', () => {\`
+\`  cy.visit('http://localhost:5656/')\`
+\`  <commands targeting http://localhost:5656 go here>\`
+\`})\`
+
 The new URL is considered a different origin because the following parts of the URL are different:
 
   > port
@@ -72,8 +90,6 @@ You're attempting to visit this URL:
 
   > 'http://localhost:5656'
 
-You may need to restructure some of your test code to avoid this problem.
-
 https://on.cypress.io/cannot-visit-different-origin-domain
 
 Because this error occurred during a \`before each\` hook we are skipping the remaining tests in the current suite: \`navigation error in beforeEach\`
diff --git a/system-tests/__snapshots__/session_spec.ts.js b/system-tests/__snapshots__/session_spec.ts.js
index 7175162c004c..864133fd6ebd 100644
--- a/system-tests/__snapshots__/session_spec.ts.js
+++ b/system-tests/__snapshots__/session_spec.ts.js
@@ -5,10 +5,11 @@ exports['e2e sessions / session tests'] = `
   (Run Starting)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Cypress:    1.2.3                                                                              │
-  │ Browser:    FooBrowser 88                                                                      │
-  │ Specs:      1 found (session.cy.js)                                                            │
-  │ Searched:   cypress/e2e/session.cy.js                                                          │
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        1 found (session.cy.js)                                                          │
+  │ Searched:     cypress/e2e/session.cy.js                                                        │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
@@ -118,20 +119,22 @@ exports['e2e sessions / session tests'] = `
       ✓ clears only secure context data - 2/2
 
   errors
-    ✓ throws error when experimentalSessionSupport not enabled
+    ✓ throws error when experimentalSessionAndOrigin not enabled
+    ✓ throws error when experimentalSessionSupport is enabled through test config
+    ✓ throws error when experimentalSessionSupport is enabled through Cypress.config
     ✓ throws if session has not been defined during current test
     ✓ throws if multiple session calls with same name but different options
 
 
-  54 passing
+  56 passing
   1 pending
 
 
   (Results)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Tests:        55                                                                               │
-  │ Passing:      54                                                                               │
+  │ Tests:        57                                                                               │
+  │ Passing:      56                                                                               │
   │ Failing:      0                                                                                │
   │ Pending:      1                                                                                │
   │ Skipped:      0                                                                                │
@@ -149,9 +152,9 @@ exports['e2e sessions / session tests'] = `
 
        Spec                                              Tests  Passing  Failing  Pending  Skipped  
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✔  session.cy.js                            XX:XX       55       54        -        1        - │
+  │ ✔  session.cy.js                            XX:XX       57       56        -        1        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    ✔  All specs passed!                        XX:XX       55       54        -        1        -  
+    ✔  All specs passed!                        XX:XX       57       56        -        1        -  
 
 
 `
@@ -163,10 +166,11 @@ exports['e2e sessions / sessions persist on reload, and clear between specs'] =
   (Run Starting)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Cypress:    1.2.3                                                                              │
-  │ Browser:    FooBrowser 88                                                                      │
-  │ Specs:      2 found (session_persist_spec_1.js, session_persist_spec_2.js)                     │
-  │ Searched:   cypress/e2e/session_persist_spec_1.js, cypress/e2e/session_persist_spec_2.js       │
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        2 found (session_persist_spec_1.js, session_persist_spec_2.js)                   │
+  │ Searched:     cypress/e2e/session_persist_spec_1.js, cypress/e2e/session_persist_spec_2.js     │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
diff --git a/system-tests/__snapshots__/web_security_spec.js b/system-tests/__snapshots__/web_security_spec.js
index 123bbdd5429d..b0fdf0cf2c9e 100644
--- a/system-tests/__snapshots__/web_security_spec.js
+++ b/system-tests/__snapshots__/web_security_spec.js
@@ -5,10 +5,11 @@ exports['e2e web security / when enabled / fails'] = `
   (Run Starting)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Cypress:    1.2.3                                                                              │
-  │ Browser:    FooBrowser 88                                                                      │
-  │ Specs:      1 found (web_security.cy.js)                                                       │
-  │ Searched:   cypress/e2e/web_security.cy.js                                                     │
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        1 found (web_security.cy.js)                                                     │
+  │ Searched:     cypress/e2e/web_security.cy.js                                                   │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
@@ -22,78 +23,79 @@ exports['e2e web security / when enabled / fails'] = `
     2) fails when submitted a form and being redirected to another origin
     3) fails when using a javascript redirect to another origin
     4) fails when doing a CORS request cross-origin
+    ✓ finds the correct spec bridge even if a previous spec bridge host is a subset of the current host
 
 
-  0 passing
+  1 passing
   4 failing
 
   1) web security
        fails when clicking <a> to another origin:
-     CypressError: Cypress detected a cross origin error happened on page load:
+     CypressError: Timed out after waiting \`5000ms\` for your remote page to load on origin(s):
 
-  > [Cross origin error message]
+- \`http://localhost:4466\`
 
-Before the page load, you were bound to the origin policy:
+A cross-origin request for \`https://www.foo.com:44665/cross_origin\` was detected.
 
-  > http://localhost:4466
+A command that triggers cross-origin navigation must be immediately followed by a \`cy.origin()\` command:
 
-A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.
+\`cy.origin('https://foo.com:44665', () => {\`
+\`  <commands targeting https://www.foo.com:44665 go here>\`
+\`})\`
 
-A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.
+If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\` value in \`cypress.config.js\` to wait longer.
 
-Cypress does not allow you to navigate to a different origin URL within a single test.
+Browsers will not fire the \`load\` event until all stylesheets and scripts are done downloading.
 
-You may need to restructure some of your test code to avoid this problem.
+When this \`load\` event occurs, Cypress will continue running commands.
 
-Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in \`cypress.config.js\`.
-
-https://on.cypress.io/cross-origin-violation
+https://on.cypress.io/origin
       [stack trace lines]
 
   2) web security
        fails when submitted a form and being redirected to another origin:
-     CypressError: Cypress detected a cross origin error happened on page load:
-
-  > [Cross origin error message]
+     CypressError: Timed out after waiting \`5000ms\` for your remote page to load on origin(s):
 
-Before the page load, you were bound to the origin policy:
+- \`http://localhost:4466\`
 
-  > http://localhost:4466
+A cross-origin request for \`https://www.foo.com:44665/cross_origin\` was detected.
 
-A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.
+A command that triggers cross-origin navigation must be immediately followed by a \`cy.origin()\` command:
 
-A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.
+\`cy.origin('https://foo.com:44665', () => {\`
+\`  <commands targeting https://www.foo.com:44665 go here>\`
+\`})\`
 
-Cypress does not allow you to navigate to a different origin URL within a single test.
+If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\` value in \`cypress.config.js\` to wait longer.
 
-You may need to restructure some of your test code to avoid this problem.
+Browsers will not fire the \`load\` event until all stylesheets and scripts are done downloading.
 
-Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in \`cypress.config.js\`.
+When this \`load\` event occurs, Cypress will continue running commands.
 
-https://on.cypress.io/cross-origin-violation
+https://on.cypress.io/origin
       [stack trace lines]
 
   3) web security
        fails when using a javascript redirect to another origin:
-     CypressError: Cypress detected a cross origin error happened on page load:
-
-  > [Cross origin error message]
+     CypressError: Timed out after waiting \`5000ms\` for your remote page to load on origin(s):
 
-Before the page load, you were bound to the origin policy:
+- \`http://localhost:4466\`
 
-  > http://localhost:4466
+A cross-origin request for \`https://www.foo.com:44665/cross_origin\` was detected.
 
-A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.
+A command that triggers cross-origin navigation must be immediately followed by a \`cy.origin()\` command:
 
-A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.
+\`cy.origin('https://foo.com:44665', () => {\`
+\`  <commands targeting https://www.foo.com:44665 go here>\`
+\`})\`
 
-Cypress does not allow you to navigate to a different origin URL within a single test.
+If the cross-origin request was an intermediary state, you can try increasing the \`pageLoadTimeout\` value in \`cypress.config.js\` to wait longer.
 
-You may need to restructure some of your test code to avoid this problem.
+Browsers will not fire the \`load\` event until all stylesheets and scripts are done downloading.
 
-Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in \`cypress.config.js\`.
+When this \`load\` event occurs, Cypress will continue running commands.
 
-https://on.cypress.io/cross-origin-violation
+https://on.cypress.io/origin
       [stack trace lines]
 
   4) web security
@@ -107,8 +109,8 @@ https://on.cypress.io/cross-origin-violation
   (Results)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Tests:        4                                                                                │
-  │ Passing:      0                                                                                │
+  │ Tests:        5                                                                                │
+  │ Passing:      1                                                                                │
   │ Failing:      4                                                                                │
   │ Pending:      0                                                                                │
   │ Skipped:      0                                                                                │
@@ -144,14 +146,14 @@ https://on.cypress.io/cross-origin-violation
 
        Spec                                              Tests  Passing  Failing  Pending  Skipped  
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✖  web_security.cy.js                       XX:XX        4        -        4        -        - │
+  │ ✖  web_security.cy.js                       XX:XX        5        1        4        -        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    ✖  1 of 1 failed (100%)                     XX:XX        4        -        4        -        -  
+    ✖  1 of 1 failed (100%)                     XX:XX        5        1        4        -        -  
 
 
 `
 
-exports['e2e web security / when disabled / passes'] = `
+exports['e2e web security / firefox / displays warning when firefox and chromeWebSecurity:false'] = `
 
 ====================================================================================================
 
@@ -160,47 +162,49 @@ exports['e2e web security / when disabled / passes'] = `
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
   │ Cypress:    1.2.3                                                                              │
   │ Browser:    FooBrowser 88                                                                      │
-  │ Specs:      1 found (web_security.cy.js)                                                       │
-  │ Searched:   cypress/e2e/web_security.cy.js                                                     │
+  │ Specs:      1 found (simple_passing.cy.js)                                                     │
+  │ Searched:   cypress/e2e/simple_passing.cy.js                                                   │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
-  Running:  web_security.cy.js                                                              (1 of 1)
+  Running:  simple_passing.cy.js                                                            (1 of 1)
 
+Your project has set the configuration option: chromeWebSecurity to false
+
+This option will not have an effect in Firefox. Tests that rely on web security being disabled will not run as expected.
+
+
+  simple passing spec
+    ✓ passes
 
-  web security
-    ✓ fails when clicking <a> to another origin
-    ✓ fails when submitted a form and being redirected to another origin
-    ✓ fails when using a javascript redirect to another origin
-    ✓ fails when doing a CORS request cross-origin
 
+  1 passing
 
-  4 passing
+Warning: We failed processing this video.
+
+This error will not alter the exit code.
+
+TimeoutError: operation timed out
+      [stack trace lines]
 
 
   (Results)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Tests:        4                                                                                │
-  │ Passing:      4                                                                                │
+  │ Tests:        1                                                                                │
+  │ Passing:      1                                                                                │
   │ Failing:      0                                                                                │
   │ Pending:      0                                                                                │
   │ Skipped:      0                                                                                │
   │ Screenshots:  0                                                                                │
-  │ Video:        true                                                                             │
+  │ Video:        false                                                                            │
   │ Duration:     X seconds                                                                        │
-  │ Spec Ran:     web_security.cy.js                                                               │
+  │ Spec Ran:     simple_passing.cy.js                                                             │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
-  (Video)
-
-  -  Started processing:  Compressing to 32 CRF                                                     
-  -  Finished processing: /XXX/XXX/XXX/cypress/videos/web_security.cy.js.mp4              (X second)
-
-
 ====================================================================================================
 
   (Run Finished)
@@ -208,65 +212,65 @@ exports['e2e web security / when disabled / passes'] = `
 
        Spec                                              Tests  Passing  Failing  Pending  Skipped  
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✔  web_security.cy.js                       XX:XX        4        4        -        -        - │
+  │ ✔  simple_passing.cy.js                     XX:XX        1        1        -        -        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    ✔  All specs passed!                        XX:XX        4        4        -        -        -  
+    ✔  All specs passed!                        XX:XX        1        1        -        -        -  
 
 
 `
 
-exports['e2e web security / firefox / displays warning when firefox and chromeWebSecurity:false'] = `
+exports['e2e web security / when disabled / passes'] = `
 
 ====================================================================================================
 
   (Run Starting)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Cypress:    1.2.3                                                                              │
-  │ Browser:    FooBrowser 88                                                                      │
-  │ Specs:      1 found (simple_passing.cy.js)                                                     │
-  │ Searched:   cypress/e2e/simple_passing.cy.js                                                   │
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        1 found (web_security.cy.js)                                                     │
+  │ Searched:     cypress/e2e/web_security.cy.js                                                   │
+  │ Experiments:  experimentalSessionAndOrigin=true                                                │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
-  Running:  simple_passing.cy.js                                                            (1 of 1)
-
-Your project has set the configuration option: chromeWebSecurity to false
-
-This option will not have an effect in Firefox. Tests that rely on web security being disabled will not run as expected.
-
-
-  simple passing spec
-    ✓ passes
-
+  Running:  web_security.cy.js                                                              (1 of 1)
 
-  1 passing
 
-Warning: We failed processing this video.
+  web security
+    ✓ fails when clicking <a> to another origin
+    ✓ fails when submitted a form and being redirected to another origin
+    ✓ fails when using a javascript redirect to another origin
+    ✓ fails when doing a CORS request cross-origin
+    ✓ finds the correct spec bridge even if a previous spec bridge host is a subset of the current host
 
-This error will not alter the exit code.
 
-TimeoutError: operation timed out
-      [stack trace lines]
+  5 passing
 
 
   (Results)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Tests:        1                                                                                │
-  │ Passing:      1                                                                                │
+  │ Tests:        5                                                                                │
+  │ Passing:      5                                                                                │
   │ Failing:      0                                                                                │
   │ Pending:      0                                                                                │
   │ Skipped:      0                                                                                │
   │ Screenshots:  0                                                                                │
-  │ Video:        false                                                                            │
+  │ Video:        true                                                                             │
   │ Duration:     X seconds                                                                        │
-  │ Spec Ran:     simple_passing.cy.js                                                             │
+  │ Spec Ran:     web_security.cy.js                                                               │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
+  (Video)
+
+  -  Started processing:  Compressing to 32 CRF                                                     
+  -  Finished processing: /XXX/XXX/XXX/cypress/videos/web_security.cy.js.mp4              (X second)
+
+
 ====================================================================================================
 
   (Run Finished)
@@ -274,9 +278,9 @@ TimeoutError: operation timed out
 
        Spec                                              Tests  Passing  Failing  Pending  Skipped  
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✔  simple_passing.cy.js                     XX:XX        1        1        -        -        - │
+  │ ✔  web_security.cy.js                       XX:XX        5        5        -        -        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    ✔  All specs passed!                        XX:XX        1        1        -        -        -  
+    ✔  All specs passed!                        XX:XX        5        5        -        -        -  
 
 
 `
diff --git a/system-tests/lib/dep-installer/index.ts b/system-tests/lib/dep-installer/index.ts
index ef23dcf06f06..636cf982aecb 100644
--- a/system-tests/lib/dep-installer/index.ts
+++ b/system-tests/lib/dep-installer/index.ts
@@ -1,6 +1,5 @@
 import fs from 'fs-extra'
 import path from 'path'
-import cachedir from 'cachedir'
 import execa from 'execa'
 import { cyTmpDir, projectPath, projects, root } from '../fixtures'
 import { getYarnCommand } from './yarn'
@@ -162,7 +161,7 @@ export async function scaffoldProjectNodeModules (project: string, updateLockFil
     await execa(cmd, { cwd: projectDir, stdio: 'inherit', shell: true })
   }
 
-  const cacheNodeModulesDir = path.join(cachedir('cy-system-tests-node-modules'), project, 'node_modules')
+  const cacheNodeModulesDir = path.join('/tmp', 'cy-system-tests-node-modules', project, 'node_modules')
   const tmpNodeModulesDir = path.join(projectPath(project), 'node_modules')
 
   async function removeWorkspacePackages (packages: string[]): Promise<void> {
diff --git a/system-tests/projects/e2e/cypress/e2e/cy_origin_error.cy.ts b/system-tests/projects/e2e/cypress/e2e/cy_origin_error.cy.ts
new file mode 100644
index 000000000000..361325608234
--- /dev/null
+++ b/system-tests/projects/e2e/cypress/e2e/cy_origin_error.cy.ts
@@ -0,0 +1,14 @@
+describe('cy.origin', () => {
+  beforeEach(() => {
+    cy.visit('/primary_origin.html')
+    cy.get('a[data-cy="cross_origin_secondary_link"]').click()
+  })
+
+  it('tries to find an element that doesn\'t exist and fails', () => {
+    cy.origin('http://foobar.com:4466', () => {
+      cy.get('#doesnotexist', {
+        timeout: 1000,
+      })
+    })
+  })
+})
diff --git a/system-tests/projects/e2e/cypress/e2e/cy_origin_retries.cy.ts b/system-tests/projects/e2e/cypress/e2e/cy_origin_retries.cy.ts
new file mode 100644
index 000000000000..28e9c0728b17
--- /dev/null
+++ b/system-tests/projects/e2e/cypress/e2e/cy_origin_retries.cy.ts
@@ -0,0 +1,14 @@
+describe('cy.origin test retries', () => {
+  beforeEach(() => {
+    cy.visit('/primary_origin.html')
+    cy.get('a[data-cy="cross_origin_secondary_link"]').click()
+  })
+
+  it('appropriately retries test within "cy.origin" without propagating other errors errors', function () {
+    cy.origin('http://foobar.com:4466', () => {
+      cy.then(() => {
+        expect(true).to.be.false
+      })
+    })
+  })
+})
diff --git a/system-tests/projects/e2e/cypress/e2e/session.cy.js b/system-tests/projects/e2e/cypress/e2e/session.cy.js
index 599fdd9b87d1..a5de24bbeb1d 100644
--- a/system-tests/projects/e2e/cypress/e2e/session.cy.js
+++ b/system-tests/projects/e2e/cypress/e2e/session.cy.js
@@ -1,7 +1,6 @@
 /// <reference types="cypress" />
 window.top.__cySkipValidateConfig = true
 Cypress.config('isInteractive', true)
-Cypress.config('experimentalSessionSupport', true)
 
 const expectCurrentSessionData = (obj) => {
   cy.then(() => {
@@ -43,12 +42,12 @@ describe('cross origin automations', function () {
       localStorage.key1 = 'val1'
     })
 
-    .then(() => Cypress.session.getStorage({ origin: ['https://127.0.0.2:44665', 'current_origin'] }))
+    .then(() => Cypress.session.getStorage({ origin: ['https://127.0.0.1:44665', 'current_origin'] }))
     .then((result) => {
       expect(result).deep.eq({
         localStorage: [
           { origin: 'https://localhost:4466', value: { key1: 'val1' } },
-          { origin: 'https://127.0.0.2:44665', value: { name: 'foo' } },
+          { origin: 'https://127.0.0.1:44665', value: { name: 'foo' } },
         ],
         sessionStorage: [],
       })
@@ -62,12 +61,12 @@ describe('cross origin automations', function () {
       sessionStorage.key1 = 'val'
     })
 
-    .then(() => Cypress.session.getStorage({ origin: ['https://127.0.0.2:44665', 'current_origin'] }))
+    .then(() => Cypress.session.getStorage({ origin: ['https://127.0.0.1:44665', 'current_origin'] }))
     .then((result) => {
       expect(result).deep.eq({
         localStorage: [
           { origin: 'https://localhost:4466', value: { key1: 'val' } },
-          { origin: 'https://127.0.0.2:44665', value: { name: 'foo' } },
+          { origin: 'https://127.0.0.1:44665', value: { name: 'foo' } },
         ],
         sessionStorage: [
           { origin: 'https://localhost:4466', value: { key1: 'val' } },
@@ -89,18 +88,18 @@ describe('cross origin automations', function () {
       return Cypress.session.setStorage({
         localStorage: [
         // set localStorage on different origin
-          { origin: 'https://127.0.0.2:44665', value: { key2: 'val' }, clear: true },
+          { origin: 'https://127.0.0.1:44665', value: { key2: 'val' }, clear: true },
           // set localStorage on current origin
           { value: { key3: 'val' }, clear: true },
         ],
       })
     })
-    .then(() => Cypress.session.getStorage({ origin: ['current_url', 'https://127.0.0.2:44665'] }))
+    .then(() => Cypress.session.getStorage({ origin: ['current_url', 'https://127.0.0.1:44665'] }))
     .then((result) => {
       expect(result).deep.eq({
         localStorage: [
           { origin: 'https://localhost:4466', value: { key3: 'val' } },
-          { origin: 'https://127.0.0.2:44665', value: { key2: 'val' } },
+          { origin: 'https://127.0.0.1:44665', value: { key2: 'val' } },
         ],
         sessionStorage: [],
       })
@@ -115,7 +114,7 @@ describe('cross origin automations', function () {
 
     .then(() => Cypress.session.getStorage({ origin: '*' }))
     .then((result) => {
-      expect(result.localStorage).deep.eq([{ origin: 'https://localhost:4466', value: { key1: 'val1' } }, { origin: 'https://127.0.0.2:44665', value: { name: 'foo' } }])
+      expect(result.localStorage).deep.eq([{ origin: 'https://localhost:4466', value: { key1: 'val1' } }, { origin: 'https://127.0.0.1:44665', value: { name: 'foo' } }])
     })
   })
 
@@ -171,7 +170,7 @@ describe('with a blank session', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/foo', '/cross_origin_iframe/foo'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'foo' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'foo' } },
       ],
     })
   })
@@ -194,7 +193,7 @@ describe('clears session data beforeEach test even with no session', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/foo', '/cross_origin_iframe/foo'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'foo' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'foo' } },
       ],
     })
   })
@@ -214,7 +213,7 @@ describe('navigates to about:blank between tests and shows warning about session
   it('t1', () => {
     // only warns after initial blank page
     // unfortunately this fails when run alongside other tests
-    // cy.contains('experimentalSessionSupport').should('not.exist')
+    // cy.contains('experimentalSessionAndOrigin').should('not.exist')
     cy.contains('default blank page')
 
     cy.visit('https://localhost:4466/cross_origin_iframe/foo')
@@ -222,7 +221,7 @@ describe('navigates to about:blank between tests and shows warning about session
   })
 
   it('t2', () => {
-    cy.contains('Because experimentalSessionSupport')
+    cy.contains('Because experimentalSessionAndOrigin')
     cy.contains('default blank page')
   })
 })
@@ -268,7 +267,7 @@ describe('save/restore session with cookies and localStorage', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/cookies', '/cross_origin_iframe/cookies', '/form'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'cookies' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'cookies' } },
       ],
     })
   })
@@ -277,7 +276,7 @@ describe('save/restore session with cookies and localStorage', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/cookies', '/cross_origin_iframe/cookies'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'cookies' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'cookies' } },
       ],
     })
   })
@@ -299,7 +298,7 @@ describe('multiple sessions in test', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/alice', '/cross_origin_iframe/alice', '/form'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'alice' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'alice' } },
         { origin: 'https://localhost:4466', value: { username: 'alice' } },
       ],
     })
@@ -311,7 +310,7 @@ describe('multiple sessions in test', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/bob', '/cross_origin_iframe/bob'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'bob' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'bob' } },
         { origin: 'https://localhost:4466', value: { username: 'bob' } },
       ],
     })
@@ -330,7 +329,7 @@ describe('multiple sessions in test - can switch without redefining', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/alice', '/cross_origin_iframe/alice', '/form'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'alice' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'alice' } },
         { origin: 'https://localhost:4466', value: { username: 'alice' } },
       ],
     })
@@ -350,7 +349,7 @@ describe('multiple sessions in test - can switch without redefining', () => {
     expectCurrentSessionData({
       cookies: ['/set-localStorage/bob', '/cross_origin_iframe/bob'],
       localStorage: [
-        { origin: 'https://127.0.0.2:44665', value: { name: 'bob' } },
+        { origin: 'https://127.0.0.1:44665', value: { name: 'bob' } },
         { origin: 'https://localhost:4466', value: { username: 'bob' } },
       ],
     })
@@ -444,7 +443,7 @@ describe('options.validate reruns steps when resolving false in cypress command'
       // cy.wait(10000)
     }
 
-    cy.request('https://127.0.0.2:44665/redirect').then((res) => {
+    cy.request('https://127.0.0.1:44665/redirect').then((res) => {
       return callCount !== 2
     })
   })
@@ -477,7 +476,7 @@ describe('options.validate reruns steps when failing cy.request', () => {
   SuiteWithValidateFn('validate_fail_command_2', (callCount) => {
     const status = callCount === 2 ? 500 : 200
 
-    cy.request(`https://127.0.0.2:44665/status/${status}`)
+    cy.request(`https://127.0.0.1:44665/status/${status}`)
   })
 })
 
@@ -687,13 +686,13 @@ describe.skip('consoleProps', () => {
           ],
         },
         {
-          'name': '🍪 Cookies - 127.0.0.2 (1)',
+          'name': '🍪 Cookies - 127.0.0.1 (1)',
           'data': [
             {
               'name': '/set-localStorage/foo',
               'value': 'value',
               'path': '/',
-              'domain': '127.0.0.2',
+              'domain': '127.0.0.1',
               'secure': true,
               'httpOnly': false,
               'sameSite': 'no_restriction',
@@ -701,7 +700,7 @@ describe.skip('consoleProps', () => {
           ],
         },
         {
-          'name': '📁 Storage - 127.0.0.2 (1)',
+          'name': '📁 Storage - 127.0.0.1 (1)',
           'data': [
             {
               'key': 'name',
@@ -722,40 +721,40 @@ describe.skip('consoleProps', () => {
 // bar.foo.com data.
 describe('ignores setting insecure context data when on secure context', () => {
   describe('no cross origin secure origins, nothing to clear', () => {
-    it('sets insecure content', { experimentalSessionSupport: false }, () => {
+    it('sets insecure content', { experimentalSessionAndOrigin: false }, () => {
       cy.visit('http://bar.foo.com:4465/form')
     })
 
     let logSpy
 
-    it('nothing to clear - 1/2', { experimentalSessionSupport: false }, () => {
+    it('nothing to clear - 1/2', { experimentalSessionAndOrigin: false }, () => {
       cy.visit('https://localhost:4466/form')
       .then(() => {
         logSpy = Cypress.sinon.spy(Cypress, 'log')
       })
     })
 
-    it('nothing to clear - 2/2', { experimentalSessionSupport: true }, () => {
+    it('nothing to clear - 2/2', () => {
       top.logSpy = logSpy
       expect(Cypress._.find(logSpy.args, (v) => v[0].name === 'warning')).to.not.exist
     })
   })
 
   describe('only secure origins cleared', () => {
-    it('sets insecure content', { experimentalSessionSupport: false }, () => {
+    it('sets insecure content', { experimentalSessionAndOrigin: false }, () => {
       cy.visit('http://bar.foo.com:4465/form')
     })
 
     let logSpy
 
-    it('switches to secure context - clears only secure context data - 1/2', { experimentalSessionSupport: false }, () => {
+    it('switches to secure context - clears only secure context data - 1/2', { experimentalSessionAndOrigin: false }, () => {
       cy.visit('https://localhost:4466/cross_origin_iframe/foo')
       .then(() => {
         logSpy = Cypress.sinon.spy(Cypress, 'log')
       })
     })
 
-    it('clears only secure context data - 2/2', { experimentalSessionSupport: true }, () => {
+    it('clears only secure context data - 2/2', () => {
       top.logSpy = logSpy
       expect(Cypress._.find(logSpy.args, (v) => v[0].name === 'warning')).to.not.exist
     })
@@ -763,9 +762,29 @@ describe('ignores setting insecure context data when on secure context', () => {
 })
 
 describe('errors', () => {
-  it('throws error when experimentalSessionSupport not enabled', { experimentalSessionSupport: false }, (done) => {
+  it('throws error when experimentalSessionAndOrigin not enabled', { experimentalSessionAndOrigin: false }, (done) => {
     cy.on('fail', ({ message }) => {
-      expect(message).contain('You must enable')
+      expect(message).contain('\`cy.session()\` requires enabling the \`experimentalSessionAndOrigin\` flag')
+      done()
+    })
+
+    cy.session('sessions-not-enabled')
+  })
+
+  it('throws error when experimentalSessionSupport is enabled through test config', { experimentalSessionAndOrigin: false, experimentalSessionSupport: true }, (done) => {
+    cy.on('fail', ({ message }) => {
+      expect(message).contain('\`cy.session()\` requires enabling the \`experimentalSessionAndOrigin\` flag. The \`experimentalSessionSupport\` flag was enabled but was removed in Cypress version 9.6.0.')
+      done()
+    })
+
+    cy.session('sessions-not-enabled')
+  })
+
+  it('throws error when experimentalSessionSupport is enabled through Cypress.config', { experimentalSessionAndOrigin: false }, (done) => {
+    Cypress.config('experimentalSessionSupport', true)
+
+    cy.on('fail', ({ message }) => {
+      expect(message).contain('\`cy.session()\` requires enabling the \`experimentalSessionAndOrigin\` flag. The \`experimentalSessionSupport\` flag was enabled but was removed in Cypress version 9.6.0.')
       done()
     })
 
diff --git a/system-tests/projects/e2e/cypress/e2e/web_security.cy.js b/system-tests/projects/e2e/cypress/e2e/web_security.cy.js
index ac42eb895759..f6ecbcd14d02 100644
--- a/system-tests/projects/e2e/cypress/e2e/web_security.cy.js
+++ b/system-tests/projects/e2e/cypress/e2e/web_security.cy.js
@@ -24,4 +24,13 @@ describe('web security', function () {
     cy.visit('http://localhost:4466/cors')
     .contains('success!', { timeout: 500 })
   })
+
+  it('finds the correct spec bridge even if a previous spec bridge host is a subset of the current host', () => {
+    // Establish a spec bridge with a 'bar.com' host prior to loading 'foobar.com'
+    cy.origin('http://www.bar.com:4466', () => undefined)
+
+    cy.origin('http://www.app.foobar.com:4466', () => {
+      cy.visit('/link')
+    })
+  })
 })
diff --git a/system-tests/projects/e2e/primary_origin.html b/system-tests/projects/e2e/primary_origin.html
new file mode 100644
index 000000000000..d5ba735d963f
--- /dev/null
+++ b/system-tests/projects/e2e/primary_origin.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <style>
+    a {
+      display: block;
+    }
+  </style>
+  <div>
+    Go to different origin:
+    <a data-cy="cross_origin_secondary_link"
+        href="http://www.foobar.com:4466/secondary_origin.html">http://www.foobar.com:4466/secondary_origin.html</a>
+  </div>
+</body>
+</html>
diff --git a/system-tests/projects/e2e/secondary_origin.html b/system-tests/projects/e2e/secondary_origin.html
new file mode 100644
index 000000000000..2668024059d8
--- /dev/null
+++ b/system-tests/projects/e2e/secondary_origin.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <p data-cy="dom-check">From a secondary origin</p>
+  <p data-cy="cypress-check"></p>
+  <p data-cy="window-before-load"></p>
+  <form>
+    <button type="submit">Submit</button>
+  </form>
+  <button data-cy="alert">Alert</button>
+  <button data-cy="confirm">Confirm</button>
+  <button data-cy="reload">reload</button>
+  <a data-cy="hashChange" href='#hashChange'>hashChange</a>
+  <a data-cy="cross-origin-page"
+        href="/fixtures/primary_origin.html">/fixtures/primary_origin.html</a>
+
+  <script>
+    if (window.Cypress) {
+      document.querySelector('[data-cy="cypress-check"]').innerText = 'Has window.Cypress'
+    }
+
+    if (window.testSecondaryWindowBeforeLoad){
+      document.querySelector('[data-cy="window-before-load"]').innerText = 'Window Before Load Called'
+    }
+
+    document.querySelector('[data-cy="alert"]').addEventListener('click', () => {
+      window.alert('the alert text')
+    })
+
+    document.querySelector('[data-cy="confirm"]').addEventListener('click', () => {
+      window.confirm('the confirm text')
+    })
+
+    document.querySelector('[data-cy="reload"]').addEventListener('click', () => {
+      window.location.reload()
+    })
+  </script>
+</body>
+</html>
diff --git a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/blank_session.cy.js b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/blank_session.cy.js
index 919740aeb3ea..1e8bede8ba2e 100644
--- a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/blank_session.cy.js
+++ b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/blank_session.cy.js
@@ -1,4 +1,4 @@
-Cypress.config('experimentalSessionSupport', true)
+Cypress.config('experimentalSessionAndOrigin', true)
 
 it('t1', () => {
   cy.session('blank_session', () => {})
diff --git a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/multiple_sessions.cy.js b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/multiple_sessions.cy.js
index 618cffc8dbd4..9ccde27c40d2 100644
--- a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/multiple_sessions.cy.js
+++ b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/multiple_sessions.cy.js
@@ -1,4 +1,4 @@
-Cypress.config('experimentalSessionSupport', true)
+Cypress.config('experimentalSessionAndOrigin', true)
 
 it('t1', () => {
   cy.session('user1', () => {
diff --git a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/recreated_session.cy.js b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/recreated_session.cy.js
index 41bcc5f55717..f8e4785930ae 100644
--- a/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/recreated_session.cy.js
+++ b/system-tests/projects/runner-e2e-specs/cypress/e2e/sessions/recreated_session.cy.js
@@ -1,4 +1,4 @@
-Cypress.config('experimentalSessionSupport', true)
+Cypress.config('experimentalSessionAndOrigin', true)
 
 const stub = Cypress.sinon.stub().callsFake(() => {
   // The validation for t3 will fail, causing the
diff --git a/system-tests/scripts/cache-key.sh b/system-tests/scripts/cache-key.sh
index 482d8dd6ca36..73bb10d8fbce 100755
--- a/system-tests/scripts/cache-key.sh
+++ b/system-tests/scripts/cache-key.sh
@@ -5,4 +5,12 @@
 # cd to this "scripts" directory
 cd "$(dirname "${BASH_SOURCE[0]}")"
 
-cat ../projects/**/{package.json,yarn.lock}
\ No newline at end of file
+# Sort glob output, as it can vary based on architecture. LC_ALL=C required for locale-agnostic sort.
+file_list=$(ls ../projects/**/{package.json,yarn.lock} | LC_ALL=C sort -f)
+ 
+contents=''
+for t in ${file_list[@]}; do
+  contents+=$(<$t)
+done
+ 
+echo $contents
diff --git a/system-tests/scripts/send-root-honecomb-event.js b/system-tests/scripts/send-root-honeycomb-event.js
similarity index 100%
rename from system-tests/scripts/send-root-honecomb-event.js
rename to system-tests/scripts/send-root-honeycomb-event.js
diff --git a/system-tests/test/cy_origin_error_spec.ts b/system-tests/test/cy_origin_error_spec.ts
new file mode 100644
index 000000000000..9be8f3a3e3df
--- /dev/null
+++ b/system-tests/test/cy_origin_error_spec.ts
@@ -0,0 +1,48 @@
+import path from 'path'
+import systemTests, { expect } from '../lib/system-tests'
+import Fixtures from '../lib/fixtures'
+
+const e2ePath = Fixtures.projectPath('e2e')
+
+const PORT = 3500
+const onServer = function (app) {
+  app.get('/secondary_origin.html', (_, res) => {
+    res.sendFile(path.join(e2ePath, `secondary_origin.html`))
+  })
+}
+
+// TODO: This is probably more appropriate for a cy-in-cy test
+// https://github.com/cypress-io/cypress/issues/20973
+describe('e2e cy.origin errors', () => {
+  systemTests.setup({
+    servers: [{
+      port: 4466,
+      onServer,
+    }],
+    settings: {
+      hosts: {
+        '*.foobar.com': '127.0.0.1',
+      },
+    },
+  })
+
+  systemTests.it('captures the stack trace correctly for errors in cross origins to point users to their "cy.origin" callback', {
+    // keep the port the same to prevent issues with the snapshot
+    port: PORT,
+    spec: 'cy_origin_error.cy.ts',
+    snapshot: true,
+    expectedExitCode: 1,
+    config: {
+      experimentalSessionAndOrigin: true,
+    },
+    async onRun (exec) {
+      const res = await exec()
+
+      expect(res.stdout).to.contain('AssertionError')
+      expect(res.stdout).to.contain('Timed out retrying after 1000ms: Expected to find element: `#doesnotexist`, but never found it.')
+
+      // check to make sure the snapshot contains the 'cy.origin' sourcemap
+      expect(res.stdout).to.contain('http://localhost:3500/__cypress/tests?p=cypress/e2e/cy_origin_error.cy.ts:102:12')
+    },
+  })
+})
diff --git a/system-tests/test/cy_origin_retries_spec.ts b/system-tests/test/cy_origin_retries_spec.ts
new file mode 100644
index 000000000000..2e4c4785887b
--- /dev/null
+++ b/system-tests/test/cy_origin_retries_spec.ts
@@ -0,0 +1,49 @@
+import path from 'path'
+import systemTests, { expect } from '../lib/system-tests'
+import Fixtures from '../lib/fixtures'
+
+const e2ePath = Fixtures.projectPath('e2e')
+
+const PORT = 3500
+const onServer = function (app) {
+  app.get('/secondary_origin.html', (_, res) => {
+    res.sendFile(path.join(e2ePath, `secondary_origin.html`))
+  })
+}
+
+describe('e2e cy.origin retries', () => {
+  systemTests.setup({
+    servers: [{
+      port: 4466,
+      onServer,
+    }],
+    settings: {
+      hosts: {
+        '*.foobar.com': '127.0.0.1',
+      },
+    },
+  })
+
+  systemTests.it('Appropriately displays test retry errors without other side effects', {
+    // keep the port the same to prevent issues with the snapshot
+    port: PORT,
+    spec: 'cy_origin_retries.cy.ts',
+    snapshot: true,
+    expectedExitCode: 1,
+    config: {
+      experimentalSessionAndOrigin: true,
+      retries: 2,
+    },
+    async onRun (exec) {
+      const res = await exec()
+
+      // verify that retrying tests with cy.origin doesn't cause serialization problems to spec bridges on test:before:run:async
+      expect(res.stdout).not.to.contain('TypeError')
+      expect(res.stdout).not.to.contain('Cannot set property message')
+      expect(res.stdout).not.to.contain('which has only a getter')
+
+      expect(res.stdout).to.contain('AssertionError')
+      expect(res.stdout).to.contain('expected true to be false')
+    },
+  })
+})
diff --git a/system-tests/test/session_spec.ts b/system-tests/test/session_spec.ts
index 8835634acea2..afd3bd997148 100644
--- a/system-tests/test/session_spec.ts
+++ b/system-tests/test/session_spec.ts
@@ -31,7 +31,7 @@ const onServer = function (app) {
   })
 
   app.get('/cross_origin_iframe/:name', (req, res) => {
-    res.send(`<html><body><h1>cross_origin_iframe ${req.params.name}</h1><iframe src="https://127.0.0.2:44665/set-localStorage/${req.params.name}"</body></html>`)
+    res.send(`<html><body><h1>cross_origin_iframe ${req.params.name}</h1><iframe src="https://127.0.0.1:44665/set-localStorage/${req.params.name}"</body></html>`)
   })
 
   app.get('/set-localStorage/:name', (req, res) => {
@@ -97,7 +97,7 @@ const onServer = function (app) {
 
   app.get('/cors', (req, res) => {
     res.send(`<script>
-      fetch('https://127.0.0.2:44665/cross_origin')
+      fetch('https://127.0.0.1:44665/cross_origin')
       .then((res) => res.text())
       .then(text => {
         if (text.includes('cross origin')) document.write('success!')
@@ -133,7 +133,7 @@ describe('e2e sessions', () => {
     spec: 'session.cy.js',
     snapshot: true,
     config: {
-      experimentalSessionSupport: true,
+      experimentalSessionAndOrigin: true,
       video: false,
     },
   })
@@ -142,7 +142,7 @@ describe('e2e sessions', () => {
     spec: 'session_persist_spec_1.js,session_persist_spec_2.js',
     snapshot: true,
     config: {
-      experimentalSessionSupport: true,
+      experimentalSessionAndOrigin: true,
       video: false,
     },
   })
diff --git a/system-tests/test/web_security_spec.js b/system-tests/test/web_security_spec.js
index d2d820f08bf0..5b86d7907a30 100644
--- a/system-tests/test/web_security_spec.js
+++ b/system-tests/test/web_security_spec.js
@@ -40,7 +40,7 @@ const onServer = function (app) {
 
   app.get('/cors', (req, res) => {
     res.send(`<script>
-      fetch('https://127.0.0.2:44665/cross_origin')
+      fetch('https://www.foo.com:44665/cross_origin')
       .then((res) => res.text())
       .then(text => {
         if (text.includes('cross origin')) document.write('success!')
@@ -63,6 +63,8 @@ describe('e2e web security', () => {
     settings: {
       hosts: {
         '*.foo.com': '127.0.0.1',
+        '*.bar.com': '127.0.0.1',
+        '*.foobar.com': '127.0.0.1',
       },
     },
   })
@@ -70,6 +72,10 @@ describe('e2e web security', () => {
   context('when enabled', () => {
     systemTests.it('fails', {
       spec: 'web_security.cy.js',
+      config: {
+        experimentalSessionAndOrigin: true,
+        pageLoadTimeout: 5000,
+      },
       snapshot: true,
       expectedExitCode: 4,
     })
@@ -80,6 +86,7 @@ describe('e2e web security', () => {
       spec: 'web_security.cy.js',
       config: {
         chromeWebSecurity: false,
+        experimentalSessionAndOrigin: true,
       },
       snapshot: true,
       browser: ['chrome', 'electron'],
diff --git a/yarn.lock b/yarn.lock
index 6ec7881c3af0..fee483058c7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2888,11 +2888,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
-"@cypress/bower-kendo-ui@0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@cypress/bower-kendo-ui/-/bower-kendo-ui-0.0.2.tgz#62ea93d7f0653c0b91a7a4e5e9ede9d26d5990ea"
-  integrity sha1-YuqT1/BlPAuRp6Tl6e3p0m1ZkOo=
-
 "@cypress/browserify-preprocessor@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-3.0.0.tgz#2d1fa6a96ed7130a1b172c540448a5955cbc1264"
@@ -3003,15 +2998,6 @@
     http-proxy "^1.17.0"
     self-signed-cert "^1.0.1"
 
-"@cypress/env-or-json-file@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@cypress/env-or-json-file/-/env-or-json-file-2.0.0.tgz#fb6479b8b379e05a5cd216d9ae89c049a7b3c444"
-  integrity sha1-+2R5uLN54Fpc0hbZronASaezxEQ=
-  dependencies:
-    check-more-types "2.24.0"
-    debug "3.1.0"
-    lazy-ass "1.6.0"
-
 "@cypress/get-windows-proxy@1.6.2":
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/@cypress/get-windows-proxy/-/get-windows-proxy-1.6.2.tgz#c2f14c465fce7cf3bb3da4835fb191d80a79c2e3"
@@ -4535,7 +4521,7 @@
 
 "@jest/types@^26.3.0":
   version "26.6.2"
-  resolved "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
   integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
@@ -6037,72 +6023,6 @@
     node-gyp "^7.1.0"
     read-package-json-fast "^2.0.1"
 
-"@oclif/command@^1.5.20", "@oclif/command@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@oclif/command/-/command-1.8.0.tgz#c1a499b10d26e9d1a611190a81005589accbb339"
-  integrity sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==
-  dependencies:
-    "@oclif/config" "^1.15.1"
-    "@oclif/errors" "^1.3.3"
-    "@oclif/parser" "^3.8.3"
-    "@oclif/plugin-help" "^3"
-    debug "^4.1.1"
-    semver "^7.3.2"
-
-"@oclif/config@^1.15.1", "@oclif/config@^1.17.0":
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/@oclif/config/-/config-1.17.0.tgz#ba8639118633102a7e481760c50054623d09fcab"
-  integrity sha512-Lmfuf6ubjQ4ifC/9bz1fSCHc6F6E653oyaRXxg+lgT4+bYf9bk+nqrUpAbrXyABkCqgIBiFr3J4zR/kiFdE1PA==
-  dependencies:
-    "@oclif/errors" "^1.3.3"
-    "@oclif/parser" "^3.8.0"
-    debug "^4.1.1"
-    globby "^11.0.1"
-    is-wsl "^2.1.1"
-    tslib "^2.0.0"
-
-"@oclif/errors@^1.2.2", "@oclif/errors@^1.3.3":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@oclif/errors/-/errors-1.3.4.tgz#a96f94536b4e25caa72eff47e8b3ed04f6995f55"
-  integrity sha512-pJKXyEqwdfRTUdM8n5FIHiQQHg5ETM0Wlso8bF9GodczO40mF5Z3HufnYWJE7z8sGKxOeJCdbAVZbS8Y+d5GCw==
-  dependencies:
-    clean-stack "^3.0.0"
-    fs-extra "^8.1"
-    indent-string "^4.0.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
-"@oclif/linewrap@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@oclif/linewrap/-/linewrap-1.0.0.tgz#aedcb64b479d4db7be24196384897b5000901d91"
-  integrity sha512-Ups2dShK52xXa8w6iBWLgcjPJWjais6KPJQq3gQ/88AY6BXoTX+MIGFPrWQO1KLMiQfoTpcLnUwloN4brrVUHw==
-
-"@oclif/parser@^3.8.0", "@oclif/parser@^3.8.3":
-  version "3.8.5"
-  resolved "https://registry.yarnpkg.com/@oclif/parser/-/parser-3.8.5.tgz#c5161766a1efca7343e1f25d769efbefe09f639b"
-  integrity sha512-yojzeEfmSxjjkAvMRj0KzspXlMjCfBzNRPkWw8ZwOSoNWoJn+OCS/m/S+yfV6BvAM4u2lTzX9Y5rCbrFIgkJLg==
-  dependencies:
-    "@oclif/errors" "^1.2.2"
-    "@oclif/linewrap" "^1.0.0"
-    chalk "^2.4.2"
-    tslib "^1.9.3"
-
-"@oclif/plugin-help@^3", "@oclif/plugin-help@^3.2.0":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@oclif/plugin-help/-/plugin-help-3.2.2.tgz#063ee08cee556573a5198fbdfdaa32796deba0ed"
-  integrity sha512-SPZ8U8PBYK0n4srFjCLedk0jWU4QlxgEYLCXIBShJgOwPhTTQknkUlsEwaMIevvCU4iCQZhfMX+D8Pz5GZjFgA==
-  dependencies:
-    "@oclif/command" "^1.5.20"
-    "@oclif/config" "^1.15.1"
-    "@oclif/errors" "^1.2.2"
-    chalk "^4.1.0"
-    indent-string "^4.0.0"
-    lodash.template "^4.4.0"
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    widest-line "^3.1.0"
-    wrap-ansi "^4.0.0"
-
 "@octokit/app@2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@octokit/app/-/app-2.2.2.tgz#a1b8248f64159eeccbe4000d888fdae4163c4ad8"
@@ -6312,141 +6232,127 @@
   dependencies:
     "@octokit/openapi-types" "^10.2.2"
 
-"@percy/cli-build@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.0.0-beta.48.tgz#7768f402090a2e91b5bd9461650aaa00821dcc7f"
-  integrity sha512-nvahMqLI7qhN5G73Yg20Ikwpe/bAd6aMkzt2FtkC0eHf1nF4Xw//dqoPDnIQa3psTY/mXJLufm4O9FPO5LNaJA==
+"@percy/cli-build@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.1.0.tgz#0b154f482506f1abae4684758fd5f50447eb6dd8"
+  integrity sha512-99LDYYE5LPyRH6TL5mYapb0dNIQZkSrLq2I4ZyfTIUueoZ598QW1hg9IHo+URawFtjdFoMhaLlFGydMnizxCTw==
   dependencies:
-    "@percy/cli-command" "^1.0.0-beta.48"
-    "@percy/client" "^1.0.0-beta.48"
-    "@percy/env" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
+    "@percy/cli-command" "1.1.0"
 
-"@percy/cli-command@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.0.0-beta.48.tgz#61d93d9eb87253241f4be80d58cdeb4911471c6d"
-  integrity sha512-rYcL29tnkccDLOLoaYGlXzODzxNexHLv55sDDtAIX2XfdQfXQnxZN2iWJ+COd2YAoahUnODWHoVxFYcyIQaN8w==
+"@percy/cli-command@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.1.0.tgz#820e3c1fc1a403a6887861e9c8e6584fcb0cfe63"
+  integrity sha512-SMU/gVqXLm5GlThadby0uP8psDOsrUfNUIaFPtiPDSm0dT2dAyN1CAyvioEPQ2znPPMQSVegCvH23lfcYM4RXA==
   dependencies:
-    "@oclif/command" "^1.8.0"
-    "@oclif/config" "^1.17.0"
-    "@oclif/plugin-help" "^3.2.0"
-    "@percy/config" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
+    "@percy/config" "1.1.0"
+    "@percy/core" "1.1.0"
+    "@percy/logger" "1.1.0"
 
-"@percy/cli-config@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.0.0-beta.48.tgz#1f7366bec101626a9f54f65b5c57588ef6d758a6"
-  integrity sha512-aI5CJSdTrBFUKrtzWmeA4m3MpmpKfG6XcoL198G23WYpBjOdkHTOcgG8JA1x+s1GMM2mBr+TOMsDLRPm8Hk/xQ==
+"@percy/cli-config@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.1.0.tgz#65d0f6e4ba68a4fbf37fd0b6d5b2c8e20a5a6b5e"
+  integrity sha512-zLtyippRN402sNIDVJw1ZYPEXj5zWZgOJMUWfBq8NUbfxRzYYGCz0opMKGocx1fV8VfaFs2DywewRWKlhPM/Aw==
   dependencies:
-    "@oclif/command" "^1.8.0"
-    "@oclif/config" "^1.17.0"
-    "@percy/config" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
+    "@percy/cli-command" "1.1.0"
 
-"@percy/cli-exec@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.0.0-beta.48.tgz#48ca07effad64d53a45f741ae80181fff4087cbd"
-  integrity sha512-B1YTnniWJcLiEkR7dyACn2apS6abQ21qAEY/0A2Nhz3s7QiFj0sbmZcGn6HlUjpE0hA/tL/5EyfvlXVc8x+fNg==
+"@percy/cli-exec@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.1.0.tgz#377670c92200b1963d4dc3b71001c01d2f524947"
+  integrity sha512-7c3mePcW1ZJnsv+BAaA6YzZcTM55Eaa4WFoBEMrPWvHGLHZe3O+gehbEFyooIsDJ1I/SplDNarH3j1L5m4GQFg==
   dependencies:
-    "@percy/cli-command" "^1.0.0-beta.48"
-    "@percy/core" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
+    "@percy/cli-command" "1.1.0"
     cross-spawn "^7.0.3"
     which "^2.0.2"
 
-"@percy/cli-snapshot@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.0.0-beta.48.tgz#332d271e653b286c79ed95700e0e38e0489b1d13"
-  integrity sha512-6XXCWffgUN8qb3pX241GAuwRNQy98L9yPbfRbfCELX9Lpvjrd7HrDeaN4pXHormrcz/zQMMD5Oqb6vvdJK0UxA==
+"@percy/cli-snapshot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.1.0.tgz#e418488967a5d30de047f8aceeb11e117dc386db"
+  integrity sha512-6MQhUGrRFl2g9PfqLXfTL1CVoBmamWu2fCjzfgmb9E/HHKIDzE07PrwszNzEXHhdzBHG9gRZ0Bt6kzZ/Fta5UQ==
   dependencies:
-    "@percy/cli-command" "^1.0.0-beta.48"
-    "@percy/config" "^1.0.0-beta.48"
-    "@percy/core" "^1.0.0-beta.48"
-    "@percy/dom" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
-    globby "^11.0.1"
-    serve-handler "^6.1.3"
-    yaml "^1.10.0"
+    "@percy/cli-command" "1.1.0"
+    yaml "^2.0.0"
 
-"@percy/cli-upload@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.0.0-beta.48.tgz#a85c5a9419128e26db940085f4cbb2eed9797160"
-  integrity sha512-XQ0ZY742j9yCNYO3IuIcCSiRIdRu+3hyaE7mbEg3jqPOqLRWKBwi2BxEUkUkK+RTP+it66DWhZtBIJEOYSsiuQ==
+"@percy/cli-upload@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.1.0.tgz#99f8ee0a13c0e4cd80aa815adcb75d626846192e"
+  integrity sha512-P1GC3g0wYjy88h4zFBkInUcGWM8i99cJLyhKWg5WAK+bU5ot/Hc/4KgmNayHVxNJ/orcr1eHaP9pANbw82+igA==
   dependencies:
-    "@percy/cli-command" "^1.0.0-beta.48"
-    "@percy/client" "^1.0.0-beta.48"
-    "@percy/config" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
-    globby "^11.0.1"
+    "@percy/cli-command" "1.1.0"
+    fast-glob "^3.2.11"
     image-size "^1.0.0"
 
-"@percy/cli@1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.0.0-beta.48.tgz#e6e876f6253dea658039e4ae7095fa810ef24237"
-  integrity sha512-DS4d6EpN5Ejck8aKnTTmBrpMnVwaZEknUVVXvkmZik0vUAAs5ihEyn0PKKINqPcbHLvMa72wddNIYfBj0wsWgg==
-  dependencies:
-    "@oclif/plugin-help" "^3.2.0"
-    "@percy/cli-build" "^1.0.0-beta.48"
-    "@percy/cli-config" "^1.0.0-beta.48"
-    "@percy/cli-exec" "^1.0.0-beta.48"
-    "@percy/cli-snapshot" "^1.0.0-beta.48"
-    "@percy/cli-upload" "^1.0.0-beta.48"
-
-"@percy/client@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.0.0-beta.48.tgz#cdb8ada9e56b5703c19ce635a9d4b6865b8dc0a4"
-  integrity sha512-hYohEultQEcgkTgXf1Zyuu92h6cM0nxacy0TjBA/NLC0tlwQK2ZOyWsN3aCnwe3jiJ33Gt/+ryx4n/QbLj982w==
+"@percy/cli@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.1.0.tgz#587ac4c9553e9d72fff7b5310a168b7ea61b5763"
+  integrity sha512-3GSXhYEr3FA3xJnYsSMbP+GGnV/JSTcPjCVdS/yYq+PUSZlc9/36z6OE55mj/GBbskwlZ0B4xEsKTccpDtZngw==
+  dependencies:
+    "@percy/cli-build" "1.1.0"
+    "@percy/cli-command" "1.1.0"
+    "@percy/cli-config" "1.1.0"
+    "@percy/cli-exec" "1.1.0"
+    "@percy/cli-snapshot" "1.1.0"
+    "@percy/cli-upload" "1.1.0"
+    "@percy/client" "1.1.0"
+    "@percy/logger" "1.1.0"
+
+"@percy/client@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.1.0.tgz#2f6f63d901604548c8df868fcf561e5896809601"
+  integrity sha512-AHbOlz/sAgTJeyMuDedW9+y/hYdKLneYEoE0kFTFQMelDzCn+CD7sW58tLLnBG8+wpjCAz65WGeK+3WNJ+R3IA==
   dependencies:
-    "@percy/env" "^1.0.0-beta.48"
+    "@percy/env" "1.1.0"
+    "@percy/logger" "1.1.0"
 
-"@percy/config@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.0.0-beta.48.tgz#f34189a03e949ab506cf0dfeb69e27dacac1ecff"
-  integrity sha512-GDm9ry7tU5Ps96Jk5cPHbPT8n6IIXsxRpzevrlRIinKdht2QQ5w0LTDyucag1vzu+M1wUXF0Hk5PWj+M6/8ufQ==
+"@percy/config@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.1.0.tgz#3b15f2f342c5f05690be26a92b04320ff95e3441"
+  integrity sha512-Lsbyf81B6T9qfUYZnPzKplnScY8NBOXtXwd+r7oYLpMny80c4hKQ1zi9W1aOfpoWIq7j5L7N68exEQjE465LLQ==
   dependencies:
-    "@percy/logger" "^1.0.0-beta.48"
-    ajv "^8.0.5"
+    "@percy/logger" "1.1.0"
+    ajv "^8.6.2"
     cosmiconfig "^7.0.0"
-    yaml "^1.10.0"
+    yaml "^2.0.0"
 
-"@percy/core@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.0.0-beta.48.tgz#daf3cd3da78467c2478fec5fc6ada88106980046"
-  integrity sha512-5IyaV9+qdlhb2VbVLQRcG1eZ5FcBgK+l+FZX5mzBMZ6uxDzAIFIWI3SKgnePanZtEr//d1y6BoLhLB1LMJf27A==
-  dependencies:
-    "@percy/client" "^1.0.0-beta.48"
-    "@percy/config" "^1.0.0-beta.48"
-    "@percy/dom" "^1.0.0-beta.48"
-    "@percy/logger" "^1.0.0-beta.48"
+"@percy/core@1.1.0", "@percy/core@^1.0.0-beta.48":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.1.0.tgz#485911e3fbbe4cec1d3fc2fb74ee8df06565341c"
+  integrity sha512-k7uBp4vXSwICM9n0sRgQiPXkiUbjNbTY3wPDVGY0h/lQwKL2CESt2G+pVl5h7I7OHmNHDZEDgrqpGuq/kDkxvQ==
+  dependencies:
+    "@percy/client" "1.1.0"
+    "@percy/config" "1.1.0"
+    "@percy/dom" "1.1.0"
+    "@percy/logger" "1.1.0"
+    content-disposition "^0.5.4"
     cross-spawn "^7.0.3"
     extract-zip "^2.0.1"
-    progress "^2.0.3"
+    fast-glob "^3.2.11"
+    micromatch "^4.0.4"
+    mime-types "^2.1.34"
+    path-to-regexp "^6.2.0"
     rimraf "^3.0.2"
-    ws "^7.4.1"
+    ws "^8.0.0"
 
-"@percy/cypress@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@percy/cypress/-/cypress-3.1.0.tgz#19533772739b35759c30e3edd3070922f6ea6b6d"
-  integrity sha512-x4RPo7vMEGA6hmLbQIFwawZZlmiZknhSqPyzckxXgj8VyoW17QQOINxZo/DZTfV0UoUVOzNoHNrJcV3XJnN4FQ==
+"@percy/cypress@^3.1.0", "@percy/cypress@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@percy/cypress/-/cypress-3.1.1.tgz#4e7c5bdeccf1240b2150fc9d608df72c2f213d4b"
+  integrity sha512-khvWmCOJW7pxwDZPB5ovvbSe11FfNtH8Iyq8PHRYLD9ibAkiAWHZVs07bLK5wju1Q9X8s7zg5uj2yWxIlB1yjA==
   dependencies:
     "@percy/sdk-utils" "^1.0.0-beta.44"
 
-"@percy/dom@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.0.0-beta.48.tgz#b3b251a643b6e75571ce207c34d69c77eef43614"
-  integrity sha512-Kb2d3oPRVl28RaAWNwUaLa2fORbtw9xhmA/qoBXJ53YsuG10Ubf/5TZFIvovhQErXNGk/HLOqefvxLEyr6CNgg==
+"@percy/dom@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.1.0.tgz#743f46eaf298dd501c38739f1d5c35020ab78112"
+  integrity sha512-6doaOh81Guv+aPMayMCTA3O1Pa/YwH2uwT5NGo5dNjCdeomk/BnA+ZhtTRiarW0ymF7q+z6paGhq3R+717YuUQ==
 
-"@percy/env@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.0.0-beta.48.tgz#93756fadd82ef608f68d559b915a6f302cc3b421"
-  integrity sha512-nAlQydF/qxYTT9oDZt+dOpM8sKomGGdm3PJjKyZ+VIb1Kof0r/ZndsveJt8DXuB+WeXOeP37PQ1h9LiLDtpF7A==
-  dependencies:
-    dotenv "^8.2.0"
+"@percy/env@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.1.0.tgz#b04e769db0b6b71136b3112555727920302b2f77"
+  integrity sha512-Y2lSuiP+zyLSYf7IV/95MgNqiL6nRDYk9Ji8CMZPKuvPIrnCDExZ7nqszCli3hJ4qi6U4m1NykJWPDei4GjZNw==
 
-"@percy/logger@^1.0.0-beta.48":
-  version "1.0.0-beta.48"
-  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.0.0-beta.48.tgz#c8323536038d0ac5f05080a36f7dbc3319b139c9"
-  integrity sha512-vO70hgMuRssqFAcI3x3zyRLHqXYNtaaBKoaoXMpt4XF0W7At7AxFPOttvkzAI1gP7mqNwUZtc2K8VPkcguR7Aw==
+"@percy/logger@1.1.0", "@percy/logger@^1.0.0-beta.48":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.1.0.tgz#6bb5df0563d3566071f8b718e61f11a04c5a2722"
+  integrity sha512-bAlxBcdnViTpGQZtjs361vXSlaxEj6Zt4Wt1Mo7EdPwv/zya2cBpLFNNcRycWto4mdb5Qnpht+IPXf7RFXJ/nw==
 
 "@percy/sdk-utils@^1.0.0-beta.44":
   version "1.0.0-beta.48"
@@ -6549,18 +6455,6 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
-"@rollup/plugin-node-resolve@^13.0.4":
-  version "13.0.4"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz#b10222f4145a019740acb7738402130d848660c0"
-  integrity sha512-eYq4TFy40O8hjeDs+sIxEH/jc9lyuI2k9DM557WN6rO5OpnC2qXMBNj4IKH1oHrnAazL49C5p0tgP0/VpqJ+/w==
-  dependencies:
-    "@rollup/pluginutils" "^3.1.0"
-    "@types/resolve" "1.17.1"
-    builtin-modules "^3.1.0"
-    deepmerge "^4.2.2"
-    is-module "^1.0.0"
-    resolve "^1.19.0"
-
 "@rollup/plugin-replace@^2.3.1":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
@@ -7173,7 +7067,7 @@
 
 "@types/cheerio@*", "@types/cheerio@0.22.21":
   version "0.22.21"
-  resolved "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.21.tgz#5e37887de309ba11b2e19a6e14cad7874b31a8a3"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.21.tgz#5e37887de309ba11b2e19a6e14cad7874b31a8a3"
   integrity sha512-aGI3DfswwqgKPiEOTaiHV2ZPC9KEhprpgEbJnv0fZl3SGX0cGgEva1126dGrMC6AJM6v/aihlUgJn9M5DbDZ/Q==
   dependencies:
     "@types/node" "*"
@@ -7285,7 +7179,7 @@
 
 "@types/enzyme@*", "@types/enzyme@3.10.5":
   version "3.10.5"
-  resolved "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
   integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
   dependencies:
     "@types/cheerio" "*"
@@ -7726,13 +7620,6 @@
   resolved "https://registry.yarnpkg.com/@types/parsimmon/-/parsimmon-1.10.6.tgz#8fcf95990514d2a7624aa5f630c13bf2427f9cdd"
   integrity sha512-FwAQwMRbkhx0J6YELkwIpciVzCcgEqXEbIrIn3a2P5d3kGEHQ3wVhlN3YdVepYP+bZzCYO6OjmD4o9TGOZ40rA==
 
-"@types/pixelmatch@^5.2.4":
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.4.tgz#ca145cc5ede1388c71c68edf2d1f5190e5ddd0f6"
-  integrity sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/plist@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/plist/-/plist-3.0.2.tgz#61b3727bba0f5c462fe333542534a0c3e19ccb01"
@@ -9181,11 +9068,6 @@ abbrev@1, abbrev@~1.1.1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-abbrev@1.0.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
-  integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
-
 abort-controller@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -9455,10 +9337,10 @@ ajv@^7.0.2:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.0.5, ajv@^8.8.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.10.0.tgz#e573f719bd3af069017e3b66538ab968d040e54d"
-  integrity sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==
+ajv@^8.0.0, ajv@^8.6.2, ajv@^8.8.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -10211,6 +10093,11 @@ ast-types@0.8.12:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.12.tgz#a0d90e4351bb887716c83fd637ebf818af4adfcc"
   integrity sha1-oNkOQ1G7iHcWyD/WN+v4GK9K38w=
 
+ast-types@0.8.15:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.15.tgz#8eef0827f04dff0ec8857ba925abe3fea6194e52"
+  integrity sha1-ju8IJ/BN/w7IhXupJavj/qYZTlI=
+
 ast-types@0.9.6:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
@@ -10275,16 +10162,16 @@ async@0.9.x, async@^0.9.0:
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
   integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
 
-async@1.x, async@^1.5.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
-
 async@>=0.2.9, async@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
   integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
+async@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
+
 async@^2.1.4, async@^2.4.1, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -10389,20 +10276,6 @@ available-typed-arrays@^1.0.2:
   dependencies:
     array-filter "^1.0.0"
 
-awesome-typescript-loader@5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc"
-  integrity sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==
-  dependencies:
-    chalk "^2.4.1"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.1.0"
-    lodash "^4.17.5"
-    micromatch "^3.1.9"
-    mkdirp "^0.5.1"
-    source-map-support "^0.5.3"
-    webpack-log "^1.2.0"
-
 aws-sdk@2.814.0, aws-sdk@^2.389.0:
   version "2.814.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.814.0.tgz#7a1c36006e0b5826f14bd2511b1d229ef6814bb0"
@@ -11658,13 +11531,6 @@ bin-links@^1.1.2, bin-links@^1.1.8:
     npm-normalize-package-bin "^1.0.0"
     write-file-atomic "^2.3.0"
 
-bin-up@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/bin-up/-/bin-up-1.2.0.tgz#57976407e82b9c39e92d9e22eee0c3e298a95c4c"
-  integrity sha512-OOv0fU6dcy/2C4QsY0MlkA8c5ro/cqC7xNJ15mDbA35Oynn5vPt8rCiR3kxitQuOGe6vkJH6le6Pg1tQqySLkA==
-  dependencies:
-    execa "0.8.0"
-
 binary-extensions@^1.0.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -11871,11 +11737,6 @@ boolean@^3.0.1:
   resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.2.tgz#df1baa18b6a2b0e70840475e1d93ec8fe75b2570"
   integrity sha512-RwywHlpCRc3/Wh81MiCKun4ydaIFyW5Ea6JbL6sRCVx5q5irDw7pMXBUFYF/jArQ6YrG36q0kpovc9P/Kd3I4g==
 
-bootstrap@4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
-  integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
-
 bottleneck@^2.18.1:
   version "2.19.5"
   resolved "https://registry.yarnpkg.com/bottleneck/-/bottleneck-2.19.5.tgz#5df0b90f59fd47656ebe63c78a98419205cadd91"
@@ -13217,13 +13078,6 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-clean-stack@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-3.0.1.tgz#155bf0b2221bf5f4fba89528d24c5953f17fe3a8"
-  integrity sha512-lR9wNiMRcVQjSB3a7xXGLuz4cr4wJuuXlaAEbRutGowQTmlp7R72/DOgN21e8jdwblMWl9UOJMJXarX94pzKdg==
-  dependencies:
-    escape-string-regexp "4.0.0"
-
 clean-webpack-plugin@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-2.0.2.tgz#805a19ff20d46a06125298a25eb31142ecad2166"
@@ -14055,7 +13909,7 @@ content-disposition@0.5.3:
   dependencies:
     safe-buffer "5.1.2"
 
-content-disposition@0.5.4, content-disposition@~0.5.2:
+content-disposition@0.5.4, content-disposition@^0.5.4, content-disposition@~0.5.2:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
   integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
@@ -14336,7 +14190,7 @@ core-js-compat@^3.1.1, core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-c
     browserslist "^4.19.1"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
+core-js-pure@3.21.0, core-js-pure@^3.0.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.0.tgz#819adc8dfb808205ce25b51d50591becd615db7e"
   integrity sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==
@@ -16177,11 +16031,6 @@ dotenv@^5.0.1:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
   integrity sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==
 
-dotenv@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
 dotenv@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-9.0.2.tgz#dacc20160935a37dea6364aa1bef819fb9b6ab05"
@@ -17088,18 +16937,6 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escodegen@1.8.x:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
-  integrity sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=
-  dependencies:
-    esprima "^2.7.1"
-    estraverse "^1.9.1"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.2.0"
-
 escodegen@^1.11.0, escodegen@^1.8.1, escodegen@^1.9.1:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
@@ -17491,7 +17328,7 @@ esprima-fb@~15001.1001.0-dev-harmony-fb:
   resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1001.0-dev-harmony-fb.tgz#43beb57ec26e8cf237d3dd8b33e42533577f2659"
   integrity sha1-Q761fsJujPI3092LM+QlM1d/Jlk=
 
-esprima@2.7.x, esprima@^2.6.0, esprima@^2.7.1:
+esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
   integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
@@ -17525,11 +17362,6 @@ esrecurse@^4.1.0, esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
-  integrity sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=
-
 estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
@@ -17689,19 +17521,6 @@ execa@0.11.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@0.8.0, execa@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
-  integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@1.0.0, execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
@@ -17797,6 +17616,19 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^5.0.0, execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -18582,11 +18414,6 @@ find-npm-prefix@^1.0.2:
   resolved "https://registry.yarnpkg.com/find-npm-prefix/-/find-npm-prefix-1.0.2.tgz#8d8ce2c78b3b4b9e66c8acc6a37c231eb841cfdf"
   integrity sha512-KEftzJ+H90x6pcKtdXZEPsQse8/y/UnvzRKrOSQFprnrGaFuJ62fVkP34Iu2IYuMvyauCyoLTNkJZgrrGA2wkA==
 
-find-package-json@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/find-package-json/-/find-package-json-1.2.0.tgz#4057d1b943f82d8445fe52dc9cf456f6b8b58083"
-  integrity sha512-+SOGcLGYDJHtyqHd87ysBhmaeQ95oWspDKnMXBrnQ9Eq4OkLNqejgoaD8xVWu6GPa0B6roa6KinCMEMcVeqONw==
-
 find-port@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/find-port/-/find-port-1.0.1.tgz#db084a6cbf99564d99869ae79fbdecf66e8a185c"
@@ -18821,9 +18648,9 @@ flora-colossus@^1.0.0:
     fs-extra "^7.0.0"
 
 flow-parser@0.*, flow-parser@^0.*:
-  version "0.146.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.146.0.tgz#e389013c4c2bee1ca09a59957223685f8bbefb02"
-  integrity sha512-lMaDIdcEsdtKL0B+VFp8et/AjnB+cU1HJ6KDrp4Lw3Gsq0Ck0cmWRDgWfUQxxDvY99ntQyA/IdyFxFK4izKo4g==
+  version "0.176.3"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.176.3.tgz#a12d9c79ff1e857b70c9574c3e88be06d2f96181"
+  integrity sha512-KDzHEoEtc/kbW7NzujhfFkcTCdNi6VK91UpcdT3tc3yEAQdh4JXAEY/0TVJKipjRuVm8E2FxX/3B5Xpm3EFWXA==
 
 fluent-ffmpeg@2.1.2:
   version "2.1.2"
@@ -19050,7 +18877,7 @@ fs-extra@7.0.1, fs-extra@^7.0.0, fs-extra@^7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@8.1.0, fs-extra@^8.0.0, fs-extra@^8.1, fs-extra@^8.1.0:
+fs-extra@8.1.0, fs-extra@^8.0.0, fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -20355,7 +20182,7 @@ handlebars@^3.0.3:
   optionalDependencies:
     uglify-js "^2.6"
 
-handlebars@^4.0.1, handlebars@^4.7.6:
+handlebars@^4.7.6:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
   integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
@@ -22671,26 +22498,6 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-istanbul@0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
-  integrity sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=
-  dependencies:
-    abbrev "1.0.x"
-    async "1.x"
-    escodegen "1.8.x"
-    esprima "2.7.x"
-    glob "^5.0.15"
-    handlebars "^4.0.1"
-    js-yaml "3.x"
-    mkdirp "0.5.x"
-    nopt "3.x"
-    once "1.x"
-    resolve "1.1.x"
-    supports-color "^3.1.0"
-    which "^1.1.1"
-    wordwrap "^1.0.0"
-
 istextorbinary@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-6.0.0.tgz#bc6e7541006bc203feffe16628d0a72893b2ad54"
@@ -23266,7 +23073,7 @@ js-beautify@^1.6.12:
 
 js-codemod@cpojer/js-codemod:
   version "8.0.0"
-  resolved "https://codeload.github.com/cpojer/js-codemod/tar.gz/f08370ce77b5246a481772f138eaa0a92aa6e450"
+  resolved "https://codeload.github.com/cpojer/js-codemod/tar.gz/e3bd02bb5ba4b2ed98dea2b215af3b291f744863"
   dependencies:
     jscodeshift "^0.3.30"
     nuclide-format-js "0.0.36"
@@ -23317,7 +23124,7 @@ js-yaml@3.14.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@3.14.1, js-yaml@3.x, js-yaml@^3.13.1, js-yaml@^3.7.0:
+js-yaml@3.14.1, js-yaml@^3.13.1, js-yaml@^3.7.0:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -23451,38 +23258,6 @@ jsdom@13.2.0:
     ws "^6.1.2"
     xml-name-validator "^3.0.0"
 
-jsdom@14.1.0, jsdom@^14.0.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
-  integrity sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng==
-  dependencies:
-    abab "^2.0.0"
-    acorn "^6.0.4"
-    acorn-globals "^4.3.0"
-    array-equal "^1.0.0"
-    cssom "^0.3.4"
-    cssstyle "^1.1.1"
-    data-urls "^1.1.0"
-    domexception "^1.0.1"
-    escodegen "^1.11.0"
-    html-encoding-sniffer "^1.0.2"
-    nwsapi "^2.1.3"
-    parse5 "5.1.0"
-    pn "^1.1.0"
-    request "^2.88.0"
-    request-promise-native "^1.0.5"
-    saxes "^3.1.9"
-    symbol-tree "^3.2.2"
-    tough-cookie "^2.5.0"
-    w3c-hr-time "^1.0.1"
-    w3c-xmlserializer "^1.1.2"
-    webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.5"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^7.0.0"
-    ws "^6.1.2"
-    xml-name-validator "^3.0.0"
-
 jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
@@ -23515,6 +23290,38 @@ jsdom@^11.5.1:
     ws "^5.2.0"
     xml-name-validator "^3.0.0"
 
+jsdom@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
+  integrity sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^6.0.4"
+    acorn-globals "^4.3.0"
+    array-equal "^1.0.0"
+    cssom "^0.3.4"
+    cssstyle "^1.1.1"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.0"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.1.3"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.5"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.5.0"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^6.1.2"
+    xml-name-validator "^3.0.0"
+
 jsesc@2.5.2, jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -25033,7 +24840,7 @@ log-ok@^0.1.1:
     ansi-green "^0.1.1"
     success-symbol "^0.1.0"
 
-log-symbols@2.2.0, log-symbols@^2.1.0:
+log-symbols@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
@@ -25093,14 +24900,6 @@ loglevel@^1.4.1, loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loglevelnext@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
-  integrity sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==
-  dependencies:
-    es6-symbol "^3.1.1"
-    object.assign "^4.1.0"
-
 lolex@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.3.2.tgz#7c3da62ffcb30f0f5a80a2566ca24e45d8a01f31"
@@ -25711,7 +25510,7 @@ micromatch@^2.3.7:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.9:
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -25772,7 +25571,7 @@ mime-types@2.1.27:
   dependencies:
     mime-db "1.44.0"
 
-mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.21, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.21, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.34, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -25877,7 +25676,14 @@ minimatch@0.3:
     lru-cache "2"
     sigmund "~1.0.0"
 
-"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.4:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -26090,7 +25896,7 @@ mkdirp@0.5.3:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@0.5.5, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.5, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -27209,13 +27015,6 @@ nopt@1.0.10:
   dependencies:
     abbrev "1"
 
-nopt@3.x:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
 nopt@^4.0.1, nopt@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
@@ -27990,7 +27789,7 @@ on-headers@~1.0.1, on-headers@~1.0.2:
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@1.x, once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.3.3, once@^1.4.0, once@~1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.3.3, once@^1.4.0, once@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -28767,11 +28566,6 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-ms@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
-  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
-
 parse-node-version@^1.0.0, parse-node-version@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
@@ -29042,6 +28836,11 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-to-regexp@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
+  integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -30372,15 +30171,6 @@ prebuild-install@^7.0.0:
     tar-fs "^2.0.0"
     tunnel-agent "^0.6.0"
 
-prefixed-list@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prefixed-list/-/prefixed-list-1.0.1.tgz#929da401f225e6c088c6f4fedd8ec45085e511ca"
-  integrity sha1-kp2kAfIl5sCIxvT+3Y7EUIXlEco=
-  dependencies:
-    check-more-types "2.24.0"
-    lazy-ass "1.6.0"
-    ramda "0.24.1"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -30444,7 +30234,7 @@ pretty-error@^4.0.0:
 
 pretty-format@26.4.0, pretty-format@^24.9.0, pretty-format@^27.0.2:
   version "26.4.0"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-26.4.0.tgz#c08073f531429e9e5024049446f42ecc9f933a3b"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.4.0.tgz#c08073f531429e9e5024049446f42ecc9f933a3b"
   integrity sha512-mEEwwpCseqrUtuMbrJG4b824877pM5xald3AkilJ47Po2YLr97/siejYQHqj2oDQBeJNbu+Q0qUuekJ8F0NAPg==
   dependencies:
     "@jest/types" "^26.3.0"
@@ -30457,13 +30247,6 @@ pretty-hrtime@^1.0.0, pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-pretty-ms@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.0.tgz#45781273110caf35f55cab21a8a9bd403a233dc0"
-  integrity sha512-J3aPWiC5e9ZeZFuSeBraGxSkGMOvulSWsxDByOcbD1Pr75YL3LSNIKIb52WXbCLE1sS5s4inBBbryjF4Y05Ceg==
-  dependencies:
-    parse-ms "^2.1.0"
-
 pretty@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
@@ -31004,11 +30787,6 @@ railroad-diagrams@^1.0.0:
   resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
   integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
 
-ramda@0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
-  integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=
-
 ramda@0.25.0, ramda@^0.25.0:
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
@@ -31777,7 +31555,7 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
-recast@0.10.33, recast@^0.10.10:
+recast@0.10.33:
   version "0.10.33"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.33.tgz#942808f7aa016f1fa7142c461d7e5704aaa8d697"
   integrity sha1-lCgI96oBbx+nFCxGHX5XBKqo1pc=
@@ -31797,6 +31575,16 @@ recast@0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+recast@^0.10.10:
+  version "0.10.43"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.43.tgz#b95d50f6d60761a5f6252e15d80678168491ce7f"
+  integrity sha1-uV1Q9tYHYaX2JS4V2AZ4FoSRzn8=
+  dependencies:
+    ast-types "0.8.15"
+    esprima-fb "~15001.1001.0-dev-harmony-fb"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
 recast@^0.11.0, recast@^0.11.17:
   version "0.11.23"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
@@ -32448,7 +32236,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@1.1.7, resolve@1.1.x:
+resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
@@ -33327,20 +33115,6 @@ serve-handler@6.1.2:
     path-to-regexp "2.2.1"
     range-parser "1.2.0"
 
-serve-handler@^6.1.3:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.3.tgz#1bf8c5ae138712af55c758477533b9117f6435e8"
-  integrity sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==
-  dependencies:
-    bytes "3.0.0"
-    content-disposition "0.5.2"
-    fast-url-parser "1.1.3"
-    mime-types "2.1.18"
-    minimatch "3.0.4"
-    path-is-inside "1.0.2"
-    path-to-regexp "2.2.1"
-    range-parser "1.2.0"
-
 serve-index@^1.7.2, serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -34124,7 +33898,7 @@ socket.io-client@4.0.1:
 
 socket.io-parser@4.0.4, socket.io-parser@~3.3.0, socket.io-parser@~3.4.0, socket.io-parser@~4.0.3, socket.io-parser@~4.0.4:
   version "4.0.4"
-  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz#9ea21b0d61508d18196ef04a2c6b9ab630f4c2b0"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.0.4.tgz#9ea21b0d61508d18196ef04a2c6b9ab630f4c2b0"
   integrity sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==
   dependencies:
     "@types/component-emitter" "^1.2.10"
@@ -34367,7 +34141,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.10, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.19, source-map-support@^0.5.3, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19, source-map-support@~0.5.20:
+source-map-support@^0.5.10, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.19, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -34417,13 +34191,6 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, sour
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
-  integrity sha1-2rc/vPwrqBm03gO9b26qSBZLP50=
-  dependencies:
-    amdefine ">=0.0.4"
-
 sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -35339,13 +35106,6 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.1.0:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -36636,7 +36396,7 @@ typescript@^4.2.3, typescript@^4.4.4:
 
 ua-parser-js@0.7.24, ua-parser-js@^0.7.18:
   version "0.7.24"
-  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.24.tgz#8d3ecea46ed4f1f1d63ec25f17d8568105dc027c"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.24.tgz#8d3ecea46ed4f1f1d63ec25f17d8568105dc027c"
   integrity sha512-yo+miGzQx5gakzVK3QFfN0/L9uVhosXBBO7qmnk7c2iw1IhL212wfA3zbnI54B0obGwC/5NWub/iT9sReMx+Fw==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
@@ -37296,7 +37056,7 @@ uuid@8.3.2, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2, uuid@^3.3.3, uuid@^3.4.0:
+uuid@^3.0.0, uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3, uuid@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
@@ -37790,7 +37550,7 @@ vue-router@4, vue-router@^4.0.0:
 
 vue-template-compiler@2.6.12:
   version "2.6.12"
-  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
   integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
   dependencies:
     de-indent "^1.0.2"
@@ -38242,16 +38002,6 @@ webpack-livereload-plugin@2.3.0:
     portfinder "^1.0.17"
     tiny-lr "^1.1.1"
 
-webpack-log@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
-  integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==
-  dependencies:
-    chalk "^2.1.0"
-    log-symbols "^2.1.0"
-    loglevelnext "^1.0.1"
-    uuid "^3.1.0"
-
 webpack-log@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
@@ -38855,15 +38605,6 @@ wrap-ansi@^3.0.1:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
-wrap-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-4.0.0.tgz#b3570d7c70156159a2d42be5cc942e957f7b1131"
-  integrity sha512-uMTsj9rDb0/7kk1PbcbCcwvHUxp60fGDB/NNXpVa0Q+ic/e7y5+BwTxKfQ33VYgDppSwi/FBzpetYzo8s6tfbg==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
-
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
@@ -38998,7 +38739,7 @@ ws@8.2.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.2.tgz#ca684330c6dd6076a737250ed81ac1606cb0a63e"
   integrity sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw==
 
-"ws@^5.2.0 || ^6.0.0 || ^7.0.0", ws@^7.2.0, ws@^7.4.1:
+"ws@^5.2.0 || ^6.0.0 || ^7.0.0", ws@^7.2.0:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
@@ -39010,7 +38751,7 @@ ws@^6.1.2, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^8.1.0, ws@^8.4.2, ws@^8.5.0:
+ws@^8.0.0, ws@^8.1.0, ws@^8.4.2, ws@^8.5.0:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
   integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
@@ -39223,10 +38964,10 @@ yaml@^1.10.0, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.0.0-8:
-  version "2.0.0-8"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.0.0-8.tgz#226365f0d804ba7fb8cc2b527a00a7a4a3d8ea5f"
-  integrity sha512-QaYgJZMfWD6fKN/EYMk6w1oLWPCr1xj9QaPSZW5qkDb3y8nGCXhy2Ono+AF4F+CSL/vGcqswcAT0BaS//pgD2A==
+yaml@^2.0.0, yaml@^2.0.0-8:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.0.1.tgz#71886d6021f3da28169dbefde78d4dd0f8d83650"
+  integrity sha512-1NpAYQ3wjzIlMs0mgdBmYzLkFgWBIWrzYVDYfrixhoFNNgJ444/jT2kUT2sicRbJES3oQYRZugjB6Ro8SjKeFg==
 
 yargs-parser@13.1.1:
   version "13.1.1"