Merge commit from fork

sapphi-red · web-flow · commit 5c9378bb0127 · 2025-03-24T21:05:39.000+03:00
BREAKING CHANGE: cross origin requests are not allowed unless allowed by `Access-Control-Allow-Origin` header
diff --git a/lib/Server.js b/lib/Server.js
@@ -1970,6 +1970,32 @@ class Server {
       },
     });
 
+    // Register setup cross origin request check for security
+    middlewares.push({
+      name: "cross-origin-header-check",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        const headers =
+          /** @type {{ [key: string]: string | undefined }} */
+          (req.headers);
+        if (
+          headers["sec-fetch-mode"] === "no-cors" &&
+          headers["sec-fetch-site"] === "cross-site"
+        ) {
+          res.statusCode = 403;
+          res.end("Cross-Origin request blocked");
+          return;
+        }
+
+        next();
+      },
+    });
+
     const isHTTP2 =
       /** @type {ServerConfiguration<A, S>} */ (this.options.server).type ===
       "http2";
diff --git a/test/e2e/cross-origin-request.test.js b/test/e2e/cross-origin-request.test.js
@@ -0,0 +1,118 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/client-config/webpack.config");
+const runBrowser = require("../helpers/run-browser");
+const [port1, port2] = require("../ports-map")["cross-origin-request"];
+
+describe("cross-origin requests", () => {
+  const devServerPort = port1;
+  const htmlServerPort = port2;
+  const htmlServerHost = "127.0.0.1";
+
+  it("should return 403 for cross-origin no-cors non-module script tag requests", async () => {
+    const compiler = webpack(config);
+    const devServerOptions = {
+      port: devServerPort,
+      allowedHosts: "auto",
+    };
+    const server = new Server(devServerOptions, compiler);
+
+    await server.start();
+
+    // Start a separate server for serving the HTML file
+    const http = require("http");
+    const htmlServer = http.createServer((req, res) => {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(`
+        <html>
+          <head>
+            <script src="http://localhost:${devServerPort}/main.js"></script>
+          </head>
+          <body></body>
+        </html>
+      `);
+    });
+    htmlServer.listen(htmlServerPort, htmlServerHost);
+
+    const { page, browser } = await runBrowser();
+    try {
+      const pageErrors = [];
+
+      page.on("pageerror", (error) => {
+        pageErrors.push(error);
+      });
+
+      const scriptTagRequest = page.waitForResponse(
+        `http://localhost:${devServerPort}/main.js`,
+      );
+
+      await page.goto(`http://${htmlServerHost}:${htmlServerPort}`);
+
+      const response = await scriptTagRequest;
+
+      expect(response.status()).toBe(403);
+    } catch (error) {
+      throw error;
+    } finally {
+      await browser.close();
+      await server.stop();
+      htmlServer.close();
+    }
+  });
+
+  it("should return 200 for cross-origin cors non-module script tag requests", async () => {
+    const compiler = webpack(config);
+    const devServerOptions = {
+      port: devServerPort,
+      allowedHosts: "auto",
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+      },
+    };
+    const server = new Server(devServerOptions, compiler);
+
+    await server.start();
+
+    // Start a separate server for serving the HTML file
+    const http = require("http");
+    const htmlServer = http.createServer((req, res) => {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(`
+        <html>
+          <head>
+            <script src="http://localhost:${devServerPort}/main.js" crossorigin></script>
+          </head>
+          <body></body>
+        </html>
+      `);
+    });
+    htmlServer.listen(htmlServerPort, htmlServerHost);
+
+    const { page, browser } = await runBrowser();
+    try {
+      const pageErrors = [];
+
+      page.on("pageerror", (error) => {
+        pageErrors.push(error);
+      });
+
+      const scriptTagRequest = page.waitForResponse(
+        `http://localhost:${devServerPort}/main.js`,
+      );
+
+      await page.goto(`http://${htmlServerHost}:${htmlServerPort}`);
+
+      const response = await scriptTagRequest;
+
+      expect(response.status()).toBe(200);
+    } catch (error) {
+      throw error;
+    } finally {
+      await browser.close();
+      await server.stop();
+      htmlServer.close();
+    }
+  });
+});
diff --git a/test/ports-map.js b/test/ports-map.js
@@ -81,6 +81,7 @@ const listOfTests = {
   "setup-middlewares-option": 1,
   "options-request-response": 2,
   app: 1,
+  "cross-origin-request": 2,
 };
 
 let startPort = 8089;
