5.5.0 Regression: Cannot load script with integrity attribute

[Tanuel]

Current behavior

When trying to load google recaptcha, it will load another script, but the integrity check will fail. This error happens since upgrading to 5.5.0

Desired behavior

captcha can be loaded correctly

Test code to reproduce

https://github.com/Tanuel/cypress-test-tiny

• npm install
• npm run test
  

Versions

Error occured on: 5.5.0
Last working Version: 5.4.0

Let me know if you need more information

[mstreng-bhs]

Same problem after upgrading from 5.3.0 to 5.5.0

[jennifer-shehane]

Yes, I can recreate this from the provided repo https://github.com/Tanuel/cypress-test-tiny. This was introduced in 5.5.0. This was introduced in this PR: #8827. I git bisected to this commit where it started failing: 19fdf43

5.4.0

5.5.0

[sergeyblohin]

I faced a similar problem.
When Cypress was updated from 5.4.0 to 5.5.0, my ReCaptcha was no longer displayed.
I found a workaround allowing me to display ReCaptcha on a page.
Perhaps somebody could use it.

We add the following line to cypress.json:

{
  "experimentalNetworkStubbing": true,
}

We add the following code to cypress/support/index.js:

before(() => {
  cy.server();
  cy.route2('**/recaptcha/api.js', {fixture: 'google/recaptcha/api.js'});
});

Add the following code to cypress/fixtures/google/recaptcha/api.js.txt:

/* PLEASE DO NOT COPY OR PASTE THIS CODE. */
(function () {
  var w = window, C = '___grecaptcha_cfg', cfg = w[C] = w[C] || {}, N = 'grecaptcha';
  var gr = w[N] = w[N] || {};
  gr.ready = gr.ready || function (f) {
    (cfg['fns'] = cfg['fns'] || []);
  };
  w['__recaptcha_api'] = 'https://www.google.com/recaptcha/api2/';
  (cfg['render'] = cfg['render'] || []).push('onload');
  w['__google_recaptcha_client'] = true;
  var d = document, po = d.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://www.gstatic.com/recaptcha/releases/T9w1ROdplctW2nVKvNJYXH8o/recaptcha__en.js';
  po.crossOrigin = 'anonymous';
  // po.integrity = 'sha384-3QFmGa9WBVUnmTTGehi+1Uin1pmBuS/I5R1Ce52Aiiuviet65v+bH12eR4+kUUcx';
  var e = d.querySelector('script[nonce]'), n = e && (e['nonce'] || e.getAttribute('nonce'));
  if(n) {
    po.setAttribute('nonce', n);
  }
  var s = d.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();

Note that in api.js.txt I commented line 16.

You can now work with `integrity' in Cypress 5.5.0.