vitest-dev
Html UI report without enable same-origin assets
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)
Suggested solution
Honestly i do not completely understand why for html report we need crossorigin checks. Nobody share them in internet and it does not look like it make it any way secure as it is completely generated.
To keep it backward compatible as i cannot imagine every possible usecase, can we allow via settings disable crossorign attribute addition?
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.
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.
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.
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.
I also saw some folks putting Vitest's artifacts on the Internet like https://onchainkit.xyz/coverage/
Yea, and it is istanbul report 😄
The team decided that we could remove the crossorigin tag during the build. PR is welcome
Reading https://github.com/vitejs/vite/issues/6648 again, it looks like this is technically a browser bug. crossorigin on same origin assets should be mostly no-op and cookies should work. Nonetheless, it makes sense to do workaround on Vitest side as discussed.