Html UI report without enable same-origin assets

btd commented 4 days ago

Clear and concise description of the problem

As of now, html report has such markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.ico" sizes="48x48">
    <link rel="icon" href="./favicon.svg" sizes="any" type="image/svg+xml">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vitest</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <script>
      (function () {
        const prefersDark =
          window.matchMedia &&
          window.matchMedia("(prefers-color-scheme: dark)").matches;
        const setting = localStorage.getItem("vueuse-color-scheme") || "auto";
        if (setting === "dark" || (prefersDark && setting !== "light"))
          document.documentElement.classList.toggle("dark", true);
      })();
    </script>
    <!-- !LOAD_METADATA! -->
    <script type="module" crossorigin src="./assets/index-DsWp6aFQ.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-D5rK8X7L.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

It always contain crossorigin attribute, which enables same-origin policy.

When we upload generated report for every url in our artifact storage, it returns every response with SSO checks (location header). And this breaks this report (blank page, FF shows Cross-Origin violation for same origin policy)

Alternative

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

hi-ogawa commented 4 days ago

When we upload generated report for every url in our artifact storage, it returns every response with SSO checks (location header). And this breaks this report (blank page, FF shows Cross-Origin violation for same origin policy)

I'm not sure what the issue is exactly with that description. Adding crossorigin is the default output of Vite build (which Vitest uses to bundle @vitest/ui package) and Vitest is not doing anything specifically, so I would imagine it's a sensible default for any frontend assets. I don't think Vitest is going to introduce configuration for this.

I think the easiest way around is to strip out crossorigin from index.html during your CI pipeline, like sed -i 's/crossorigin//' index.html seems enough.

btd commented 3 days ago

I would imagine it's a sensible default for any frontend assets

I would disagree there. It is optioned default. It is good for dev and when you do not use CDN (you can see for google CDN we do not have crossorigin).

Also there we are building not webapp, but report. I believe it should be as simple as possible (i based my opinion on usage of istanbul html report and rollup-plugin-visualizer maintainer experience)

Let see if others comment, otherwise i will use sed in build script.

hi-ogawa commented 3 days ago

Admittedly I have no idea about security, so I was just blaming Vite for now :smile: I didn't see any option to control this, so I thought it would be a pretty strong opinion imposed on all Vite use cases.

I also saw some folks putting Vitest's artifacts on the Internet like https://onchainkit.xyz/coverage/ (https://github.com/vitest-dev/vitest/issues/6357), so I wasn't entirely sure about your argument. But happy to discuss here and get opinions from more.

btd commented 3 days ago

I also saw some folks putting Vitest's artifacts on the Internet like https://onchainkit.xyz/coverage/

Yea, and it is istanbul report 😄

vitest-dev / vitest