Rewrite JS/HTML using AST-based approach

circle.yml

@@ -330,7 +330,7 @@ jobs:
       # run unit tests from each individual package
       - run: yarn test
       - verify-mocha-results:
-          expectedResultCount: 6
+          expectedResultCount: 8
       - store_test_results:
           path: /tmp/cypress
       # CLI tests generate HTML files with sample CLI command output

cli/package.json

@@ -89,7 +89,7 @@
     "resolve-pkg": "2.0.0",
     "shelljs": "0.8.3",
     "sinon": "7.2.2",
-    "snap-shot-it": "7.9.2",
+    "snap-shot-it": "7.9.3",
     "spawn-mock": "1.0.0",
     "strip-ansi": "4.0.0"
   },

cli/schema/cypress.schema.json

@@ -228,6 +228,11 @@
       "type": "boolean",
       "default": false,
       "description": "If `true`, Cypress will add `sameSite` values to the objects yielded from `cy.setCookie()`, `cy.getCookie()`, and `cy.getCookies()`. This will become the default behavior in Cypress 5.0."
+    },
+    "experimentalSourceRewriting": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm."
     }
   }
 }

cli/types/index.d.ts

@@ -393,6 +393,11 @@ declare namespace Cypress {
      */
     log(options: Partial<LogConfig>): Log
 
+    /**
+     * Access and set Cypress's internal state.
+     */
+    state: State
+
     /**
      * @see https://on.cypress.io/api/commands
      */
@@ -478,11 +483,11 @@ declare namespace Cypress {
       /**
        * Returns a boolean indicating whether an object is a window object.
        */
-      isWindow(obj: any): boolean
+      isWindow(obj: any): obj is Window
       /**
        * Returns a boolean indicating whether an object is a jQuery object.
        */
-      isJquery(obj: any): boolean
+      isJquery(obj: any): obj is JQuery
       isInputType(element: JQuery | HTMLElement, type: string | string[]): boolean
       stringify(element: JQuery | HTMLElement, form: string): string
       getElements(element: JQuery): JQuery | HTMLElement[]
@@ -2207,6 +2212,10 @@ declare namespace Cypress {
     log: boolean
   }
 
+  interface State {
+    (k: '$autIframe', v?: JQuery<HTMLIFrameElement>): JQuery<HTMLIFrameElement> | undefined
+  }
+
   /**
    * Options that control how long Test Runner is waiting for command to succeed
    */
@@ -2456,6 +2465,12 @@ declare namespace Cypress {
      * @default false
      */
     experimentalGetCookiesSameSite: boolean
+    /**
+     * Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement
+     * algorithm.
+     * @default false
+     */
+    experimentalSourceRewriting: boolean
   }
 
   /**

package.json

@@ -51,7 +51,7 @@
     "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src --exclude e2e.coffee,e2e.js",
     "stop-only-all": "yarn stop-only --folder packages",
     "pretest": "yarn ensure-deps",
-    "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{electron,extension,https-proxy,launcher,network,reporter,runner,socket}'\"",
+    "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{electron,extension,https-proxy,launcher,network,proxy,rewriter,reporter,runner,socket}'\"",
     "test-debug": "lerna exec yarn test-debug --ignore \"'@packages/{coffee,desktop-gui,driver,root,static,web-config}'\"",
     "pretest-e2e": "yarn ensure-deps",
     "test-e2e": "lerna exec yarn test-e2e --ignore \"'@packages/{coffee,desktop-gui,driver,root,static,web-config}'\"",
@@ -184,7 +184,7 @@
     "shelljs": "0.8.3",
     "shx": "0.3.2",
     "sinon": "7.3.2",
-    "snap-shot-it": "7.9.1",
+    "snap-shot-it": "7.9.3",
     "start-server-and-test": "1.10.8",
     "stop-only": "3.0.1",
     "strip-ansi": "4.0.0",

packages/driver/src/cypress.js

@@ -32,6 +32,7 @@ const $utils = require('./cypress/utils')
 const $errUtils = require('./cypress/error_utils')
 const $scriptUtils = require('./cypress/script_utils')
 const browserInfo = require('./cypress/browser')
+const resolvers = require('./cypress/resolvers')
 const debug = require('debug')('cypress:driver:cypress')
 
 const proxies = {
@@ -607,6 +608,8 @@ $Cypress.prototype.Location = $Location
 $Cypress.prototype.Log = $Log
 $Cypress.prototype.LocalStorage = $LocalStorage
 $Cypress.prototype.Mocha = $Mocha
+$Cypress.prototype.resolveWindowReference = resolvers.resolveWindowReference
+$Cypress.prototype.resolveLocationReference = resolvers.resolveLocationReference
 $Cypress.prototype.Mouse = $Mouse
 $Cypress.prototype.Runner = $Runner
 $Cypress.prototype.Server = $Server

packages/driver/src/cypress/error_messages.coffee

@@ -841,6 +841,18 @@ module.exports = {
   ng:
     no_global: "Angular global (`window.angular`) was not found in your window. You cannot use #{cmd('ng')} methods without angular."
 
+  proxy:
+    js_rewriting_failed: """
+    An error occurred in the Cypress proxy layer while rewriting your source code. This is a bug in Cypress.
+
+    JS URL: {{url}}
+
+    Original error:
+
+    {{errMessage}}
+    {{errStack}}
+    """
+
   reload:
     invalid_arguments: {
       message: "#{cmd('reload')} can only accept a boolean or `options` as its arguments."

packages/driver/src/cypress/resolvers.ts

@@ -0,0 +1,159 @@
+import _ from 'lodash'
+import $Cypress from '../..'
+
+/**
+ * Fix property reads and writes that could potentially help the AUT to break out of its iframe.
+ *
+ * @param currentWindow the value of `globalThis` from the scope of the window reference in question
+ * @param accessedObject a reference to the object being accessed
+ * @param accessedProp the property name being accessed (Symbol/number properties are not intercepted)
+ * @param value the right-hand side of an assignment operation (accessedObject.accessedProp = value)
+ */
+export function resolveWindowReference (this: typeof $Cypress, currentWindow: Window, accessedObject: Window | any, accessedProp: string, value?: any) {
+  const { dom, state } = this
+
+  const getTargetValue = () => {
+    const targetValue = accessedObject[accessedProp]
+
+    if (dom.isWindow(accessedObject) && accessedProp === 'location') {
+      const targetLocation = resolveLocationReference(accessedObject)
+
+      if (isValPassed) {
+        return targetLocation.href = value
+      }
+
+      return targetLocation
+    }
+
+    if (_.isFunction(targetValue)) {
+      return targetValue.bind(accessedObject)
+    }
+
+    return targetValue
+  }
+
+  const setTargetValue = () => {
+    if (dom.isWindow(accessedObject) && accessedProp === 'location') {
+      const targetLocation = resolveLocationReference(accessedObject)
+
+      return targetLocation.href = value
+    }
+
+    return (accessedObject[accessedProp] = value)
+  }
+
+  const isValPassed = arguments.length === 4
+
+  const $autIframe = state('$autIframe')
+
+  if (!$autIframe) {
+    // missing AUT iframe, resolve the property access normally
+    if (isValPassed) {
+      return setTargetValue()
+    }
+
+    return getTargetValue()
+  }
+
+  const contentWindow = $autIframe.prop('contentWindow')
+
+  if (accessedObject === currentWindow.top) {
+    // doing a property access on topmost window, adjust accessedObject
+    accessedObject = contentWindow
+  }
+
+  const targetValue = getTargetValue()
+
+  if (!dom.isWindow(targetValue) || dom.isJquery(targetValue)) {
+    if (isValPassed) {
+      return setTargetValue()
+    }
+
+    return targetValue
+  }
+
+  // targetValue is a reference to a Window object
+
+  if (accessedProp === 'top') {
+    // note: `isValPassed` is not considered here because `window.top` is readonly
+    return contentWindow
+  }
+
+  if (accessedProp === 'parent') {
+    // note: `isValPassed` is not considered here because `window.parent` is readonly
+    if (targetValue === currentWindow.top) {
+      return contentWindow
+    }
+
+    return targetValue
+  }
+
+  throw new Error('unhandled resolveWindowReference')
+}
+
+/**
+ * Fix `window.location` usages that would otherwise navigate to the wrong URL.
+ *
+* @param currentWindow the value of `globalThis` from the scope of the location reference in question
+ */
+export function resolveLocationReference (currentWindow: Window) {
+  // @ts-ignore
+  if (currentWindow.__cypressFakeLocation) {
+    // @ts-ignore
+    return currentWindow.__cypressFakeLocation
+  }
+
+  function _resolveHref (href: string) {
+    const a = currentWindow.document.createElement('a')
+
+    a.href = href
+
+    // a.href will be resolved into the correct fully-qualified URL
+    return a.href
+  }
+
+  function assign (href: string) {
+    return currentWindow.location.assign(_resolveHref(href))
+  }
+
+  function replace (href: string) {
+    return currentWindow.location.replace(_resolveHref(href))
+  }
+
+  function setHref (href: string) {
+    return currentWindow.location.href = _resolveHref(href)
+  }
+
+  const locationKeys = Object.keys(currentWindow.location)
+
+  const fakeLocation = {}
+
+  _.reduce(locationKeys, (acc, cur) => {
+    // set a dummy value, the proxy will handle sets/gets
+    acc[cur] = Symbol.for('Proxied')
+
+    return acc
+  }, {})
+
+  // @ts-ignore
+  return currentWindow.__cypressFakeLocation = new Proxy(fakeLocation, {
+    get (_target, prop, _receiver) {
+      if (prop === 'assign') {
+        return assign
+      }
+
+      if (prop === 'replace') {
+        return replace
+      }
+
+      return currentWindow.location[prop]
+    },
+    set (_obj, prop, value) {
+      if (prop === 'href') {
+        return setHref(value)
+      }
+
+      return currentWindow.location[prop] = value
+    },
+  })
+}