feat: Selective CSP header stripping from HTTPResponse

cli/CHANGELOG.md

@@ -5,6 +5,7 @@ _Released 06/20/2023 (PENDING)_
 
 **Features:**
 
+- Cypress can now test pages with targeted `Content-Security-Policy` and `Content-Security-Policy-Report-Only` header directives by specifying the allow list via the [`experimentalCspAllowList`](https://docs.cypress.io/guides/references/configuration#Experimental-Csp-Allow-List) configuration option. Addresses [#1030](https://github.com/cypress-io/cypress/issues/1030). Addressed in [#26483](https://github.com/cypress-io/cypress/pull/26483)
 - The [`videoCompression`](https://docs.cypress.io/guides/references/configuration#Videos) configuration option now accepts both a boolean or a Constant Rate Factor (CRF) number between `1` and `51`. The `videoCompression` default value is still `32` CRF and when `videoCompression` is set to `true` the default of `32` CRF will be used. Addresses [#26658](https://github.com/cypress-io/cypress/issues/26658).
 
 **Bugfixes:**

cli/types/cypress.d.ts

@@ -2672,6 +2672,8 @@ declare namespace Cypress {
     force: boolean
   }
 
+  type experimentalCspAllowedDirectives = 'default-src' | 'child-src' | 'frame-src' | 'script-src' | 'script-src-elem' | 'form-action'
+
   type scrollBehaviorOptions = false | 'center' | 'top' | 'bottom' | 'nearest'
 
   /**
@@ -3051,6 +3053,19 @@ declare namespace Cypress {
      * @default 'top'
      */
     scrollBehavior: scrollBehaviorOptions
+    /**
+     * Indicates whether Cypress should allow CSP header directives from the application under test.
+     * - When this option is set to `false`, Cypress will strip the entire CSP header.
+     * - When this option is set to `true`, Cypress will only to strip directives that would interfere
+     * with or inhibit Cypress functionality.
+     * - When this option to an array of allowable directives (`[ 'default-src', ... ]`), the directives
+     * specified will remain in the response headers.
+     *
+     * Please see the documentation for more information.
+     * @see https://on.cypress.io/configuration#experimentalCspAllowList
+     * @default false
+     */
+    experimentalCspAllowList: boolean | experimentalCspAllowedDirectives[],
     /**
      * Allows listening to the `before:run`, `after:run`, `before:spec`, and `after:spec` events in the plugins file during interactive mode.
      * @default false

packages/app/cypress.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   reporterOptions: {
     configFile: '../../mocha-reporter-config.json',
   },
+  experimentalCspAllowList: false,
   experimentalInteractiveRunEvents: true,
   component: {
     experimentalSingleTabRunMode: true,

packages/app/cypress/fixtures/debug-Failing/gql-CloudViewerAndProject_RequiredData.json

@@ -83,6 +83,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/app/cypress/fixtures/debug-Failing/gql-HeaderBar_HeaderBarQuery.json

@@ -59,6 +59,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/app/cypress/fixtures/debug-Failing/gql-SpecsPageContainer.json

@@ -444,6 +444,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/app/cypress/fixtures/debug-Passing/gql-CloudViewerAndProject_RequiredData.json

@@ -83,6 +83,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/app/cypress/fixtures/debug-Passing/gql-HeaderBar_HeaderBarQuery.json

@@ -59,6 +59,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/app/cypress/fixtures/debug-Passing/gql-SpecsPageContainer.json

@@ -1445,6 +1445,11 @@
           "from": "default",
           "field": "execTimeout"
         },
+        {
+          "value": false,
+          "from": "default",
+          "field": "experimentalCspAllowList"
+        },
         {
           "value": false,
           "from": "default",

packages/config/__snapshots__/index.spec.ts.js

@@ -34,6 +34,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   },
   'env': {},
   'execTimeout': 60000,
+  'experimentalCspAllowList': false,
   'experimentalFetchPolyfill': false,
   'experimentalInteractiveRunEvents': false,
   'experimentalRunAllSpecs': false,
@@ -121,6 +122,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   },
   'env': {},
   'execTimeout': 60000,
+  'experimentalCspAllowList': false,
   'experimentalFetchPolyfill': false,
   'experimentalInteractiveRunEvents': false,
   'experimentalRunAllSpecs': false,
@@ -204,6 +206,7 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   'e2e',
   'env',
   'execTimeout',
+  'experimentalCspAllowList',
   'experimentalFetchPolyfill',
   'experimentalInteractiveRunEvents',
   'experimentalRunAllSpecs',

packages/config/__snapshots__/validation.spec.ts.js

@@ -225,6 +225,31 @@ exports['config/src/validation .isStringOrFalse returns error message when value
   'type': 'a string or false',
 }
 
+exports['not an array error message'] = {
+  'key': 'fakeKey',
+  'value': 'fakeValue',
+  'type': 'an array including any of these values: [true, false]',
+}
+
+exports['not a subset of error message'] = {
+  'key': 'fakeKey',
+  'value': [
+    null,
+  ],
+  'type': 'an array including any of these values: ["fakeValue", "fakeValue1", "fakeValue2"]',
+}
+
+exports['not all in subset error message'] = {
+  'key': 'fakeKey',
+  'value': [
+    'fakeValue',
+    'fakeValue1',
+    'fakeValue2',
+    'fakeValue3',
+  ],
+  'type': 'an array including any of these values: ["fakeValue", "fakeValue1", "fakeValue2"]',
+}
+
 exports['invalid lower bound'] = {
   'key': 'test',
   'value': -1,

packages/config/src/options.ts

@@ -198,6 +198,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     defaultValue: 60000,
     validation: validate.isNumber,
     overrideLevel: 'any',
+  }, {
+    name: 'experimentalCspAllowList',
+    defaultValue: false,
+    validation: validate.validateAny(validate.isBoolean, validate.isArrayIncludingAny('script-src-elem', 'script-src', 'default-src', 'form-action', 'child-src', 'frame-src')),
+    overrideLevel: 'never',
+    requireRestartOnChange: 'server',
   }, {
     name: 'experimentalFetchPolyfill',
     defaultValue: false,

packages/config/src/validation.ts

@@ -33,14 +33,29 @@ const _isFullyQualifiedUrl = (value: any): ErrResult | boolean => {
   return _.isString(value) && /^https?\:\/\//.test(value)
 }
 
-const isArrayOfStrings = (value: any): ErrResult | boolean => {
+const isStringArray = (value: any): ErrResult | boolean => {
   return _.isArray(value) && _.every(value, _.isString)
 }
 
 const isFalse = (value: any): boolean => {
   return value === false
 }
 
+type ValidationResult = ErrResult | boolean | string;
+type ValidationFn = (key: string, value: any) => ValidationResult
+
+export const validateAny = (...validations: ValidationFn[]): ValidationFn => {
+  return (key: string, value: any): ValidationResult => {
+    return validations.reduce((result: ValidationResult, validation: ValidationFn) => {
+      if (result === true) {
+        return result
+      }
+
+      return validation(key, value)
+    }, false)
+  }
+}
+
 /**
  * Validates a single browser object.
  * @returns {string|true} Returns `true` if the object is matching browser object schema. Returns an error message if it does not.
@@ -148,6 +163,29 @@ export const isOneOf = (...values: any[]): ((key: string, value: any) => ErrResu
   }
 }
 
+/**
+ * Checks if given array value for a key includes only members of the provided values.
+ * @example
+  ```
+  validate = v.isArrayIncludingAny("foo", "bar", "baz")
+  validate("example", ["foo"]) // true
+  validate("example", ["bar", "baz"]) // true
+  validate("example", ["foo", "else"]) // error message string
+  validate("example", ["foo", "bar", "baz", "else"]) // error message string
+  ```
+  */
+export const isArrayIncludingAny = (...values: any[]): ((key: string, value: any) => ErrResult | true) => {
+  const validValues = values.map((a) => str(a)).join(', ')
+
+  return (key, value) => {
+    if (!Array.isArray(value) || !value.every((v) => values.includes(v))) {
+      return errMsg(key, value, `an array including any of these values: [${validValues}]`)
+    }
+
+    return true
+  }
+}
+
 /**
  * Validates whether the supplied set of cert information is valid
  * @returns {string|true} Returns `true` if the information set is valid. Returns an error message if it is not.
@@ -332,15 +370,15 @@ export function isFullyQualifiedUrl (key: string, value: any): ErrResult | true
 }
 
 export function isStringOrArrayOfStrings (key: string, value: any): ErrResult | true {
-  if (_.isString(value) || isArrayOfStrings(value)) {
+  if (_.isString(value) || isStringArray(value)) {
     return true
   }
 
   return errMsg(key, value, 'a string or an array of strings')
 }
 
 export function isNullOrArrayOfStrings (key: string, value: any): ErrResult | true {
-  if (_.isNull(value) || isArrayOfStrings(value)) {
+  if (_.isNull(value) || isStringArray(value)) {
     return true
   }
 

packages/config/test/project/utils.spec.ts

@@ -859,6 +859,34 @@ describe('config/src/project/utils', () => {
       })
     })
 
+    it('experimentalCspAllowList=false', function () {
+      return this.defaults('experimentalCspAllowList', false)
+    })
+
+    it('experimentalCspAllowList=true', function () {
+      return this.defaults('experimentalCspAllowList', true, {
+        experimentalCspAllowList: true,
+      })
+    })
+
+    it('experimentalCspAllowList=[]', function () {
+      return this.defaults('experimentalCspAllowList', [], {
+        experimentalCspAllowList: [],
+      })
+    })
+
+    it('experimentalCspAllowList=default-src|script-src', function () {
+      return this.defaults('experimentalCspAllowList', ['default-src', 'script-src'], {
+        experimentalCspAllowList: ['default-src', 'script-src'],
+      })
+    })
+
+    it('experimentalCspAllowList=["default-src","script-src"]', function () {
+      return this.defaults('experimentalCspAllowList', ['default-src', 'script-src'], {
+        experimentalCspAllowList: ['default-src', 'script-src'],
+      })
+    })
+
     it('resets numTestsKeptInMemory to 0 when runMode', function () {
       return mergeDefaults({ projectRoot: '/foo/bar/', supportFile: false }, { isTextTerminal: true }, {}, this.getFilesByGlob)
       .then((cfg) => {
@@ -1053,6 +1081,7 @@ describe('config/src/project/utils', () => {
             execTimeout: { value: 60000, from: 'default' },
             experimentalModifyObstructiveThirdPartyCode: { value: false, from: 'default' },
             experimentalSkipDomainInjection: { value: null, from: 'default' },
+            experimentalCspAllowList: { value: false, from: 'default' },
             experimentalFetchPolyfill: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalMemoryManagement: { value: false, from: 'default' },
@@ -1150,6 +1179,7 @@ describe('config/src/project/utils', () => {
             execTimeout: { value: 60000, from: 'default' },
             experimentalModifyObstructiveThirdPartyCode: { value: false, from: 'default' },
             experimentalSkipDomainInjection: { value: null, from: 'default' },
+            experimentalCspAllowList: { value: false, from: 'default' },
             experimentalFetchPolyfill: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalMemoryManagement: { value: false, from: 'default' },