[Bug] Ember with Cypress: Failed to find a valid digest in the 'integrity' attribute for resource

ianmann56 commented 3 years ago

🐞 Describe the Bug

I'm using Cypress for integration/end-to-end testing. I am getting this error with the integrity of the build files when cypress makes a request to my app.

I can run this in a browser fine but as soon as I navigate to it in cypress, it fails.

🔬 Minimal Reproduction

I'm running the following command to serve the application:

HOST_ONLY=true ember serve -prod --ssl --secure-proxy=false --proxy=https://localhost:5005 --environment=test

Note that HOST_ONLY is my own custom environment variable that changes some of the ember environment

My dist/index.html file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MY_APP</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="my_app/config/environment" content="%7B%22modulePrefix%22%3A%22my_app%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22apollo%22%3A%7B%22apiURL%22%3A%22https%3A%2F%2Flocalhost%3A4200%2Fgraphql%22%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Atrue%2C%22LOG_VIEW_LOOKUPS%22%3Atrue%2C%22rootElement%22%3A%22body%22%2C%22autoboot%22%3Atrue%2C%22name%22%3A%22my_app%22%2C%22version%22%3A%220.0.0%2Bbcd2832e%22%7D%2C%22useTestAuthentication%22%3Atrue%2C%22testLoginUrl%22%3A%22https%3A%2F%2Flocalhost%3A5005%2Ftest-login%22%2C%22uploadURL%22%3A%22https%3A%2F%2Flocalhost%3A5005%2Fupload%22%2C%22changeDistrictUrl%22%3A%22https%3A%2F%2Flocalhost%3A5005%2FChangeDistrict%22%2C%22someUrl%22%3A%22https%3A%2F%2FsomeUrl.org%2FRedesignWebservice.asmx%22%2C%22ember-paper%22%3A%7B%22insertFontLinks%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%2C%22isModuleUnification%22%3Afalse%7D" />
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link integrity="" rel="stylesheet" href="/assets/vendor.css">
    <link integrity="" rel="stylesheet" href="/assets/my_app.css">

  </head>
  <body>

    <script src="/assets/vendor.js" integrity="sha256-j/SY/L5lTQnOFnshfDj8m9r+DOXu6yQ8oKhMB5qw1yc= sha512-jhUGpWd54EYsWxqQLWn2sLxYjPZBk+wwMgfYCjB6fkJhivKLl49VFWZs5a7pwiag69275Ob+g6KMPj4LGvUokQ==" ></script>
    <script src="/assets/my_app.js" integrity="sha256-CsJ5KSNXP3ZYpZffLJA6DFjRhudzXgHpZv1MlE/TLWo= sha512-2diGxxVtVmMz6GgWbSya9htwu7GFummhTR5apnqIcdvAJL0fXQabyj8bJndRmQ1Q7Ooijk5IsxV3KTYiMYSc3g==" ></script>

  </body>
</html>

😕 Actual Behavior

I'm recieving this error in chrome:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://localhost:4200/assets/vendor.js' with computed SHA-256 integrity '+To1bA3WFCo38Xa/YQUVC5fbJR9Tf3OQYI/XHuDyVqM='. The resource has been blocked.

And the page does not load.

🤔 Expected Behavior

That error not to occur and the page to load

🌍 Environment

Ember: -3.10.1
Node.js/npm: -12.16.1
OS: -Ubuntu 18.04.5 LTS
Browser: -Chrome Version 85.0.4183.102 (Official Build) (64-bit)

➕ Additional Context

Environment.js

module.exports = function (environment) {
  let ENV = {
    modulePrefix: "my_app",
    environment,
    rootURL: "/",
    locationType: "auto",
    EmberENV: {
      FEATURES: {},
      EXTEND_PROTOTYPES: {},
    },

    apollo: {
      apiURL: "https://test.example/graphql",
    },

    APP: {},
  };

  if (environment === "test") {
    if (process.env.HOST_ONLY) {
      ENV.APP.LOG_ACTIVE_GENERATION = true;
      ENV.APP.LOG_VIEW_LOOKUPS = true;

      ENV.APP.rootElement = "body";
      ENV.APP.autoboot = true;

      ENV.useTestAuthentication = true;
      ENV.testLoginUrl = "https://localhost:5005/test-login";
    } else {
      // // Testem prefers this...
      ENV.locationType = "none";

      // // keep test console output quieter
      ENV.APP.LOG_ACTIVE_GENERATION = false;
      ENV.APP.LOG_VIEW_LOOKUPS = false;

      ENV.APP.rootElement = "#ember-testing";
      ENV.APP.autoboot = false;
    }

    ENV.apollo.apiURL = "https://localhost:4200/graphql";
    ENV.uploadURL = "https://localhost:5005/upload";
  }

  return ENV;
};

0xMurage commented 3 years ago

The issue is caused by Cypress https://github.com/cypress-io/cypress/issues/2393. An experimental workaround is adding experimental source rewriting option in your cypress configuration (usually cypress.json)

{
    "experimentalSourceRewriting": true
}

rwjblue commented 3 years ago

Aha, thank you @mimidotsuser!

I'm going to go ahead and close this for now (it doesn't seem like a bug in Ember), happy to reopen if I'm mistaken.

emberjs / ember.js