[DevTools Bug]: devtools does not works on null origin(sandbox) #34268
Description
Website or app
Please refer to 'How to reproduce'.
Repro steps
Save the following code as server.js , then run the command: node server.js 1234 --sandbox
and open http://127.0.0.1:1234 in your browser.
When you check the Developer Tools, you'll notice that the React Components tab doesn't appear.
server.js source code
const http = require("http");
const args = process.argv.slice(2);
const withSandbox = args.includes("--sandbox");
if (args.length < 1) {
console.error("Usage: node server.js <port> [--sandbox]");
process.exit(1);
}
const html = `
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const App = () => React.createElement("h1", null, "Hello, React${withSandbox ? " (sandbox enabled)" : ""
}");
ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App, null));
</script>
</body>
</html>`;
const port = parseInt(args[0], 10);
if (Number.isNaN(port) || port <= 0) {
console.error("Invalid port:", args[0]);
process.exit(1);
}
const sendRes = (req, res, status, contentType, body) => {
res.statusCode = status;
res.setHeader("Content-Type", contentType + "; charset=utf-8");
if (withSandbox)
res.setHeader("Content-Security-Policy", "sandbox allow-scripts");
if (req.method !== "OPTIONS") res.end(body);
};
http
.createServer((req, res) => {
if (req.url === "/") {
sendRes(req, res, 200, "text/html", html);
} else {
sendRes(req, res, 404, "text/plain", "404 Not Found");
}
})
.listen(port, () => {
console.log(
`Server listening on port ${port}${withSandbox ? " (sandbox enabled)" : ""
}`
);
});I submitted a ticket over a year ago, but since it has not yet been resolved, I have resubmitted it with detailed information on how to reproduce the issue.
related #29647
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
No response
Error message (automated)
No response
Error call stack (automated)
Error component stack (automated)
GitHub query string (automated)