feat: add removeSRIAttributes config option to strip SRI from first-party resources (#34127)

Author: mschile

cli/CHANGELOG.md

@@ -1,10 +1,14 @@
 <!-- See ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 15.17.1
+## 15.18.0
 
 **Performance:**
 
 - Fixed an issue where an application that repeatedly threw the same uncaught exception (for example, a benign `ResizeObserver loop ...` notification fired on every animation frame) could exhaust renderer memory and crash the browser. Consecutive identical uncaught exceptions within a test now collapse into a single, updating command-log entry, and a handled (suppressed) uncaught exception no longer captures a DOM snapshot. Addresses [#27415](https://github.com/cypress-io/cypress/issues/27415).
 
+**Features:**
+
+- Added a `removeSRIAttributes` configuration option. When enabled, Cypress strips the `integrity` attribute from `<script>` and `<link>` elements on first-party resources so they are not blocked by Subresource Integrity (SRI) enforcement after Cypress rewrites them. This covers `integrity` set via static HTML, a JavaScript string literal, and runtime DOM assignment (including the `webpack-subresource-integrity` pattern used for lazily-loaded chunks). Addresses [#34124](https://github.com/cypress-io/cypress/issues/34124) and [#18315](https://github.com/cypress-io/cypress/issues/18315).
+
 **Bugfixes:**
 
 - Fixed an issue where calling `req.destroy()` or using `{ forceNetworkError: true }` inside a [`cy.intercept()`](https://on.cypress.io/intercept) handler in experimental WebKit caused infinite request loops. Fixes [#23810](https://github.com/cypress-io/cypress/issues/23810). Fixed in [#33948](https://github.com/cypress-io/cypress/pull/33948).

cli/types/cypress.d.ts

@@ -3074,6 +3074,15 @@ declare namespace Cypress {
      * @see https://on.cypress.io/configuration#modifyObstructiveCode
      */
     modifyObstructiveCode: boolean
+    /**
+     * Whether Cypress will strip the `integrity` attribute from `<script>` and `<link>` elements
+     * on first-party resources so they are not blocked by Subresource Integrity (SRI) enforcement
+     * after the proxy rewrites them (under `modifyObstructiveCode`). Covers `integrity` set via
+     * static HTML, a JavaScript string literal, or runtime DOM assignment. Third-party resources
+     * are only rewritten — and have their SRI stripped — under `experimentalModifyObstructiveThirdPartyCode`.
+     * @default false
+     */
+    removeSRIAttributes: boolean
     /**
      * Time, in milliseconds, to wait for an XHR request to go out in a [cy.wait()](https://on.cypress.io/wait) command
      * @default 5000
@@ -3233,7 +3242,8 @@ declare namespace Cypress {
     experimentalInteractiveRunEvents: boolean
     /**
      * Whether Cypress will search for and replace obstructive code in third party .js or .html files.
-     * NOTE: Setting this flag to true removes Subresource Integrity (SRI).
+     * NOTE: Setting this flag to true removes Subresource Integrity (SRI) from third-party resources.
+     * To strip SRI from first-party resources as well, use `removeSRIAttributes`.
      * Please see https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity.
      * This option has no impact on experimentalSourceRewriting and is only used with the
      * non-experimental source rewriter.

packages/config/src/options.ts

@@ -346,6 +346,11 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     defaultValue: 20,
     validation: validate.isNumber,
     overrideLevel: 'any',
+  }, {
+    name: 'removeSRIAttributes',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    requireRestartOnChange: 'server',
   }, {
     name: 'reporter',
     defaultValue: 'spec',

packages/config/test/__snapshots__/index.spec.ts.snap

@@ -71,6 +71,7 @@ exports[`config/src/index > .getDefaultValues > returns list of public config ke
   "port": null,
   "projectId": null,
   "redirectionLimit": 20,
+  "removeSRIAttributes": false,
   "repoRoot": null,
   "reporter": "spec",
   "reporterOptions": null,
@@ -168,6 +169,7 @@ exports[`config/src/index > .getDefaultValues > returns list of public config ke
   "port": null,
   "projectId": null,
   "redirectionLimit": 20,
+  "removeSRIAttributes": false,
   "repoRoot": null,
   "reporter": "spec",
   "reporterOptions": null,
@@ -247,6 +249,7 @@ exports[`config/src/index > .getPublicConfigKeys > returns list of public config
   "port",
   "projectId",
   "redirectionLimit",
+  "removeSRIAttributes",
   "reporter",
   "reporterOptions",
   "requestTimeout",

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

@@ -1335,6 +1335,7 @@ describe('config/src/project/utils', () => {
           port: { value: 1234, from: 'cli' },
           projectId: { value: null, from: 'default' },
           redirectionLimit: { value: 20, from: 'default' },
+          removeSRIAttributes: { value: false, from: 'default' },
           reporter: { value: 'json', from: 'cli' },
           resolvedNodePath: { value: null, from: 'default' },
           resolvedNodeVersion: { value: null, from: 'default' },
@@ -1468,6 +1469,7 @@ describe('config/src/project/utils', () => {
           port: { value: 2020, from: 'config' },
           projectId: { value: 'projectId123', from: 'env' },
           redirectionLimit: { value: 20, from: 'default' },
+          removeSRIAttributes: { value: false, from: 'default' },
           reporter: { value: 'spec', from: 'default' },
           resolvedNodePath: { value: null, from: 'default' },
           resolvedNodeVersion: { value: null, from: 'default' },

packages/driver/cypress.config.ts

@@ -27,6 +27,7 @@ export const baseConfig: Cypress.ConfigOptions = {
   e2e: {
     experimentalOriginDependencies: true,
     experimentalModifyObstructiveThirdPartyCode: true,
+    removeSRIAttributes: true,
     setupNodeEvents: (on, config) => {
       on('task', {
         log (message) {

packages/driver/cypress/e2e/e2e/encoding.cy.ts

@@ -177,7 +177,13 @@ describe('encoding', () => {
 
       // in firefox, the browser displays the encoded response whereas in other browsers, it fails to load the page
       if (Cypress.isBrowser({ family: 'firefox' })) {
-        cy.get('body').should('contain.text', '�������t�Ѓ�*��z').then(() => done())
+        cy.get('body')
+        // firefox renders the raw, undecoded brotli bytes as text rather than failing to load.
+        // Assert on that garbled state rather than the exact compressed bytes, which vary with
+        // the proxy-injected runner bundle.
+        .should('contain.text', '\uFFFD')
+        .and('not.contain.text', 'encoding-br-html')
+        .then(() => done())
       } else {
         cy.on('fail', (err) => {
           expect(err.message).to.contain('Timed out after waiting `500ms` for your remote page to load.')
@@ -191,7 +197,13 @@ describe('encoding', () => {
 
       // in firefox, the browser displays the encoded response whereas in other browsers, it fails to load the page
       if (Cypress.isBrowser({ family: 'firefox' })) {
-        cy.get('body').should('contain.text', '�������t�Ѓ�*��z').then(() => done())
+        cy.get('body')
+        // firefox renders the raw, undecoded brotli bytes as text rather than failing to load.
+        // Assert on that garbled state rather than the exact compressed bytes, which vary with
+        // the proxy-injected runner bundle.
+        .should('contain.text', '\uFFFD')
+        .and('not.contain.text', 'encoding-br-html')
+        .then(() => done())
       } else {
         cy.on('fail', (err) => {
           expect(err.message).to.contain('Timed out after waiting `500ms` for your remote page to load.')

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

@@ -94,6 +94,29 @@ describe('Integrity Preservation', { browser: '!webkit' }, () => {
           cy.get('#dynamic-set-integrity-script').should('have.attr', 'cypress-stripped-integrity')
         })
       })
+
+      it(`preserves integrity with a <script> whose integrity property is set at runtime with ${algo} integrity.`, () => {
+        cy.then(() => {
+          const compiledTemplate = templateExecutor({
+            dynamicScriptPropertyInjection: true,
+            integrityValue: `${algo.toLowerCase()}-${integrityJSDigests[algo]}`,
+          })
+
+          cy.intercept('http://www.foobar.com:3500/fixtures/scripts-with-integrity.html', compiledTemplate)
+        })
+
+        cy.visit('fixtures/primary-origin.html')
+        cy.get('[data-cy="integrity-link"]').click()
+        cy.origin('http://www.foobar.com:3500', () => {
+          // The added script, if integrity matches, should execute and
+          // add a <p> element with 'integrity script loaded' as the text
+          cy.get('#integrity', {
+            timeout: 1000,
+          }).should('contain', 'integrity script loaded')
+
+          cy.get('#dynamic-set-integrity-script').should('have.attr', 'cypress-stripped-integrity')
+        })
+      })
     })
   })
 
@@ -148,6 +171,97 @@ describe('Integrity Preservation', { browser: '!webkit' }, () => {
           cy.get('#dynamic-set-integrity-link').should('have.attr', 'cypress-stripped-integrity')
         })
       })
+
+      it(`preserves integrity with a <link> whose integrity property is set at runtime with ${algo} integrity.`, () => {
+        cy.then(() => {
+          const compiledTemplate = templateExecutor({
+            dynamicLinkPropertyInjection: true,
+            integrityValue: `${algo.toLowerCase()}-${integrityCSSDigests[algo]}`,
+          })
+
+          cy.intercept('http://www.foobar.com:3500/fixtures/scripts-with-integrity.html', compiledTemplate)
+        })
+
+        cy.visit('fixtures/primary-origin.html')
+        cy.get('[data-cy="integrity-link"]').click()
+        cy.origin('http://www.foobar.com:3500', () => {
+          cy.get('[data-cy="integrity-header"]', {
+            timeout: 1000,
+          }).then((integrityHeader) => {
+            // The added link, if integrity matches, should execute and
+            // add a color 'red' to the data-cy="integrity-header" element
+            expect(window.getComputedStyle(integrityHeader[0]).getPropertyValue('color')).to.equal('rgb(255, 0, 0)')
+          })
+
+          cy.get('#dynamic-set-integrity-link').should('have.attr', 'cypress-stripped-integrity')
+        })
+      })
+    })
+  })
+
+  // The cases above run cross-origin (handled by experimentalModifyObstructiveThirdPartyCode).
+  // These exercise removeSRIAttributes: the resource is served first-party (rewritten by
+  // modifyObstructiveCode, invalidating any pinned hash) in the primary AUT frame.
+  describe('first-party resources (removeSRIAttributes)', () => {
+    availableDigests.forEach((algo) => {
+      it(`preserves integrity with static <script> in first-party HTML with ${algo} integrity.`, () => {
+        cy.then(() => {
+          const compiledTemplate = templateExecutor({
+            staticScriptInjection: true,
+            integrityValue: `${algo.toLowerCase()}-${integrityJSDigests[algo]}`,
+          })
+
+          cy.intercept('http://localhost:3500/fixtures/scripts-with-integrity.html', compiledTemplate)
+        })
+
+        cy.visit('fixtures/scripts-with-integrity.html')
+        // The added script, if integrity matches, should execute and
+        // add a <p> element with 'integrity script loaded' as the text
+        cy.get('#integrity', {
+          timeout: 1000,
+        }).should('contain', 'integrity script loaded')
+
+        cy.get('#static-set-integrity-script').should('have.attr', 'cypress-stripped-integrity')
+      })
+
+      it(`preserves integrity with a first-party <script> whose integrity property is set at runtime with ${algo} integrity.`, () => {
+        cy.then(() => {
+          const compiledTemplate = templateExecutor({
+            dynamicScriptPropertyInjection: true,
+            integrityValue: `${algo.toLowerCase()}-${integrityJSDigests[algo]}`,
+          })
+
+          cy.intercept('http://localhost:3500/fixtures/scripts-with-integrity.html', compiledTemplate)
+        })
+
+        cy.visit('fixtures/scripts-with-integrity.html')
+        cy.get('#integrity', {
+          timeout: 1000,
+        }).should('contain', 'integrity script loaded')
+
+        cy.get('#dynamic-set-integrity-script').should('have.attr', 'cypress-stripped-integrity')
+      })
+
+      it(`preserves integrity with a first-party <link> whose integrity property is set at runtime with ${algo} integrity.`, () => {
+        cy.then(() => {
+          const compiledTemplate = templateExecutor({
+            dynamicLinkPropertyInjection: true,
+            integrityValue: `${algo.toLowerCase()}-${integrityCSSDigests[algo]}`,
+          })
+
+          cy.intercept('http://localhost:3500/fixtures/scripts-with-integrity.html', compiledTemplate)
+        })
+
+        cy.visit('fixtures/scripts-with-integrity.html')
+        cy.get('[data-cy="integrity-header"]', {
+          timeout: 1000,
+        }).then((integrityHeader) => {
+          // The added link, if integrity matches, should apply a color 'red' to the header
+          expect(window.getComputedStyle(integrityHeader[0]).getPropertyValue('color')).to.equal('rgb(255, 0, 0)')
+        })
+
+        cy.get('#dynamic-set-integrity-link').should('have.attr', 'cypress-stripped-integrity')
+      })
     })
   })
 })

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

@@ -69,6 +69,42 @@ describe('src/cross-origin/patches', { browser: '!webkit', defaultCommandTimeout
     })
   })
 
+  // el.integrity = … (the webpack-subresource-integrity pattern) is set via the reflected
+  // property; a regex can't rewrite a non-literal value, so the setter is overridden at runtime.
+  context('integrity property', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/primary-origin.html')
+      cy.get('a[data-cy="cross-origin-secondary-link"]').click()
+    })
+
+    it('redirects the reflected integrity property to cypress-stripped-integrity for HTMLScriptElement', () => {
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.window().then((win: Window) => {
+          const script = win.document.createElement('script')
+
+          script.integrity = 'sha-123'
+          expect(script.getAttribute('integrity')).to.be.null
+          expect(script.getAttribute('cypress-stripped-integrity')).to.equal('sha-123')
+          // the getter still reflects the value back so app code reading it is unaffected
+          expect(script.integrity).to.equal('sha-123')
+        })
+      })
+    })
+
+    it('redirects the reflected integrity property to cypress-stripped-integrity for HTMLLinkElement', () => {
+      cy.origin('http://www.foobar.com:3500', () => {
+        cy.window().then((win: Window) => {
+          const link = win.document.createElement('link')
+
+          link.integrity = 'sha-123'
+          expect(link.getAttribute('integrity')).to.be.null
+          expect(link.getAttribute('cypress-stripped-integrity')).to.equal('sha-123')
+          expect(link.integrity).to.equal('sha-123')
+        })
+      })
+    })
+  })
+
   context('fetch', () => {
     describe('from the AUT', () => {
       beforeEach(() => {

packages/driver/cypress/fixtures/scripts-with-integrity.html

@@ -46,7 +46,40 @@ <h1 data-cy="integrity-header">Integrity Scripts</h1>
       dynamicIntegrityScript.setAttribute('crossorigin', "anonymous")
       // the actual integrity of the file is: <%=data.integrityValue%>
       dynamicIntegrityScript.setAttribute('integrity', "<%=data.integrityValue%>")
-      
+
+      document.querySelector('head').appendChild(dynamicIntegrityScript)
+    </script>
+  <% } %>
+
+  <% if(data && data.dynamicScriptPropertyInjection) { %>
+    <!-- dynamic script injection, integrity set via the reflected property from a variable (webpack-subresource-integrity pattern) -->
+    <script type="text/javascript">
+      const dynamicIntegrityScript = document.createElement('script')
+      dynamicIntegrityScript.id = 'dynamic-set-integrity-script'
+      dynamicIntegrityScript.type = 'text/javascript'
+      dynamicIntegrityScript.src = 'integrity.js'
+      dynamicIntegrityScript.setAttribute('crossorigin', "anonymous")
+      dynamicIntegrityScript.setAttribute('data-script-type', 'dynamic')
+      // the actual integrity of the file is: <%=data.integrityValue%>
+      const scriptIntegrity = "<%=data.integrityValue%>"
+      dynamicIntegrityScript.integrity = scriptIntegrity
+
+      document.querySelector('head').appendChild(dynamicIntegrityScript)
+    </script>
+  <% } %>
+
+  <% if(data && data.dynamicLinkPropertyInjection) { %>
+    <!-- dynamic link injection, integrity set via the reflected property from a variable -->
+    <script id="dynamic-link-property-injection" type="text/javascript">
+      const dynamicIntegrityScript = document.createElement('link')
+      dynamicIntegrityScript.id = 'dynamic-set-integrity-link'
+      dynamicIntegrityScript.rel = "stylesheet"
+      dynamicIntegrityScript.href = 'integrity.css'
+      dynamicIntegrityScript.setAttribute('crossorigin', "anonymous")
+      // the actual integrity of the file is: <%=data.integrityValue%>
+      const linkIntegrity = "<%=data.integrityValue%>"
+      dynamicIntegrityScript.integrity = linkIntegrity
+
       document.querySelector('head').appendChild(dynamicIntegrityScript)
     </script>
   <% } %>